A useful contact form asks for enough information to route and answer the request without turning the first interaction into an interview. Start with the outcome, then justify every field.
Start with the reply you need to send
List the decisions the recipient must make after reading the enquiry. A general contact form commonly needs a reply address, a short topic and a message. Remove fields that do not change routing or the response.
Match each question to a native control
Use email for an email address, tel for a phone number, textarea for a longer message, select for a short fixed list and radio buttons when every option should remain visible. Native controls give browsers and assistive technology useful semantics.
<label for="reply-email">Email address</label>
<input id="reply-email" name="email" type="email" autocomplete="email" required>
<label for="request">How can we help?</label>
<textarea id="request" name="message" required></textarea>Separate required from optional information
Require only what is essential to complete the stated task. Mark optional fields in visible text, explain unusual formats before submission and avoid collecting sensitive information through a general enquiry form.
Review the finished form as a visitor
Read the labels without the surrounding design and check whether each purpose is still clear. Then complete the form on a phone and with a keyboard.
- Remove duplicate questions.
- Confirm every visible label matches one control.
- Check that the chosen destination can use every collected value.
- Document why any sensitive or unusual field is necessary.
Frequently asked questions
How many fields should a contact form have?
There is no universal number. Use the fewest fields that let the recipient understand, route and answer the request.
Should a phone number be required?
Only when a phone response is necessary for the stated service. Otherwise, make it optional or leave it out.
Is placeholder text enough for a field name?
No. Use a persistent visible label; placeholder text can disappear and is not a reliable replacement.
Primary sources
Turn the guide into a working form
Start from a template, change the fields and take the code with you.
Open the free builder