HTML form generator
Build it visually, then press Export for semantic, accessible HTML you can paste anywhere: labels, fieldsets, validation and scoped CSS included. A contact form is loaded to start.
Loading the builder…
How to create a form in HTML
An HTML form is a <form> element holding inputs. When submitted, the browser collects each input’s name and value and sends them to the URL in action using the method (usually post). Everything else — labels, types, validation — exists to help people fill it in correctly.
Interactive: take an email field apart
Switch each attribute off and try to submit. The box below is a real browser input, so what you see is what your visitors get.
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" required>Press “Try to submit” with an empty box, then with “sam@”, then with a full address.
- ✓ Screen readers announce “Email, edit text”; tapping the word focuses the box.
- ✓ type="email": phones show the @ keyboard and the browser checks the format.
- ✓ required: an empty box can’t be submitted.
- ✓ autocomplete="email": the browser offers the saved address with one tap.
- ✓ name="email" is the key the value is sent under.
A minimal, correct contact form
<form action="https://your-endpoint.example/contact" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" autocomplete="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send</button>
</form>Which input type for which question
| Asking for | Use | Why |
|---|---|---|
type="email" | @ keyboard on phones, built-in format check | |
| Phone | type="tel" | Number pad; no format check, since formats vary by country |
| Quantity, age | type="number" + min/max | Numeric keypad and range check |
| One of a few options | Radio buttons in a <fieldset> | All choices visible at once |
| One of many options | <select> | Saves space past about seven options |
| Several options | Checkboxes, name="x[]" | Each ticked value is sent |
| Date | type="date" | Native date picker, sends YYYY-MM-DD |
| Long text | <textarea> | Multi-line and resizable |
Where to send the data
A static page can’t receive submissions by itself. Common options: a route on your own server (PHP, Node, Python), a serverless function, or a form backend service that forwards submissions to email or a spreadsheet. Paste its URL into Settings → Form endpoint and the export includes it.
Prefer JSON?
Export → FormCraft JSON is the form definition, and you can import it back later. Export → JSON Schema (draft 2020-12) describes the answers, with formats, enums and required keys, for validating submissions on your server.
Questions people ask
Is the generated HTML free to use?
Yes, for anything, with no attribution. The markup is plain HTML with optional CSS and, for multi-step forms, a tiny vanilla script. No libraries, no tracking.
How do I make the form actually send data?
Put an endpoint URL in the form’s action attribute (Settings → Form endpoint does this for you). That can be your own server route, or a form backend service such as Formspree, Basin, Getform or Netlify Forms. HTML alone cannot store or email submissions.
Is the HTML accessible?
Every input has a real <label>, groups of radios and checkboxes sit in <fieldset>/<legend>, required fields use the required attribute, help text is linked with aria-describedby, and Likert grids use a table with row and column headers.
Can I get the form as JSON instead?
Yes. Export → FormCraft JSON saves the form definition (re-importable), and Export → JSON Schema describes the shape of the answers for developers who validate submissions.
Will it match my site’s styles?
Untick “Include CSS” to get bare semantic markup that inherits your site’s styles. With CSS on, all rules are scoped under .fc-form and colours are CSS variables you can override.