Answer: Click field types to add them, set each label, name and required flag, then copy the form as plain HTML or as a JSON field list. The sample contact form exports as 16 lines and 929 bytes of HTML, with no CSS or JavaScript attached.
Add fields, reorder them, export clean HTML or JSON — no signup, no framework, no server
| Type | Use It For | Free Validation You Get |
|---|---|---|
text | Single-line free text | None beyond length limits |
email | Email addresses | Format check, mobile @ keyboard |
number | Quantities, prices, ages | Numeric only, min/max/step |
tel | Phone numbers | Numeric keypad on mobile |
date | Birthdays, appointments | Native picker, no typos like 31/31 |
url | Website links | Must be a valid URL |
password | Secrets | Masking; pair with HTTPS always |
checkbox | Yes/no consent, opt-ins | Checked/unchecked state |
radio | Pick one of a few options | Single selection per group name |
Rule of thumb: the more you lean on the right input type, the less JavaScript you write. The builder's palette doesn't include tel or url; add a Short text field and change type="text" in the export. Every current browser checks email formats and shows a native date picker, though desktop Safari only added one in 2021.
Every click on the palette adds one field definition: a type, a label, a name attribute, placeholder text, and whether it's required. Dropdowns and radio groups take one option per line. The preview renders exactly what your users will see, and the export produces semantic HTML: a label tied to its input, a name on every field, and required flags where you set them.
Build top to bottom in the order you want visitors to answer. Use radio buttons under five options and a dropdown above five, since a dropdown hides choices behind a click. Keep required fields to the minimum you can honestly justify, because every extra required field costs completions. When the form looks right, copy the HTML and paste it into any page, or grab the JSON schema if you're feeding a backend or a no-code tool.
A contact form usually needs five fields: name (text, required), email (email, required), topic (dropdown with 3–4 options), message (long text, required), and a consent checkbox where privacy rules require one. That's the sample the Load a contact form button gives you, with the dropdown left optional. It exports as 16 lines and 929 bytes of HTML, renders instantly, and the browser checks the required fields and the email format before it submits, with no JavaScript.
The export is deliberately bare, which is good for pasting into any site but means a few things are left for you. Here's what the builder outputs and what to change.
| What the export does | What happens | What to change |
|---|---|---|
action="#" | The form posts back to the same page and the data goes nowhere | Point it at your endpoint or a form service URL |
Checkbox has no value | A ticked box sends newsletter=on; an unticked one sends nothing | Add value="yes" if your backend expects one, and treat a missing field as no |
| Required dropdown has no blank option | The first real option is preselected, so the browser never asks for a choice | Add <option value="">Choose…</option> as the first option |
Radio group label uses for with no matching id | Screen readers don't announce the question with the options | Wrap the radios in <fieldset> with the question as the <legend> |
| No required marker | The preview shows a red asterisk, the export doesn't | Add "(required)" or an asterisk to the label text |
| No CSS | Labels and inputs sit inline and run together | Start with label{display:block;margin-top:1rem} |
| No spam protection | Bots will find a public form within days | Add a hidden honeypot field or your form service's captcha |
Use a form backend. Services like Formspree give you a URL to paste into the action attribute, and they email you each submission. If your site is on Netlify, adding data-netlify="true" to the form tag does the same job. Avoid action="mailto:...", which depends on the visitor having a mail app set up and fails quietly when they don't.
The JSON tab lists the form's action and method plus every field with its type, label, name, required flag, placeholder and options. The sample form comes out at 46 lines. It's handy for saving a form design, feeding a script that renders forms, or handing a field list to a developer. Need to tidy or check it? Paste it into the JSON Formatter. If the form lives on a page you want found in search, the Meta Tag Generator handles the rest of the page head.
You design fields visually — labels, input types, placeholders, required flags — and the builder generates clean standalone HTML you can copy into any website. The output is a plain HTML form with no inline styles or CSS, so it picks up your site's own stylesheet and works with any backend or static host. Everything is generated in your browser with no account or upload.
Yes — the generated form is standard HTML, so you point its action attribute at your own endpoint or wire it to a handler with JavaScript. Common approaches are a POST to your server, a serverless function, or a form service. The builder just produces the markup; submission handling stays under your control.
Nine: short text, email, number, password, date, long text (textarea), dropdown, radio group and checkbox. File upload, hidden, tel and url fields aren't in the palette, so add a short text field and change its type in the exported HTML. Email and number fields give you free browser-side validation. Generated markup uses proper label associations so forms stay accessible.
When you tick Required on a dropdown, the builder removes the blank Choose option, so the first real option is already selected and the browser counts the field as answered. Add <option value="">Choose…</option> as the first option in the exported HTML and the browser will ask visitors to pick one.
No. It's a simple field list in the builder's own format: the form's action and method, then each field's type, label, name, required flag, placeholder and options. That makes it easy to read and to loop over in code, but it won't validate as a JSON Schema document without converting it.