Quick answer: Good form error messages tell people exactly what went wrong and how to fix it, in plain language, right next to the field that needs attention. Validate at sensible moments (usually when someone leaves a field, not while they type), keep everything they entered, summarise errors at the top for long forms, and mark errors in ways that do not rely on colour alone. Make errors accessible with proper labels, aria-invalid and aria-describedby so screen reader users hear the same help.
Forms are where websites make money: contact forms, checkouts, quote requests, sign ups. They are also where many visitors give up. Some of that is unavoidable, but a lot happens because someone made a small mistake and the form did a poor job of helping them recover. Error messages are a small piece of copy with a large effect on conversions.
What a bad error experience looks like
Most people have met forms like this:
- You click submit, the page reloads, and a red banner says “There were errors in your submission.” It does not say which.
- Your password is rejected with “Invalid password” but the rules were never shown.
- You entered a phone number with spaces, and the form refuses it without explanation.
- After an error, half the fields you filled in are empty again.
- Errors appear in red text only, which some users cannot distinguish.
Each of these turns a small slip into frustration, and frustration into abandonment.
Principles of helpful error messages
Say what is wrong, specifically
“Invalid input” tells the user nothing. “Enter your email address in the format [email protected]” tells them exactly what to do.
Say how to fix it
Every message should point to a fix. Compare:
- “Date is invalid” vs “Enter the date as DD/MM/YYYY, for example 21/08/2016”
- “Password error” vs “Your password needs at least 8 characters, including a number”
- “Card declined” vs “Your bank declined this card. Check the details or try another card”
Use plain, polite language
Avoid technical terms (“Field validation failed: regex mismatch”) and avoid blaming the user (“You entered an illegal value”). Write as a helpful person would speak. Avoid humour in error messages. It rarely lands well when someone is already annoyed.
Keep it short
One sentence is usually enough. People scan errors, they do not read paragraphs.
Prevent errors before they happen
The best error message is one that never needs to appear.
- Show requirements up front. Put password rules, format hints and character limits next to the field before the user types.
- Accept flexible input. Allow spaces and dashes in phone and card numbers, and strip them yourself. Accept postcodes in lower or upper case.
- Use the right input types. HTML5 types such as email, tel and number bring up the right keyboard on phones, which reduces typos. See our article on mobile conversion rate for more mobile form tips.
- Ask for less. Every field you remove is one fewer chance for an error.
- Use sensible defaults and selection controls where they make input easier, such as a date picker or a country list with the most common option preselected.
- Label optional fields clearly, or better, remove them.
When to validate
Inline validation
Inline validation checks fields as the user completes them and shows feedback straight away. Done well, it catches mistakes while the field is still fresh in the user’s mind.
The timing matters:
- Validate when the user leaves a field (on blur), not on every keystroke. Showing “invalid email” after someone has typed one letter is irritating.
- Remove the error as soon as it is fixed, so people know they have succeeded.
- Show positive confirmation sparingly, for example a tick next to a username that is available.
On submit
Always validate on the server as well, because browser checks can be bypassed and some errors, such as “this email is already registered”, can only be found there. When server side validation fails, return the user to the form with every field still filled in and errors shown in context.
HTML5 constraint validation
Modern browsers support attributes such as required, type=”email”, pattern, min and max, and will block submission with a built in message. These are a useful safety net, but the default browser messages vary, cannot be fully styled and are sometimes vague. Many sites use the HTML5 Constraint Validation API with their own messages and styling for a consistent experience.
Where and how to show errors
Next to the field
Place the message directly below or beside the field it relates to, so the connection is obvious. Highlight the field itself with a border or background change.
Don’t rely on colour alone
Red text is a common convention, but some people cannot distinguish red and green, and colour carries no meaning for screen reader users. Add an icon, the word “Error”, or a clear text message alongside colour.
A summary for long forms
On long forms, show a short summary at the top after submission: “Please fix 2 problems below”, with each item linking to the relevant field. Move keyboard focus to the summary so screen reader and keyboard users know something happened.
Keep the user’s data
Never clear fields that were valid. Clearing a long form because of one error is one of the quickest ways to lose a customer. For security, you may clear password and card security code fields, but say so.
Accessibility for error messages
WCAG 2.0 includes specific guidance on errors: identify the error in text, describe it, and suggest a fix where possible. In practice:
- Every field needs a real label element linked to the input.
- Mark fields in error with
aria-invalid="true". - Connect the message to the field with
aria-describedby, so screen readers read the message when the field is focused. - Use an ARIA live region or move focus to the error summary after submission so the change is announced.
- Make sure error text meets contrast requirements.
These steps cost little and help all users, not only those using assistive technology.
Writing examples
- Missing name. Weak: “Required”. Better: “Enter your name”.
- Email format. Weak: “Invalid email”. Better: “Enter an email address like [email protected]”.
- Phone too short. Weak: “Error”. Better: “Enter a phone number with at least 10 digits”.
- Postcode not found. Weak: “Invalid postcode”. Better: “We couldn’t find that postcode. Check it or enter your address manually”.
- Email already registered. Weak: “Duplicate user”. Better: “This email already has an account. Log in or reset your password”.
Measure where people struggle
You cannot fix what you do not see. Track form errors and abandonment:
- Send an event to Google Analytics when a validation error is shown, with the field name as the label. Our guide to form tracking shows how to set this up with Google Tag Manager.
- Use form analytics in a tool such as Hotjar to see which fields cause hesitation and drop off.
- Watch session recordings for repeated attempts on the same field.
If one field produces most of the errors, look at its label, hint text and validation rules first.
Quick checklist
- Requirements shown before input
- Flexible input accepted where possible
- Validation on blur, not on every keystroke
- Server side validation as well
- Specific, polite messages with a fix
- Messages placed next to fields
- Errors not shown by colour alone
- Valid data kept after errors
- Summary with links for long forms
- aria-invalid and aria-describedby used
- Errors tracked in analytics
FAQ
Should I use the browser’s built in validation messages?
They are a useful fallback, but custom messages give clearer wording and consistent styling.
Is inline validation always better?
It helps for format and requirement errors. Validate on blur rather than while typing, and keep server side checks for everything.
Where should error messages go on mobile?
Directly below the field, so they stay visible when the keyboard is open.
How do I add better errors to WordPress forms?
Most form plugins let you customise messages. See our guide to WordPress forms for options.
Help people finish what they started
Good error messages turn a moment of frustration into a quick fix. Review your most important forms, rewrite the messages and test them on a phone. If you want help improving forms and conversion across your site, see how we help businesses turn visitors into customers.
