Why this matters
Forms are where enquiries, sign-ups, and sales happen. Poor form design kills conversions: people abandon forms that are confusing, long, or frustrating.
Good form design makes it easy to complete forms without making people work too hard. This guide covers the essentials.
1) Ask only for what you need
Every extra field increases abandonment. Ask only for essential information upfront.
Essential fields
- Contact forms: Name, email, brief message. That is usually enough to start a conversation.
- Quote requests: Name, email, service needed, location, brief description.
- Newsletter sign-ups: Email. Optional: name if you personalise emails.
- Enquiries: Name, email, phone (if you call), message.
What to avoid
- Asking for company, job title, or other details you do not need upfront.
- Required fields that are not actually required.
- Long forms with 10+ fields when 3-5 would do.
- Asking for the same information twice.
You can ask for more information later, after the initial contact is made.
2) Clear labels and help text
People need to know what to enter in each field. Unclear labels cause confusion and errors.
What to include
- Descriptive labels: "Email address" not "Email", "Phone number" not "Phone".
- Help text where needed: "Include area code" or "We'll only use this to respond to your enquiry".
- Format hints: "DD/MM/YYYY" for dates, "(optional)" for optional fields.
- Required indicators: Mark required fields clearly (asterisk, "required", or both).
What to avoid
- Vague labels: "Details" or "Information" do not help.
- Placeholder text as the only label (placeholders disappear when typing).
- Technical jargon without explanation.
For accessibility, labels must be properly associated with inputs Source 1 .
3) Helpful error messages
When people make mistakes, error messages should help them fix the problem, not just say "error".
What to include
- Specific errors: "Please enter a valid email address" not "Invalid input".
- Field-level errors: Show errors next to the relevant field, not at the top of the form.
- Clear instructions: "Password must be at least 8 characters" not "Password too short".
- Positive tone: "Please check your email address" not "Email is wrong".
What to avoid
- Generic errors: "Error" or "Invalid input" do not help.
- Errors only at form submission: Show errors as people type or when they leave a field.
- Harsh language: "Wrong" or "Incorrect" feels accusatory.
For accessibility, error messages must be announced to screen readers and associated with the relevant field Source 2 Source 3 .
4) Logical field order
Order fields in a way that makes sense to users.
- Start with easy fields: Name, email first. Harder fields (message, details) later.
- Group related fields: Contact details together, message/details together.
- End with action: Submit button at the end, after all fields.
- Progress indicators: For long forms, show "Step 1 of 3" so people know how far they are.
5) Mobile-friendly design
Most form submissions happen on mobile. Forms must work well on small screens.
- Large tap targets: Buttons and fields at least 44px tall.
- Correct keyboard types: Email keyboard for email fields, number keyboard for phone fields.
- No cramped fields: Plenty of space between fields.
- Readable labels: Text size and contrast that work on small screens.
- No horizontal scrolling: Forms should fit the screen width.
6) Trust and reassurance
People need to trust you before they submit personal information.
- Privacy statement: "We'll only use this to respond to your enquiry" or link to privacy policy.
- Security indicators: HTTPS, secure badges if relevant.
- Clear business identity: Who you are, how to contact you if something goes wrong.
- What happens next: "We'll respond within 24 hours" sets expectations.
7) Confirmation and feedback
After submission, people need to know it worked.
- Clear confirmation: "Thank you! We've received your enquiry and will respond within 24 hours."
- Email confirmation: Send an email confirming receipt (optional but helpful).
- No silent failures: If submission fails, show a clear error message and let people try again.
- Next steps: What happens next? When will they hear back?
For more on email deliverability, see email deliverability and form submissions.
Common form mistakes
- Too many fields: Asking for more than you need increases abandonment.
- Unclear labels: People do not know what to enter.
- Poor error messages: "Invalid input" does not help people fix mistakes.
- No confirmation: People wonder if submission worked.
- Forms that fail silently: Submissions do not work, and you never know.
- Inaccessible forms: Do not work with screen readers or keyboard navigation.
Testing forms
Test your forms before launch:
- Test on mobile: Fill out the form on a real phone.
- Test with keyboard: Navigate and submit using only keyboard.
- Test with screen reader: Ensure labels and errors are announced.
- Test error handling: Submit invalid data and check error messages.
- Test submission: Actually submit the form and verify it works.
For more on testing, see user testing basics for small sites.
Summary
Forms that get completed have: only essential fields, clear labels and help text, helpful error messages, logical field order, mobile-friendly design, trust and reassurance, and clear confirmation after submission.
Avoid: too many fields, unclear labels, poor error messages, no confirmation, silent failures, inaccessible forms.
If you need help improving form design, see form usability expertise or website build services. For more on email deliverability, see email deliverability and form submissions. You can also get in touch to discuss your forms.
Sources
- [1] W3C. Web Content Accessibility Guidelines (WCAG) 2.2. Back to article
- [2] W3C. WCAG 2.2, Guideline 3.3 Input Assistance. Back to article
- [3] GOV.UK Design System. Error message component. Back to article