Form Setup
Understand the Setup tab — form token, HTML builder, styles, and framework snippets.
Every form has a Setup tab that gives you the token and generated code you need to start collecting submissions.
Form token
The token uniquely identifies your form and authorises submissions. It looks like tk_abc123….
Always include it as a hidden field:
<input type="hidden" name="_token" value="YOUR_FORM_TOKEN" />Keep the token private. Anyone with it can post submissions to your form.
HTML form builder
The builder generates a ready-to-use <form> snippet. You do not have to write HTML by hand.
Adding fields
Click any chip in the Add fields row to add it to your form:
| Field | HTML type |
|---|---|
| Name | text |
email | |
| Phone | tel |
| Company | text |
| Website | url |
| Subject | text |
| Message | textarea |
| File | file |
| Multiple files | file multiple |
| Email subject | hidden (_subject) |
| reCAPTCHA v2 | CAPTCHA widget |
Editing fields
Each active field row lets you set:
- Label — the
<label>text rendered above the input. - Name attribute — the key that appears in your submission data.
- Required / Optional — adds or removes the
requiredHTML attribute.
Drag the ≡ handle to reorder fields.
Styling
Choose from four built-in themes:
| Theme | Character |
|---|---|
| Default | Clean, bordered inputs with a pill submit button |
| Minimal | Underline-only inputs, ghost submit button |
| Rounded | Larger padding, extra border-radius |
| Dark | Dark background, light text |
Customise further with the three knobs:
- Color — accent colour for focus rings and the submit button (default
#494bd6). - Radius — border-radius of inputs in px (0–20, default 8).
- Font — Inter, System UI, Geist, or Monospace.
The style is injected as a <style> block scoped to your form via the data-nbf attribute, so it cannot bleed into the rest of your page.
Preview / Edit / Full HTML tabs
| Tab | What it shows |
|---|---|
| Preview | Live iframe rendering of the form with your chosen style |
| Edit | Editable code panel — syntax-highlighted, changes sync back to the field list |
| Full HTML | Read-only combined output of <style> + <form> |
When editing manually, keep three things intact or submissions will break:
- The
actionattribute on<form>. - The
_tokenhidden input. - Each field's
nameattribute.
Framework snippets
Switch framework tabs at the bottom of the Setup page to get code tailored to your stack. The snippet updates live as you add, remove, or reorder fields.
Supported frameworks: HTML, React, Next.js, Remix, Gatsby, Vue, Nuxt, Astro, Svelte, SvelteKit, Angular, jQuery, Alpine.js, HTMX, PHP, Laravel.
Each snippet demonstrates:
- How to submit with
fetch(where applicable). - Loading / sending state on the submit button.
- A success message once the server returns
200.
Notes
- Forms must use
method="POST".GETforms are not accepted. - Submissions to an inactive form are rejected with
404. Toggle the form active/inactive in Settings. - The pixel tracker (
<img src="…/pixel/{id}.svg" …>) is included automatically in generated snippets. It is used for open-rate analytics and can be removed without breaking submission delivery.