Add a Field

Your Fields

Live Preview

Export

Advertisement

HTML Input Types Reference

TypeUse It ForFree Validation You Get
textSingle-line free textNone beyond length limits
emailEmail addressesFormat check, mobile @ keyboard
numberQuantities, prices, agesNumeric only, min/max/step
telPhone numbersNumeric keypad on mobile
dateBirthdays, appointmentsNative picker, no typos like 31/31
urlWebsite linksMust be a valid URL
passwordSecretsMasking; pair with HTTPS always
checkboxYes/no consent, opt-insChecked/unchecked state
radioPick one of a few optionsSingle selection per group name

Rule of thumb: the more you lean on the right input type, the less JavaScript you write. Browsers have validated email formats and date ranges since 2013.

How the Form Builder Works

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.

How to use it

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 worked example

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 form exports as about 20 lines of HTML, weighs under a kilobyte, renders instantly, and validates in the browser with zero JavaScript.

Frequently Asked Questions

Is the exported HTML ready to use?

Yes. The export is a single self-contained form element with semantic labels, name attributes, required flags, and a submit button. There is no framework, no CSS dependency, and no JavaScript required to render it. Point the action attribute at your backend or a form service and it works.

Does the form submit anywhere by itself?

No. The generated form has action="#" as a placeholder. You decide where it goes: your own backend endpoint, a service like Formspree or Netlify Forms, or an event handler you write. Nothing sends data anywhere until you wire that up, which is the point: your users' data stays yours.

What's the difference between name and id on form fields?

The name attribute is what the browser puts in the submitted data, so every field needs one and duplicates among radio buttons are how grouping works. The id is for linking labels to fields for accessibility and is auto-generated here to stay unique. Forgetting name is the single most common broken-form bug.

How do I make a required field?

Add the required attribute to the input. The browser then blocks submission and shows its own validation message, no JavaScript needed. Pair it with the right input type, email for addresses, number for quantities, and you get format checking for free from the same attribute.

Can I style the generated form?

Easily, because the markup is plain. The export includes no classes you don't add yourself, so your site's existing styles apply immediately, and a few lines of CSS on label, input, and button cover the rest. Frameworks fight your stylesheets; plain HTML doesn't.

Advertisement