Forms that work: labels, errors and what sites get wrong
A form is where a visitor becomes a lead, and where sites lose them. Ten rules that make forms usable by everyone, and how to test yours.
The short answer
A form is the moment a visitor decides to become a lead, a customer or a booking, and it is where websites quietly lose them. The reasons are rarely exotic: labels that vanish, fields nobody can identify, errors that do not say how to fix themselves, a submit button that does nothing on a phone. Ten rules make a form usable by everyone, including people using a keyboard or a screen reader, and they cost nothing extra to build in. Test with one thumb on a phone, then with the keyboard only; a form that has not been tested that way fails one of the two within a minute.
The ten rules
| Rule | Why |
|---|---|
| 1. Every field has a visible label, always | Placeholder text disappears when typing starts and fails contrast; screen readers need the label |
| 2. One column, top to bottom | Eye and thumb follow one path; multi-column forms are skipped and misread |
| 3. As few fields as the purpose needs | Every field costs completions and is data to protect |
| 4. The right input type per field | Phone shows a number pad for phone; email shows the @ key; dates get a picker |
| 5. Required fields marked clearly, or mark the optional ones if most are required | Guessing produces errors after submit |
| 6. Errors shown next to the field, not only at the top | The person is looking at the field |
| 7. Error text says how to fix it, with an example | ”Invalid” helps nobody |
| 8. Focus moves to the first error on submit, and errors are announced | Keyboard and screen reader users otherwise never find them |
| 9. A clear success state that says what happens next | Silence after submit produces duplicates and doubt |
| 10. Fully operable by keyboard, with visible focus | A legal requirement and a real audience |
The mistakes behind an abandoned form
- Placeholders as labels. The visitor types, the hint vanishes, they forget which field they are in.
- Validation that fights the user: an error appears while they are still typing, or the field clears itself.
- Errors at the top only, in a colour some users cannot distinguish, with no link to the field.
- The wrong keyboard on mobile because the input type is generic.
- A submit button disabled until the form is perfect, with no explanation of what is missing.
- Silence after submit: no message, or a message that disappears before it is read.
- A puzzle challenge that costs more real visitors than bots.
Testing yours in three minutes
On a phone, with one thumb: can you identify every field after starting to type, does the right keyboard appear, can you find and fix an error, do you know what happened after submit? Then on a desktop with the keyboard only: Tab through every field in order, submit with an error, and see whether focus lands on it and the message is readable. Then submit correctly and confirm the message arrived where it should. If any step fails, that is where leads are leaving.
What this means for you
Forms are where your site’s traffic becomes business, and the ten rules above are the difference between a form that converts and one that leaks. None of them costs extra to build; all of them are missed by default in templates and page builders. Test yours with a thumb and a keyboard this week, fix what fails, and watch the completed submissions rather than the visits.
Frequently asked questions
Is a shorter form always better?
Fewer fields complete more often, and each field is also personal data to protect. Ask for what you need to respond and nothing more. A follow-up conversation can gather the rest. The exceptions are forms where a longer form qualifies the enquiry deliberately, and even then each field should earn its place.
Why do our form's error messages not help?
Usually because they say what is wrong rather than how to fix it, appear far from the field, or vanish on the next keystroke. "Invalid input" at the top of the form fails all three. "Enter a phone number with your country code, for example +31" next to the field, staying until fixed, with focus moved to it, is the pattern.
Do these rules apply to a simple contact form?
Especially there, because it is the form most visitors meet. Three fields, visible labels, clear errors, a success message that says what happens next, working with keyboard and screen reader. It takes no longer to build correctly than incorrectly.
Sources
- MDN: Web forms, working with user data (accessed 2026-09-11)
- W3C WAI: Forms tutorial (accessed 2026-09-11)