How to use the HTML Form Builder
- 1. Add your fieldsChoose a label and type for each field, tick Required, and add options for drop-downs.
- 2. Set the formEnter the form's action URL, the method and the button text.
- 3. Copy the codePress Get form code for HTML and CSS ready to paste.
What makes a good form
- Every field has a label. The builder links each label to its input with for and id, so clicking the label focuses the field and screen readers read it.
- Right input types. type="email" and type="tel" bring up the right keyboard on phones and add basic checks. Autocomplete hints help browsers fill them in.
- Grouped choices. Radio buttons and multiple checkboxes are wrapped in a fieldset with a legend.
- Clear required fields. Required fields get the required attribute and a * in the label.
Field names are made from labels automatically: "Full name" becomes full_name, and duplicates get _2, _3.
Worked example
The sample is an enquiry form with 5 fields, 3 of them required: Full name (text), Email, Phone, Course (a drop-down with Python, Data Analytics and Full Stack), and Message (textarea). The Course field becomes:
<label for="f_course">Course *</label>
<select id="f_course" name="course" required>
<option value="">Choose…</option>
<option>Python</option> …The empty first option means "required" really forces a choice. Remember that browser checks are only for convenience. Your server must still check every value, because anyone can send data straight to your form's URL. Keep forms short, too: every extra field lowers the number of people who finish. Ask only for what you need now, and collect the rest later.
Frequently asked questions
Where does the form send data?
To the action URL you set, using GET or POST. You need a server script or a form service at that address to receive it.
Can I add file uploads?
Not in this builder yet. Add by hand and set enctype="multipart/form-data" on the form.
Is the preview interactive?
Yes, you can type in it. The submit button does nothing in the preview.
Is it free?
Yes, completely free. The first time you get the code we ask for your name and WhatsApp number, once for all Uncodemy tools.