Build a form · Last updated May 16, 2026

Form builder

The form builder is a visual editor for shaping a SaveForm form: pick fields, pick a design, configure the after-submit behaviour, and export the code in your framework of choice. The output is plain HTML and CSS with a thin wrapper for your framework. There's no SaveForm runtime on the page.

How it works

The builder UI has two columns:

Configuration (left). Title, lede, form fields, submit-button label, design, after-submit options and branding toggle.
Preview / code (right). Toggle between a live, interactive preview of the current form and a tabbed code export across every framework. The preview updates as you edit.

Nothing in the builder requires a SaveForm account to use. You can sketch a form, copy the code, and only sign up when you want submissions to actually land in a dashboard.

Fields

Add fields from the field picker. Every field has a label (which auto-derives the submitted form-data key), a placeholder, an optional description, and a required toggle. Click any field row to edit it inline; drag to reorder.

Type	Use
`text`	Single-line text input.
`email`	Email input with native browser validation.
`tel`	Phone number input.
`url`	URL input with native browser validation.
`number`	Numeric input with min / max / step support.
`textarea`	Multi-line textarea for longer responses.
`select`	Native dropdown with custom options.
`checkbox`	Single boolean checkbox (e.g. opt-in).
`file` Lite	Accept file uploads (image, PDF, etc). Available on the Lite plan.

Designs

Pick from six designs in the design bar. The first three are free and ship code on the free plan; the remaining three are part of Lite and gate the code export.

Design	Vibe
`brutal` Free	Brutalist. Hard edges, mono type, fuchsia accents.
`soft` Free	Soft. Rounded inputs, indigo to violet gradient CTA.
`minimal` Free	Minimal. Underline-only inputs, no card. Disappears anywhere.
`glass` Lite	Glass. Frosted card. Works over hero images and gradients.
`bold` Lite	Bold. Dark card, gradient headline, primary-coloured CTA.
`terminal` Lite	Terminal. Mono type, traffic-light header chrome.

Free users can select and preview any design (the demo is the demo). Exporting the code for a Lite-tier design is gated. Pick a free design, or upgrade to unlock the export for all six.

After submit

By default SaveForm forms redirect to a generic SaveForm thank-you page after a successful submission. The builder surfaces two after-submit overrides that are part of Lite:

Redirect URL. Send visitors to your own thank-you page (any absolute URL). See custom redirects for the underlying hidden-field syntax.
Inline success message. Show a custom message in-place after submit, no redirect.

Branding

Free forms render a small Powered by SaveForm footer at the bottom of the form. Lite and Pro can toggle this off. The builder has a switch labelled Remove SaveForm branding that's gated to Lite.

Exporting code

Flip the right pane from Live preview to Copy code and you get a tabbed export across every supported framework:

HTMLReactNext.jsVueAngularSvelte

Each framework tab can contain multiple files (Angular ships a component + template + style file, for example). One click copies the file currently shown.

The exported HTML uses the same isolation pattern as the templates: every element sits under a data-sf-tpl="…" wrapper, every class follows the .sf-<slug>__<part> convention, and the root applies all: revert so your global CSS can't change how the form renders. See the templates style-isolation section for the full breakdown.

What requires Lite

The builder itself, every free design, the preview, and the generated code for free designs are completely free. The following features require Lite (from $4/mo annual):

Lite-tier designs. Glass, Bold and Terminal. You can preview them on free; the code export is gated.
File upload fields. Other field types are free.
Custom after-submit behaviour. Redirect URL and inline success message. Free forms use the generic SaveForm thank-you page.
Remove SaveForm branding. The small Powered by SaveForm footer.

Using the exported code

The output is yours. Paste it into your repo, commit it, restyle it, swap fields around. The builder doesn't need to know about your form after that point.

Paste the snippet for your framework into the page or component where the form should live.
Replace YOUR_FORM_ID in the form action with the ID from your SaveForm dashboard.
Optionally layer on spam protection, redirects, webhooks, or email alerts from the dashboard.

Open the builder

Form builder sketch a form, pick a design, export the code.
Form templates start from a hand-built design instead.