Form error messages that help visitors finish

Key takeaways

Good form error messages say what went wrong and how to fix it, in plain words, beside the field with the problem. Vague messages such as 'Invalid input', errors shown only in red, forms that clear everything on error and messages that appear only at the top lose enquiries from people who had already decided to contact you.

• Say how to fix it: 'Enter a phone number, like 07700 900123'.
• Show the error next to the field and summarise at the top.
• Never rely on red colour alone; add text and an icon.
• Keep what the visitor typed when an error appears.

Why do error messages matter?

A visitor who reaches an error has already decided to get in touch. A confusing message at that moment loses an almost-certain enquiry. Nielsen Norman Group's guidelines for reporting form errors stress making them visible, specific and constructive.

• The most common business website design mistakes
• Contact form abandonment: how to spot and fix it

What makes a good error message?

The GOV.UK Design System's error message guidance is a good model: be clear and concise, say what happened and how to fix it, and use the same words as the field label.

• Bad: 'Invalid input'. Good: 'Enter your email address in the correct format, like name@example.com'.
• Bad: 'Error'. Good: 'Enter your postcode'.
• Bad: 'Phone number not valid'. Good: 'Enter a UK phone number, like 07700 900123'.

Where should error messages appear?

Show each message directly above or below its field, and on longer forms add a summary at the top with links to each problem field. WCAG's Error Identification criterion requires that errors are identified and described to the user in text.

What error message mistakes should you avoid?

Avoid the common faults below. Each is easy to fix and each loses enquiries.

• Showing errors only by turning the field border red.
• Clearing every field when one has an error.
• Rejecting valid formats, such as phone numbers with spaces.
• Showing errors while the visitor is still typing.
• Blaming the user: 'You entered an invalid value'.
• Technical messages from the server.

• Choosing a website colour scheme: mistakes to avoid

When should validation happen?

Check a field when the visitor leaves it or when they submit, not on every keystroke. Accept common variations rather than forcing one format: spaces in phone numbers and postcodes, upper or lower case. The fewer rules, the fewer errors.

• Mobile form design: forms people finish on a phone

What about the confirmation message?

Success matters as much as errors. After sending, show a clear confirmation that the enquiry has been received and what happens next, ideally on a thank-you page. A form that simply clears with no message leaves visitors unsure and some send it twice or give up.

• The thank-you page: the most ignored page on your site

What does this look like in practice?

A pattern we see: a form rejects phone numbers with spaces and shows only a red border, so visitors cannot tell what is wrong. Accepting spaces and adding a short text message beside the field removes the problem entirely.

• See client work
• Website Design & Development for UK businesses
• Form labels vs placeholder text: which should you use?

Error message checklist

• Write messages that say how to fix the problem.
• Show errors beside the field.
• Add a summary on longer forms.
• Use text and an icon, not just colour.
• Keep entered data on error.
• Accept common formats.
• Confirm success clearly.

Next step

Submit your contact form with a deliberate mistake on a phone and read the error message as a customer would.