What is Form Builder?

Form Builder lets you create custom forms with a visual editor. Add text fields, dropdowns, checkboxes, and more, then export the form as HTML or a JSON schema.

Pick from fourteen field types: text, email, phone, URL, number, date, file upload, rating scale, dropdown, checkbox, radio, textarea, description blocks for intro text, and page breaks that split a long form into steps. Every input field has a label, optional helper text, placeholder, required flag, and options list for dropdowns and radios. Start from a ready-made template (contact, feedback, survey, registration, order, booking), reorder fields with up/down arrows, preview the form live with a progress bar across pages, then export a clean styled HTML page you can paste into any site or a JSON schema for backend validation.

How to use

1. Step 1 — Click "Add Field" to insert a new field and pick its type (text, email, phone, URL, number, date, file, rating scale, dropdown, checkbox, radio, or textarea), drop in a page break to split a long form into steps, or load a ready-made template to start fast.
2. Step 2 — Click any field to set its label, placeholder, and whether it's required.
3. Step 3 — Preview the form live, then export it as HTML code or JSON schema to integrate into your project.

When to use

• Building a quick registration or RSVP form to embed on a static website.
• Prototyping a form before handing the schema to a developer to wire up.
• Teaching HTML form basics without making students type every input by hand.

Result

A teacher builds a class registration form with fields for Student Name (required text), Grade Level (dropdown: 9-12), Email (email validation), and a Comments textarea — then exports the HTML to embed on the school website.

FAQ

Where does the form data go when someone submits it?

Nowhere by default. The exported HTML has no action URL, so a submission goes nowhere and the data never leaves the device. To collect responses, point the form's action to your own endpoint, Formspree, Google Forms, or a serverless function.

Can I import an existing form back into the editor?

Not currently. The export is one-way: editor to HTML or JSON. If you need to edit a form later, save the JSON schema and rebuild from it manually, or keep your work session open until you're done iterating.

Why are my dropdown options not appearing?

Dropdowns and radios need at least one entry in the Options list. Click the field, find the Options section, and type each choice separated by commas or new lines. Empty options lists render as a single empty select with no items.

Does the exported HTML include any styling?

Yes — every HTML export now includes a small bundled stylesheet, so the form looks clean and readable the moment you open the file: tidy spacing, input borders, focus rings, and a styled submit button. The CSS is minimal and self-contained, so you can keep it as-is or delete the style block and drop in your own Tailwind, Bootstrap, or framework classes.

What is the difference between the HTML and JSON exports?

HTML is ready to paste into a page and render. JSON is a structured schema describing field types, labels, and validation rules, suitable for rendering with React, Vue, or a form library like react-hook-form or Formik.

Related Tools