Contact form design: the fields to ask for and what happens after send
A contact form should ask only for what you need to reply well, tell people what will happen next, and confirm clearly that the message arrived. Most of the craft is in those three moments: the fields, the words around them and the screen after send.
Which fields to ask for
Good contact form design starts with restraint, because every field is a small cost to the visitor. The usual contact form fields are name, email and message, and for many sites that's all you need. Add a field only when the answer changes how you reply.
| Field | Ask for it when | Input details |
|---|---|---|
| Name | Almost always | One field, not first and last; autocomplete="name" |
| You'll reply by email | type="email", autocomplete="email" | |
| Phone | You'll actually call, or it's urgent work like repairs | Optional unless essential; type="tel" |
| Topic or service | Enquiries go to different people or need different answers | A short select or radio group, with “Something else” |
| Date or budget | You quote or book and need it to reply usefully | Optional, with ranges rather than exact figures for budget |
| Message | Always | A textarea at least four lines tall, with a sensible character limit |
| How did you hear about us | Rarely; ask after the first conversation instead |
What to say next to the form
- When you'll reply. “We answer within one working day” sets expectations and cuts follow-up emails.
- Who's replying. A name and a face, even a small one, makes a form feel less like a void.
- Other ways to reach you. Phone, email and address beside the form. Some people won't use forms at all, and that's fine.
- What to include. A hint above the message field (“Your address and a photo of the problem help us quote”) gets better first messages.
- How the data is used. A link to the Privacy Policy and one line saying the details are used only to reply.
Layout and field design
Keep the form in one column so the eye moves straight down. Put a visible label above each field; placeholders disappear as soon as someone types, so they can't be the label. Inputs should be at least 44px tall with text at 16px or more (smaller text makes iOS zoom in on focus). Mark optional fields as “(optional)” rather than starring the required ones, since most should be required anyway. The send button sits at the end, aligned with the fields, and says what it does: “Send message” or “Ask for a quote”. For the wider set of rules, see web form design best practices.
After pressing send
- Confirm on screen, in plain words. “Thanks, Sam. Your message has reached us. We'll reply by tomorrow evening.” Not just a green tick.
- Keep what they wrote if something goes wrong, and say which field needs fixing and how.
- Send a confirmation email if you can, with a copy of their message, so they know it went through and have a record.
- Reply when you said you would. The best contact us form design can't rescue a message that sits unanswered for a week.
Accessibility checklist
- Every field has a programmatically associated label, not only placeholder text.
- Error messages are in text, next to the field, and linked to it, not shown by a red border alone.
- Focus is visible on every field and on the button.
- The confirmation message is announced to screen readers, or the page moves focus to it.
- Autocomplete attributes are set so browsers can fill name, email and phone.
Contact forms in Anticode
A contact form is one of Anticode's must-haves. The built-in one asks for name, email and a message; if you need extra fields such as topic or budget, use a custom form tied to a site function (up to 30 plain-text fields, with its own heading and message on the thank-you page) or an app build. Its fields are labelled, and before a page can be published Sentinel checks that every field has a label, that text fields are typed and length-capped, that the form posts to the site's own address and that the Content-Security-Policy stops it posting anywhere else. The full list is in the security checklist.
Submissions are saved to your project, sealed at rest with AES-256-GCM, and can be emailed to you. You can also send them on through a connector to Slack, Discord, Telegram, Google Sheets, Airtable, Notion, HubSpot or any webhook. A site that collects form data can't be published until the account owner and the person publishing have two-factor sign-in turned on.
Questions people ask
What fields should a contact form have?
Name, email and message cover most sites. Add phone, topic, date or budget only when the answer changes how you reply.
Is a contact form better than an email address?
Offer both. A form can ask the right questions and keeps your address away from some scrapers; an email link suits people who prefer their own inbox.
Should a contact form ask for a phone number?
Only if you'll call. Make it optional unless the work needs it, such as urgent repairs, and say why you're asking.