Form Builder
Design a form visually, then embed it on any site with a single script tag — no hand-written HTML.
The Form builder tab turns a form into a hosted, embeddable widget. You lay out fields, set per-field validation, choose the success behaviour, and pick a captcha — all in the dashboard. Static Forms generates a drop-in <script> snippet that renders the form on your page and posts to the same endpoint as every other integration. It's available on all tiers.
Builder and live site render from the same embed
The preview canvas inside the builder is rendered by the real staticforms.js embed in a dry-run mode. What you see while building is exactly what your visitors get — there is no separate “preview” renderer that can drift from production.
Turn it on
Open a form, go to the Form builder tab, and toggle the hosted form on. Add your fields, then save. Until the form is enabled and saved, the embed shows “This form is currently unavailable” in place of the form — the toggle is the switch that publishes your schema.
Enabling the builder enforces the schema everywhere
Once the hosted form is on, every submission to this form's API key is validated against your saved fields — including an existing hand-written HTML form you already have live. If that form's field names don't match the schema (or it omits a field you marked required), its submissions will start failing. Mirror your live form's field names before you enable, or use the embed snippet everywhere.
Fields
Add fields from the field rail, reorder them with the up/down arrows, or use the duplicate and remove actions. Each field has a label, an internal name (used as the input's name attribute), an optional placeholder and help text, and a required toggle.
Field names are normalised
Field names must match ^[a-z][a-z0-9_]*$ — lowercase, starting with a letter, no spaces. The builder normalises what you type as you go (a leading digit or a space is corrected automatically), so the value lands safely in your submission data and in the inbox.
Field types
| Type | Renders as | Notes |
|---|---|---|
| Text | Single-line text input | The default for short free text. |
| Email input | Pairs with the Email validation rule. | |
| Textarea | Multi-line text area | For longer messages. |
| Number | Numeric input | Use Number, Positive number, or Number range rules. |
| Boolean | Checkbox | A single yes/no toggle. |
| Enum | Dropdown (select) | Provide the list of options. |
| Date | Date picker | Use Before / After / Between rules. |
| File | File upload | Use File extension and File size rules. |
Validation rules
Each field can carry one validation rule, chosen in the inspector. Rules run in the browser and are re-enforced on the server when a submission arrives — a value that slips past the client (or a hand-crafted POST) still gets rejected. The one exception is file size: the server only sees the file's name, so the size limit is enforced in the browser while the extension rule is re-checked server-side. The inspector adapts to the field type, so you only see rules that make sense for it.
| Rule | Applies to | What it checks |
|---|---|---|
| Text / Email | A valid email address. | |
| Website | Text | A valid URL. |
| Number | Number | A numeric value. |
| Positive number | Number | A number greater than zero. |
| Number range | Number | Between a min and max you set. |
| Before | Date | On or before a given date. |
| After | Date | On or after a given date. |
| Between | Date | Within a start and end date. |
| File extension | File | One of an allowed extension list, e.g. pdf, png. |
| File size | File | At or under a size limit (1–25 MB). |
Validation errors map back to the field
When a submission fails server-side validation, the API returns a 422 with an errors object. The embed reads it and shows the message inline against the offending field — no full-page error, no lost input.
Form settings
Beyond fields, the builder controls how the form presents and what happens after a successful submit:
| Setting | What it does |
|---|---|
| Title & description | Optional heading and intro text shown above the fields. |
| Submit button text | The button label (defaults to “Submit”). |
| Success message | Inline confirmation shown in place of the form after submit. |
| Success redirect URL | Send the visitor to a thank-you page instead of an inline message. |
| Error redirect URL | Where to send the visitor if submission fails. |
Captcha
The embed renders and auto-loads the provider script for whichever captcha your form uses — you don't add a second snippet. All four providers are supported:
ALTCHA
Privacy-friendly, no site key needed — uses a challenge URL.
Cloudflare Turnstile
Set the public site key in Security → Captcha.
hCaptcha
Set the public site key in Security → Captcha.
reCAPTCHA v2 & v3
Set the public site key in Security → Captcha; v2 renders a checkbox, v3 runs invisibly.
Configure the provider and its keys under the Security tab — that's the single place captcha keys live; the builder's Captcha panel shows which key is in effect. The site key is a public key and is safe to ship in the embed.
Embed it
Copy a snippet from the Embed panel in the builder. There are two ways to ship it — let Static Forms render the whole form, or keep your own markup and attach behaviour to it. Both post to the same documented endpoint.
Render vs. attach
Render fetches your saved schema and builds the entire form for you — fields, validation, captcha, and the success state. Use it when you want the form wholly managed from the dashboard.
Attach keeps your existing HTML and layers on the same submission handling: AJAX submit, inline validation errors, and the success behaviour, with no page reload. Use it when you've already styled your own markup.
No CORS preflight, no backend
The embed posts to the submission endpoint without custom headers, so cross-origin posts skip the CORS preflight. Submissions go through fetch and visitors stay on the page — there's no server for you to run.
Lifecycle events
The embed dispatches events you can hook into for custom UI or analytics: sf:submitting, sf:success, and sf:error. Listen on the form element to wire up your own loading states or conversion tracking.
Where submissions go
A builder form is a normal Static Forms submission. Once it posts, every existing feature applies unchanged: domain restriction, captcha, spam filtering, email delivery, webhooks, and integrations. View entries in the Inbox just like any other form.
Schema enforcement is always on
When the builder is enabled, every submission to your API key is validated against your saved schema — required fields, types, and rules — regardless of how the request was made. The form you designed is the contract.