An enquiry form is the last step between interest and a conversation, and it’s often where interested people give up. Good web form design is rarely about how the fields look. It’s about how many questions you ask, how clearly you ask them, how you keep spam out without blocking people, and whether each submission actually reaches someone.
That last point is easy to miss: a form can pass every launch-day test, then quietly stop delivering after a plugin update while still showing a friendly “Thank you”.
Forms are one lever in conversion rate optimisation. This guide takes the decisions in the order you’d make them; detailed accessibility rules are in how to design accessible forms.
Web form design: the short answer
Most contact form best practices come down to seven rules:
- Ask only what your first reply needs. Sort fields into must-have, useful and later.
- Use one column with visible labels, and mark optional fields clearly.
- Use the right input types and autocomplete so phones show the right keyboard.
- Split long qualification forms into steps, with a progress indicator.
- Reassure next to the button: when you’ll reply, and what you’ll do with their details.
- Stop spam quietly with honeypots and server-side checks before resorting to puzzles.
- Confirm and deliver: set expectations after sending, and keep a backup of every entry.
Choose enquiry form fields by what the first reply needs
Every field costs the visitor a decision, some typing and sometimes a doubt about why you want to know. Long, demanding forms are a common cause of form abandonment.
Sort every field into must-have, useful and later
| Field | Group | Why |
|---|---|---|
| Name and email | Must-have | You need to address and send the reply |
| What they need (message or service choice) | Must-have | It shapes the whole reply |
| Company name | Useful | Easy to answer, helps you prepare |
| Budget or timeline, as ranges | Useful | Qualifies the lead without a blank box |
| Phone, when email is required | Useful, optional | Some people prefer a call |
| Job title, company size, address | Later | Ask in the first conversation |
| “How did you hear about us?” | Later | Analytics covers much of it; ask in person for the rest |
The test for every field. Would your first reply be different without this answer? If not, it belongs in the conversation, not the form.
When extra questions earn their place
Fewer fields isn’t automatically better. If your team spends hours on enquiries that were never a fit, one or two qualifying questions save everyone time, the visitor included.
Make them easy: “Rough budget (optional)” with four ranges is far easier to answer than an empty box asking for a figure. Then judge the change by qualified enquiries, not just the form conversion rate. Website lead generation covers how qualification fits alongside offers, contact channels and follow-up.
Layout: one column, visible labels, a clear finish
Keep it to a single column
One column gives the eye one path from top to bottom. Side-by-side fields invite people to zigzag and miss one, which is why Nielsen Norman Group’s form usability recommendations favour a single column. The sensible exception is a short, tightly linked pair, such as a postcode beside a city.
Put labels above fields and keep them visible
Placeholder text vanishes as soon as someone types, leaving them to remember the question, and it’s often too pale to read. Give every field a short visible label above it, and use placeholders, if at all, for an example format.
When most fields are required, adding “(optional)” to the few that aren’t is clearer than a row of asterisks people have to decode. The GOV.UK Design System recommends exactly this and advises against asterisks. Whatever you choose, apply it the same way on every form.
Write a button label that says what happens
“Submit” describes the mechanics. “Send enquiry”, “Request a quote” or “Book a call” describes the outcome. Make the button full width on phones, and don’t disable it until the form is valid: a greyed-out button leaves people guessing. Let them press it and show clear errors instead. Call to action best practices goes further on wording.
Input types and autocomplete: details phones notice
On a phone, where many enquiries start, typing is the hard part. Two HTML attributes do a lot of the work: type, which decides which keyboard appears, and autocomplete, which lets the browser offer details the visitor has saved. Autocomplete is also the usual way to meet WCAG success criterion 1.3.5, Identify Input Purpose.
| Field | Control | Autocomplete | Result |
|---|---|---|---|
| Full name | text |
name |
Saved name in one tap |
email |
email |
Keyboard with @, basic format check | |
| Phone | tel |
tel |
Number pad |
| Company | text |
organization |
Saved company name |
| Postcode | text |
postal-code |
Accepts letters and spaces |
| Message | textarea |
None | Room for a few lines |
Four rules prevent the common mistakes:
- Don’t use
type="number"for phone numbers or postcodes. It’s meant for quantities, can add spinner arrows, and treats a phone number with spaces or a plus sign as invalid. Usetype="tel"for phones andinputmode="numeric"on a text field for numeric codes. - Accept international formats. Don’t force one phone pattern or demand a postcode some customers don’t have. A single “Full name” field copes with names that don’t split neatly into first and last, as the W3C’s guidance on personal names around the world explains.
- Translate everything in each language version: labels, help text, errors, the button and the confirmation page.
- Validate helpfully. Check a field when the visitor leaves it or presses the button, not on every keystroke. Put the error beside the field, say how to fix it, and never clear what they’ve typed.
Multi-step forms: when a longer form is worth it
Multi-step forms split questions across a few short screens. They suit quote requests and qualification forms that need more than a handful of questions, especially when answers branch: a redesign enquiry needs different follow-up questions from a landing page one. For a three-field contact form, steps only add clicks.
How to make a multi-step form work
- Open with the easiest, most relevant question, usually what they need, as tappable choices. Contact details come last, once people have invested a little effort.
- Show progress with named steps, such as “Step 2 of 3: Your project”.
- Keep each step to one phone screen, and validate it before moving on.
- Make Back work without losing answers.
- Branch rather than pile on, showing only the questions that apply, and test every branch in every language.
One caution: some form tools save what people typed on steps they never sent. Following up on those details can conflict with data protection rules and your privacy notice; use partial data, if at all, only to see which step loses people.
Form microcopy that removes doubt
Form microcopy is the small text around the fields: help text, the line under the button, error messages. Its job is to answer the questions that make people hesitate.
| The hesitation | Microcopy that answers it |
|---|---|
| “When will I hear back?” | “We reply within one business day.” |
| “Will they spam me?” | “We’ll only use your details to reply to this enquiry.” Plus a privacy policy link |
| “Why do they want my phone number?” | “Optional. Add it if you’d prefer a call.” |
| “I don’t know my budget yet.” | “A rough range is fine. It helps us suggest the right option.” |
Only promise what your team will deliver: a response time you regularly miss does more harm than none.
If you want to add people to a mailing list, ask with a separate, unticked checkbox. Under the GDPR, for example, silence or a pre-ticked box doesn’t count as consent. Check the rules where your customers are; this is general guidance, not legal advice.
Beside the form, offer a phone number or messaging app link for people who would rather talk.
Spam protection that doesn’t punish real people
Every public form attracts spam, but the heaviest fix makes every genuine visitor pay. Image and audio CAPTCHAs are a known barrier for disabled users, as the W3C note Inaccessibility of CAPTCHA explains. Work through the lighter layers first.
Layer the quiet defences
- A honeypot field that real people never see and many bots fill in. Hide it from view, keyboards and screen readers, and turn autofill off for it, so a browser doesn’t fill it by accident and flag a real enquiry.
- Server-side checks. Bots can post straight to your form and skip everything in the browser, so validate on the server too: required fields, a plausible email, a minimum time between page load and submission, and limits on repeat submissions.
- A spam-filtering service, such as Akismet, which checks submissions against patterns seen across many other sites.
- An invisible or score-based challenge, such as Cloudflare Turnstile or Google reCAPTCHA v3, which usually asks nobody to solve anything. These load third-party scripts, so weigh the speed and privacy cost.
- A visible puzzle, last, and only on the form under attack.
Every filter gets it wrong sometimes, so keep blocked entries where you can review them. A filter that silently discards one genuine quote request a month is an expensive filter.
Confirmation pages that set expectations
After someone presses Send, they need to know it worked and what happens next. A dedicated confirmation page, kept out of search results, does this better than a one-line message. Use it to:
- Confirm the enquiry arrived, in plain words.
- Say when they’ll hear back, from whom and how.
- Suggest what to have ready, such as links or a brief.
- Offer something useful while they wait, and a direct contact for anything urgent.
An automatic email reply can reinforce this, but keep it generic rather than repeating what the visitor typed. Otherwise spammers can enter someone else’s address, put their own content in the message or name field, and use your form to send spam.
The success state is also what analytics should count: record an enquiry when the form reaches it, not when the button is clicked. Our guide to tracking website enquiries in GA4 shows how.
Make sure every submission reaches a person
Nobody complains when a form fails silently. The prospect simply goes elsewhere.
Where enquiries get lost
- Unauthenticated website email. By default, WordPress hands its email to the hosting server’s own mail function, which often isn’t authenticated for your domain, so receiving services may file it as spam or reject it. Send notifications through an authenticated SMTP or transactional email service, with SPF, DKIM and DMARC set up for your domain.
- One person’s inbox. Holidays and departures swallow leads. Route enquiries to a shared inbox or your CRM.
- Integrations that fail quietly. A CRM connection can break when an API key expires or a field is renamed. Decide what happens when the other system is down; website integrations explained walks through the options.
- No backup copy. Store every entry on the website too, so an enquiry survives a failed email or integration.
Test it like a customer
Our website maintenance checklist puts these checks alongside updates and backups.
What to do next
Fill in your own enquiry form on your phone, as a customer would. Count the fields you could cut, note any that fight the keyboard, read the words around the button, then check whether the test reaches your inbox, and how quickly.
Forms sit where strategy, UX, copy, development and tracking meet, so fixing one properly touches all five. When we design and build websites, enquiry forms are planned around what the first reply needs. For an outside view first, ask for a free website audit, which includes how easily visitors can get in touch.