Form Error Messages: 10 Simple Rules for Clear Forms
In short:
- Form error messages are the moment a form is most likely to lose someone. Clear ones help people fix the problem in seconds; vague ones make them give up.
- Good form error messages appear next to the field, say what is wrong and how to fix it, use plain words and never blame the visitor.
- They must work for everyone: shown in text, not only colour, and announced to screen readers.
- Ten simple rules cover it, from “keep what they typed” to “prevent the error in the first place”.
- FillKite shows inline form error messages in plain words, keeps the visitor’s answers, focuses the first problem and announces errors to assistive technology.
Form error messages are small pieces of text with a big job. A visitor has decided to contact you, filled in the form and pressed Send, and something is wrong. What happens in the next five seconds decides whether they fix it or leave.
This guide gives ten simple rules for clear form error messages, with examples of weak and strong wording, the accessibility requirements, and how to prevent errors before they happen.
Why form error messages matter
An error is friction at the worst possible moment: the visitor has already invested effort. A confusing message makes that effort feel wasted. The classic failures are familiar:
- a single message at the top, “There were errors in your form”, with no clue which field;
- a red border and nothing else;
- “Invalid input”, which explains nothing;
- a page reload that empties every field.
Each of these turns a small slip into form abandonment. Good form error messages turn it into a two-second fix.
10 simple rules for clear form error messages
1. Put the message next to the field
The error belongs right under or beside the field it is about. The visitor should never have to match a message at the top with a field somewhere below.
2. Say what is wrong and how to fix it
“Enter a valid email address” is better than “Invalid”. “Enter a date like 14/03/2027” is better than “Wrong format”. The fix matters more than the fault.
3. Use plain words
No codes, no technical terms, no “Validation failed”. Write the way you would explain it to a customer standing in front of you.
4. Do not blame the visitor
“You entered an invalid phone number” sounds like an accusation. “Enter a phone number with at least 7 digits” simply helps.
5. Keep everything they typed
Never empty the form after an error. Every answer the visitor already gave must stay, including in fields that were fine. FillKite keeps all answers when showing errors.
6. Take them to the first problem
After a failed send, move focus to the first field with an error, so keyboard and screen reader users land exactly where they need to be, and everyone else sees it straight away.
7. Add a short summary on long forms
For forms that run beyond one screen, a line near the button such as “Please fix the highlighted fields” tells people why nothing happened. Keep it short and let the inline messages do the explaining.
8. Do not rely on colour alone
Red borders are invisible to many colour-blind visitors. Always add text, and ideally an icon or a change in the border as well.
9. Announce errors to screen readers
Screen reader users cannot see a red message appear. WCAG’s error identification requirement exists for exactly this reason. Form error messages must be connected to their field in the code and announced when they appear. FillKite announces errors through a live region and links each message to its field.
10. Time it well
Do not show errors while someone is still typing their first letters; it feels like nagging. Check a field when the visitor leaves it or presses Send, and clear the message as soon as the problem is fixed.
The anatomy of a good message
Every helpful error message has the same three parts, even when it is only one sentence long. First, it points to the right place, by sitting next to the field and being linked to it in the code. Second, it names the problem in the visitor’s terms, such as “the email address” rather than “field 3”. Third, and most important, it tells them what to do next. When one of the three is missing, visitors have to guess, and guessing is where they give up.
Try this test on your own forms: cover the field and read only the message. Could a visitor fix the problem from the message alone? If yes, it is a good message. If they would need to study the field or try again to understand, rewrite it until the fix is obvious.
Weak and strong examples
| Weak | Strong |
|---|---|
| Required | Enter your name so we know who to reply to |
| Invalid email | Enter an email address like [email protected] |
| Wrong format | Enter the date as day/month/year, like 14/03/2027 |
| Error | Choose at least one option |
| File not accepted | “brief.pages” is not a file type this form accepts. Upload a PDF or Word file |
| Checkbox required | Please tick this box to continue |
Notice the pattern in the strong column: each one tells the visitor exactly what to do next.
Messages for each type of field
| Field | Common problem | Helpful message |
|---|---|---|
| Name | Left empty | Enter your name so we know who to reply to |
| Missing @ or domain | Enter an email address like [email protected] | |
| Phone | Too short | Enter a phone number with the area code |
| Number | Out of range | Enter a number between 1 and 100 |
| Date | In the past | Choose a date from today onwards |
| Choices | Nothing chosen | Choose at least one option |
| File upload | Too large | “photo.jpg” is too big. Files can be up to 10 MB |
| Consent | Not ticked | Please tick this box to continue |
Each message names the fix. That is the single habit that separates helpful form error messages from frustrating ones.
Prevent errors in the first place
The best form error messages are the ones nobody sees. Many errors can be prevented:
- Show format hints before the field, not only after a mistake.
- Use the right field types, so phones show the right keyboard and browsers can autofill.
- Offer choices instead of free text where the answers are known, such as dropdowns for countries or services.
- Make fewer fields required. Every required field is a potential error.
- Accept reasonable variations, such as phone numbers with spaces, instead of demanding one exact format.
Our guide to form abandonment shows how these choices raise completion rates.
When to check: on send or as they go?
There are two moments to check a field: when the visitor presses Send, or as they move through the form. Checking on send is simple and never interrupts; its weakness is that all problems appear at once at the end. Checking as they go, usually when the visitor leaves a field, catches mistakes early, but it must be gentle. Never flag a field as wrong while someone is still typing their first characters, and never mark an empty field as an error just because the visitor tabbed past it on the way to another field.
A balanced approach works for most forms: check format on leaving a field once something has been typed, check required fields on Send, and clear each message the moment the problem is fixed.
Why wording changes behaviour
An error feels like a small failure, and people react to failure differently. Some try again carefully; many feel annoyed or embarrassed and leave. Wording that sounds like a helpful instruction keeps people in the first group. “Enter your postcode” feels like guidance; “Postcode is invalid” feels like being told off. Short, specific, friendly form error messages quietly lower the emotional cost of a mistake, which is why they have such a large effect on completion.
Errors in multi-step forms
On a form split into steps, check each step before the visitor moves on, and show errors on that step. Discovering an error on step one only after pressing Send on step four is one of the most frustrating experiences a form can create. FillKite Pro’s multi-step forms check each step’s required fields before continuing. See our guide to the WordPress multi step form.
Tone and brand voice
Error messages are part of your brand, even though few people think of them that way. A playful brand can be light, but never at the visitor’s expense: a joke when someone is frustrated rarely lands. A formal brand should still be warm. In every case, short sentences, the word “please” where it fits and a clear instruction work best. Read your messages aloud; if you would not say it to a customer at your counter, rewrite it.
Errors on phones
On a small screen, the field with the problem may be out of view when the visitor presses Send. Moving focus to the first error scrolls it into view, which matters even more on mobile. Keep messages short enough to fit under the field without wrapping into several lines, and make sure the on-screen keyboard does not cover them. Test on a real phone by leaving a field empty and sending.
Errors after sending
Some problems can only be found on the server, such as a disposable email domain being refused or a file that is too large. These form error messages deserve the same care: show them next to the field, keep the answers, and explain the fix. For example, when a form refuses throwaway addresses, a friendly message asking for a different address keeps real people moving. See our guide to block disposable email.
Success messages matter too
The opposite of an error message is just as important. After a successful send, visitors need to know it worked and what happens next. “Thank you” alone leaves questions; “Thanks, Sam. We have your message and will reply within two working hours” answers them. The success message should also be announced to screen readers, and should replace or sit clearly near the form, not appear somewhere off screen.
Test your form error messages
- Press Send on an empty form. Is every required field flagged, in words, and is focus on the first?
- Type a wrong email, such as “name@gmial”. Is the message specific?
- Fix one error. Does its message disappear, while the others stay?
- Try it with a keyboard only, and with a screen reader if you can.
- Try it on a phone, with the keyboard open.
Five minutes of testing catches most problems before a single visitor meets them.
Let the builder help
FillKite’s builder checks your forms as you edit, including whether format messages are clear, and flags placeholders used as labels and low-contrast text, which make errors more likely. Fixing those warnings before you publish means fewer form error messages for your visitors. Our guide to accessible forms covers the other checks.
Errors versus warnings
Not every problem should stop the form. An error blocks sending because the answer cannot be used, such as an empty required field. A warning points out something unusual but allows the visitor to continue, such as a very long message or a date far in the future. Use warnings sparingly, and never make them look like errors, or people will think they are stuck. Most forms only need errors for truly required information and a few format checks.
Review your messages every few months
Form error messages age as forms change. A field that was optional becomes required, a new file type is allowed, a phone format changes. When you edit a form, trigger each error once and read the message with fresh eyes. It takes a couple of minutes and keeps every message accurate. Watch your entries too: if people keep making the same mistake, a better hint before the field will often prevent it entirely.
Multilingual sites
If your site is translated, your form error messages must be too. A form in Spanish that shows errors in English is confusing and feels careless. FillKite is fully translatable, so its messages follow your site’s language, and your own labels and hints can be written in each language you publish.
Who should write them?
Error messages are often written by whoever builds the form, at the end, in a hurry. They deserve better. If your business has someone who writes the website copy, ask them to review the messages too, alongside labels, hints and the success message. Treat them as part of the customer conversation, because for the visitor who meets one, that is exactly what they are.
A form error messages checklist
- Every message sits next to its field and names the fix.
- Messages use plain, friendly words and never blame the visitor.
- Text accompanies colour, and errors are announced.
- Answers are kept and focus moves to the first problem.
- A short summary appears on long forms.
- Format hints prevent common mistakes.
- The success message says what happens next.
Where form error messages go wrong
| Mistake | Effect | Fix |
|---|---|---|
| One message at the top only | Visitors hunt for the problem | Messages next to each field |
| Red border only | Invisible to many people | Text as well as colour |
| Form cleared after an error | People give up | Keep every answer |
| Technical wording | Confusion | Plain words and the fix |
| Errors while typing | Feels like nagging | Check on leaving the field or sending |
| Not announced | Screen reader users stuck | Live region and field links |
Frequently asked questions
Where should form error messages appear?
Next to the field they are about, usually just below it. On long forms, add a short summary near the button as well.
Should errors show while someone types?
Not on the first letters. Check when the visitor leaves the field or presses Send, and clear the message as soon as it is fixed.
How do I make errors accessible?
Use text, not only colour, connect each message to its field, and announce errors to screen readers. FillKite does this for every form.
Should I use pop-up alerts for errors?
No. Browser alert boxes interrupt, hide the form and disappear before the visitor can fix anything. Show messages inline, next to each field.
How many errors should I show at once?
Show all of them when the visitor presses Send, each next to its field, so they can fix everything in one pass. Showing one at a time forces repeated attempts.
Do form error messages affect conversions?
Yes. Clear messages help people fix mistakes and send the form; vague ones are a common reason for abandonment.
Can I change the wording of errors?
FillKite’s default messages are written in plain words, and each field’s help text and labels can guide people before an error appears. Clear labels and hints prevent most errors.
Turn errors into two-second fixes. FillKite shows clear, inline form error messages, keeps every answer, focuses the first problem and announces errors to assistive technology. See every feature, read about design and layout, or install FillKite free from WordPress.org.
