Form templates

What you get

Each template is a small, self-contained bundle of HTML, CSS and a framework wrapper. You pick a design, pick a framework, copy the code, paste it in, and swap the placeholder endpoint for your own SaveForm form ID. That's it. Templates are free on every plan, including the code for every design.

• You own the code. No SaveForm package to install, no version to bump. The form lives in your repo and is styled by your CSS pipeline.
• Submissions go to SaveForm. The form action points at https://saveform.io/api/submit/YOUR_FORM_ID, just like any other SaveForm form.
• Style-isolated by default. Selectors are namespaced under a unique data-sf-tpl="…" attribute so the template can't accidentally style the rest of your site, and your global CSS can't accidentally break it.

Available templates

The gallery covers the common form patterns that show up on every marketing site and product:

• Contact form name, email, message.
• Waitlist email-only with optional referral source.
• Newsletter signup tiny email + subscribe footer block.
• Feedback rating, comment, optional email.
• Lead capture name, work email, company, role.
• Job application name, role, portfolio link, short pitch.
• Support ticket priority, subject, description.
• RSVP yes / maybe / no, plus-ones, dietary notes.

How to use a template

Three steps from gallery to live form:

1. Pick a template. Open the gallery, click any card. The detail page shows a live, interactive preview.
2. Pick a design and framework. The preview updates when you switch designs (Soft, Minimal, Brutalist, etc.). The code panel switches between HTML, React, Next.js, Vue, Angular and Svelte. Some templates ship two or three designs, others ship more.
3. Copy and paste. One click copies the snippet for the selected framework + design combination. Paste it where you want the form to live.
4. Wire your form ID. Replace YOUR_FORM_ID in the form action with the ID from your SaveForm dashboard. Don't have one yet? Sign up, click New form, copy the ID.

Multiple designs

Every template ships with at least two visual styles so you can match your brand without rewriting markup. Across the gallery we maintain six recurring designs:

• Brutalist hard edges, mono type, fuchsia accents. Matches the SaveForm aesthetic.
• Soft rounded corners, indigo to violet gradient CTA. Friendly default.
• Minimal underline-only inputs, no card. Disappears into any layout.
• Glass frosted card. Works over hero images and gradients.
• Bold dark card, gradient headline, primary-coloured CTA.
• Terminal mono type, traffic-light header chrome. Devtool flavour.

Switching designs in the gallery just swaps the code. Class names and field structure stay identical between designs within a template, so you can A/B them or switch later without touching your form-handling logic.

Every framework

Every template ships code for the framework you actually use. Picking a framework in the code panel swaps only the wrapper; the rendered markup and the SaveForm endpoint stay the same.

HTMLReactNext.jsVueAngularSvelte

Frameworks that need multiple files (Angular: component + template + styles) get a tabbed code panel with all files. Pick the one you need, copy it, drop it into your project.

Style isolation

Copy-paste components usually break in two directions: your global CSS bleeds into them, or their CSS bleeds out. Templates avoid both:

• Scoped attribute. Every element is wrapped under a unique data-sf-tpl="<slug>" attribute. Every selector is prefixed with that attribute, so rules can only match elements inside this specific template.
• Namespaced classes. Classes follow .sf-<slug>__<part> BEM-style naming. There's no chance of a .button from your site stomping ours, or vice versa.
• CSS reset at the root. The wrapper applies all: revert so anything your global stylesheet overrides on standard elements (e.g. input, label) is reset back to defaults before the template's rules apply.

[data-sf-tpl="contact"] {
  all: revert;
}

[data-sf-tpl="contact"] .sf-contact__field {
  /* scoped — can only match elements inside data-sf-tpl="contact" */
}

That means a template you paste into a brutalist Tailwind site renders the same as a template you paste into a Bootstrap admin panel, and neither one accidentally restyles the rest of the page.

Customising

Once the code is in your repo it's just HTML and CSS, so customise freely:

• Rename the slug. Change every data-sf-tpl="contact" and .sf-contact__* to your own value. It only matters that it stays consistent within the template.
• Add or remove fields. SaveForm accepts any form fields. Add a hidden honeypot field, an extra company input, whatever you need. The dashboard auto-renders any new columns.
• Add a custom redirect. Drop in a hidden _redirect field per the custom redirects guide.
• Translate copy. The labels, placeholders, button text and success state are plain text in the markup. Replace with i18n keys or translated strings.
• Restyle. Override the namespaced classes in your own stylesheet, or strip the scoped CSS entirely and apply your own design system. The structural markup keeps working.

Browse the gallery

Open the gallery, hit any card, scroll through designs and frameworks until something fits. Nothing requires sign-up to preview or copy.

• Form templates gallery all 8 templates, every design, every framework.
• Form builder build something custom from scratch and export the code.