This tool generates the HTML for a form only — it does not include a backend. For the form to actually send anything, it needs a server endpoint or a form service (for example Formspree, or your own server). Without one, submitting the form will not send anything. Put the endpoint in the "Form action URL" box above; if you leave it empty, the generated form has no action attribute.
What is the HTML Form Generator?
The HTML Form Generator is a free online tool that builds a complete HTML form for you — the fields, the labels, the validation and the submit button — and gives you clean, semantic HTML to paste into your page. It is made for anyone who needs a working form without writing it by hand: a contact form for a small website, a sign-up form for a newsletter, a feedback form for a blog, or a student practising HTML forms for the first time.
Every form it builds uses proper labels linked to their fields, so clicking a label focuses the right input and screen readers announce each field correctly. The fields are real HTML form controls — text, email, password, number, telephone, URL, textarea, dropdown, radio buttons, checkboxes, date and submit — with the validation attributes (required, minimum and maximum lengths, patterns) that browsers understand natively.
One thing to know upfront: this tool generates the HTML for a form only. It does not include a backend. For the form to actually send anything, it needs a server endpoint or a form service such as Formspree. That is stated on the page, not hidden — and the tool lets you put your endpoint in the “Form action URL” box so the generated form points at it.
Everything runs in your browser. There is no sign-up, and nothing you type leaves your device.
How to use the HTML Form Generator
- Set the Form action URL. This is where the form sends its data. If you have an endpoint — your own server, or a form service — paste it here. If you leave it empty, the generated form simply has no
actionattribute. - Choose the Method. POST is the usual choice for a form that sends data; GET puts the data in the page address and suits search-style forms. The default is POST.
- Add a field. Pick a field type from the “Add a field” dropdown — Text field, Email field, Password field, Number field, Telephone field, URL field, Textarea, Select dropdown, Radio buttons, Checkboxes, Date input or Submit button — then click Add field.
- Set each field’s details. For every field you can set its Label (the text readers see), its Name (the key the data is sent under), a Placeholder (the grey hint text inside the field), a Default value, whether it is Required, and Help text that appears under the field. Number fields also take a minimum, maximum and step; text fields take minimum and maximum lengths and a pattern.
- Add options where they are needed. Dropdowns, radio buttons and checkboxes need choices. Type one option per line, as
value|Label— for examplepricing|Pricing— or just the label on its own if the value and the label are the same. - Watch the live preview. The preview on the right updates as you work, so you can see the form exactly as a reader will see it. It runs in a sandboxed frame, so the form cannot submit from the preview.
- Copy or download. Click Copy to take the HTML, or Download to save it as
form.html. Clear wipes the form; Reset restores the default contact form.
Worked example
The tool loads with a ready-made contact form, and it is a good example of what the generator produces: a “Your name” text field (required, placeholder “Jane Smith”), an “Email address” field (required, with the help text “We will only use this to reply to you.”), a “Subject” dropdown (General question, Pricing, Support), a “Message” textarea (required, placeholder “How can we help?”), a “Subscribe to our newsletter” checkbox (ticked by default), and a “Send message” submit button. The generated HTML looks like this for the name field:
<label for="name">Your name</label>
<input type="text" id="name" name="name" placeholder="Jane Smith" required>
Every field follows the same pattern: a <label> with a for attribute that matches the field’s id, so the label and the field are properly associated. Try it yourself: click “Add field”, choose “Date input”, label it “Preferred date”, and watch it appear in the preview and in the HTML.
Where a form generator actually helps
Contact forms for small websites. A contact form is one of the first things a small business site needs, and it is also one of the easiest things to get wrong — missing labels, fields with no names, no required checks. Build it here, paste in your form service’s endpoint as the action URL, and you have a form that works and that screen readers can use.
Sign-up and feedback forms. A newsletter sign-up needs an email field and a submit button; a feedback form needs a textarea and maybe a rating dropdown. Both take two minutes in the generator: add the fields, set the labels, and the validation comes free — the browser checks the email address format and the required fields before anything is sent.
Learning HTML forms. If you are learning HTML, forms are where the pieces come together: inputs, labels, names, values, validation. Build a form in the tool, read the HTML it produces, and you can see exactly how each setting turns into markup. Change one thing — make a field required, add a pattern — and watch the output change. It is a faster way to learn than reading a reference page.
Tips for better forms
- Give every field a clear label. A placeholder is not a label — it disappears as soon as the reader starts typing. The label stays visible, and it is what screen readers announce. Write labels as plain questions or names: “Your name”, not “Field 1”.
- Use the right field type. An email field gives mobile readers an email keyboard and lets the browser check the format; a number field gives a number keyboard; a date field gives a date picker.
- Only mark fields required when they truly are. Every required field is a reason for a reader to give up. Ask for the minimum: name, email and message are usually enough for a contact form. The newsletter checkbox in the example is optional, and that is the right call.
- Put the action URL in before you publish. A form with no action goes nowhere. If you have no backend yet, use a form service — paste its endpoint into the “Form action URL” box and the generated form is ready to send.
- Keep help text short. One line under a field, explaining why you need the information or what format to use — the example’s “We will only use this to reply to you.” answers the reader’s worry in a single sentence.
Frequently asked questions
Will the form actually send emails?
Not on its own. The tool generates the HTML for the form; sending needs somewhere to send to. Put your server endpoint or your form service’s URL in the “Form action URL” box. Without one, the generated form has no action attribute and submitting it does nothing. The preview is sandboxed, so the form cannot submit from the tool itself.
What is the difference between POST and GET?
POST sends the form data in the body of the request, hidden from the page address — the right choice for contact forms, sign-ups and anything with personal information. GET puts the data in the page address after a ?, which suits search forms where you want the address to be shareable.
How do I add choices to a dropdown or radio buttons?
Add the field, then type one option per line in its options box. Write each option as value|Label — for example pricing|Pricing — where the part before the | is the value sent to the server and the part after it is the text the reader sees. If you write just one word, it is used as both.
Why does each field need a name?
The name is the key the data is sent under. When a reader submits the form, the server receives pairs like name=Jane Smith and email=jane@example.com. Without a name, a field’s data is not sent at all. The tool fills in a sensible name from the label automatically, and you can change it.
Can I style the form?
The tool generates plain, unstyled HTML — no CSS is included. That is deliberate: the markup is clean and you style it with your own stylesheet.
Conclusion
A form is a conversation with your reader, and a good one asks only what it needs, labels everything clearly, and checks the answers before sending. The HTML Form Generator above builds exactly that kind of form in minutes, with labels, validation and semantic markup done right. Try it with the contact form it loads with, then use the HTML Button Generator to style the submit button to match your site.