Overview
Errors are inevitable, but frustration doesn’t have to be. The way you design error messages in forms determines whether users feel supported or defeated. A poorly written or misplaced message can cause confusion, break trust, and lead to abandonment.
Good error messages do more than signal a problem. They explain what went wrong, how to fix it, and do so in a respectful and inclusive tone. Done right, error messages become a natural extension of form usability and accessibility.
Best practices
Guidelines for writing and placing error messages in forms.
Write clear, specific, and actionable messages
Avoid vague errors like “Invalid input”. Instead, describe what is wrong and how to correct it: “The security code (CVV) should be 3 digit from the back of your card”.
References:
Place error messages close to the field
The error message should be displayed above the input field box, directly below the input field label and any helper text (if present).
References:
Use a helpful, non-blaming tone
Avoid language that makes users feel at fault (“You entered this wrong”). Use neutral, supportive phrasing (“Please enter a valid email address”).
References:
Ensure accessibility for all error messages
Associate errors programmatically with fields using aria-describedby. Screen readers should announce both the field and the error.
Error text must meet WCAG 1.4.3 contrast requirements.
References:
Do not rely on color alone
Always supplement color with an additional indicator (for example: an error icon) when displaying errors, to ensure clarity and accessibility.
References:
Offer recovery guidance when possible
When errors relate to complex formats, provide examples of correct input alongside the error message.
References:
Common mistakes
Frequent mistakes in error message design.
Using generic or technical error codes
“Error 503” or “Something went wrong” gives no direction for fixing the issue.
Displaying all errors only after submission
Forces users to hunt through the entire form instead of fixing issues as they go.
Relying only on red borders
Fails accessibility and leaves users guessing what is wrong.
Blaming the user in error wording
Increases frustration and damages trust.
Summary
Key takeaways for error messages in forms.
- Error messages should be clear, actionable, and respectful.
- Place them near the field for context and faster recovery.
- Ensure accessibility with proper contrast, programmatic labels, and text beyond color.
- Support users by guiding them to fix issues, not just pointing them out.
Thoughtful error messages transform frustration into clarity, making forms more usable, inclusive, and trustworthy.
