Forms are where interest becomes action: the enquiry, the quote request, the sign-up, the checkout. They're also where many visitors give up. Small details, such as an unclear label, an unnecessary field or an error that wipes everything someone typed, quietly cost businesses leads every day. These best practices apply to almost any form, and most can be fixed in an afternoon.
1. Ask for less
Every field is a small cost to the visitor. Before adding one, ask: will we use this answer at this stage?
| Field | Keep it? |
|---|---|
| Name | Usually yes |
| Yes, if you'll reply by email | |
| Phone | Only if you'll call, and make it optional if possible |
| Company size, budget, timeline | Only if they genuinely change how you respond |
| "How did you hear about us?" | Optional, or collect later |
| Address | Only when you need to deliver something |
If you need lots of information, consider a multi-step form that starts with easy questions.
2. Use clear, visible labels
- Put labels above fields, not inside them as placeholders
- Use plain words: "Your email" rather than "Contact identifier"
- Mark optional fields as "(optional)" instead of marking required ones with asterisks
- Add short hints where people might hesitate, such as the format of a phone number
3. One column, logical order
Single-column forms are faster to complete and easier on phones. Group related fields and follow the order people expect: name, then contact details, then the question.
4. Make errors helpful
| Bad | Better |
|---|---|
| "Invalid input" | "Enter an email address, like name@example.com" |
| Errors only at the top of the page | Error next to the field, plus a summary for long forms |
| Form cleared after an error | Everything typed is kept |
| Validation while typing the first character | Validation when leaving the field or submitting |
5. Design for mobile
- Use the right input types so phones show the right keyboard:
email,tel,number - Add
autocompleteattributes so browsers can fill names, emails and addresses - Make inputs and buttons large enough to tap
- Avoid dropdowns for short lists; radio buttons are quicker on phones
Our mobile-first design guide covers the wider principles.
6. Make the button say what happens
"Submit" tells nobody anything. "Get my free quote", "Book my call" or "Send message" sets expectations and feels like progress.
7. Reassure at the right moment
- A short line on what happens next: "We'll reply within one working day"
- A privacy note near the email field: "We'll never share your details"
- Trust signals such as reviews near high-commitment forms
8. Make forms accessible
- Every field has a programmatic label
- Errors are announced to screen readers, not just shown in red
- The form works fully with a keyboard
- Don't rely on colour alone to show errors or required fields
- Don't ask people to re-enter information they've already given (WCAG 2.2's redundant entry criterion)
- Avoid puzzle-style CAPTCHAs; use invisible bot protection where possible
See our WCAG 2.2 accessibility checklist for the full list.
9. Confirm clearly
After submitting, show a clear confirmation that says what happens next, and send a confirmation email. A page that just reloads leaves people unsure whether it worked.
10. Measure and test
- Track form starts, completions and abandonment by field if your tools allow
- Watch session recordings to see where people hesitate
- Test one change at a time, such as removing a field or changing the button text
A quick form audit
- Every field is necessary at this stage
- Labels are visible above each field
- Single column on mobile
- Correct input types and autocomplete
- Helpful, inline errors that keep entered data
- Specific button text
- Clear confirmation and follow-up email
- Keyboard and screen reader friendly
Form patterns by purpose
| Form | Essential fields | Good practice |
|---|---|---|
| Contact | Name, email, message | Say when you'll reply |
| Quote request | Name, email, service, short description | Ask one or two qualifying questions, not ten |
| Newsletter | State what they'll get and how often | |
| Account sign-up | Email, password | Allow social or passwordless sign-in where suitable |
| Booking | Service, date and time, contact details | Show availability before asking for details |
| Checkout | Delivery and payment details | Guest checkout, address lookup, express payments |
Before and after: rewriting a quote form
Before: nine fields including company size, budget dropdown, address, "How did you hear about us?", a required phone number, a CAPTCHA puzzle and a "Submit" button.
After:
- Name
- What do you need help with? (short options)
- Tell us a little about your project (optional)
- Button: "Get my free quote"
- Line underneath: "We'll reply within one working day. No spam, ever."
The shorter form removes questions that can be asked on the first call, swaps the puzzle for invisible spam protection and tells people exactly what happens next.
How we can help
Forms are a core part of our usability testing and checkout optimisation work, because small changes there often have the biggest effect on conversions.
The short version
Ask only for what you need, use visible labels, keep one column, write helpful errors that keep people's data, design for phones, make the button specific, reassure people, make forms accessible and confirm clearly. Then measure and test.
