A contact form is often the last step between a visitor and a new enquiry. If it is confusing, people give up and leave. They rarely tell you why.
Good form design is mostly about clear labels, honest instructions and helpful error messages. None of it needs a big budget. Most fixes are small changes to wording and layout.
Why forms deserve design time
Forms are easy to treat as an afterthought. A developer adds a plugin, drops in a few fields and moves on. Yet the form is where a visitor finally acts on everything the rest of the site has told them. A small problem here can undo a lot of good work elsewhere.
The same thinking that guides the rest of a site applies here too. Keep things simple, consistent and easy to read, as covered in our basic web design guidelines. A form is just a page element that asks for something in return. That makes clarity even more important than usual.
Ask only for what you need
Every extra field is another reason to stop. For a simple enquiry, a name, a way to reply and a message box is often enough. Questions about budget, timing or how they found you can wait for the first conversation. If you do need more detail, explain why you are asking.
Look hard at fields that exist only because the plugin included them by default. A company name field may make no sense for a residential service. A second address line may never be used. Removing clutter like this is one of the web design elements your website is better without.
Labels that stay visible
Each field needs a clear label that says what goes in it. The Web Accessibility Initiative at W3C suggests placing labels for text boxes to the left of the field or above it in languages that read left to right. Above the field tends to work well on phones. Whatever you choose, use the same placement across the whole form.
Avoid relying on placeholder text in place of a label. The W3C tutorial on form instructions says placeholder text is not a replacement for labels. It disappears as soon as someone starts typing, so they cannot easily check what the field wanted. Browsers also often show it in a pale colour that does not meet minimum contrast requirements.
Names should also be consistent. W3C guidance asks designers to use clear and consistent names for form elements across a site. If one form says “Phone” and another says “Contact number”, people have to stop and think. Pick one term and use it everywhere.
Instructions and required fields
Some forms need a short note before they start. W3C suggests overall instructions cover things like which fields are required and what data formats are expected. Put that note before the form, not after it. A line such as “All fields marked required must be completed” is enough.
Instructions for a single field work best inside its label. The W3C tutorial gives the example of a label that reads “Expiration date (MM/YYYY)”. This is reliable across browsers and assistive technologies. It also means the hint does not vanish when the visitor clicks into the field.
Required fields should be marked in the label text as well as in the overall note. W3C guidance says required fields need visual and non visual instructions. A red asterisk on its own is not enough, because colour alone does not reach every user. Adding the word “required” solves that simply.
Group related fields together
Fields that belong together should look like they belong together. An address is the classic example, with street, suburb, state and postcode. W3C guidance says form elements that share a purpose need clear visual and non visual links between them. Spacing and a short group heading usually do the job.
Longer forms can be broken into steps. If you do this, tell people where they are. W3C suggests giving instructions about the current step and the total number of steps involved. A simple “Step 2 of 3” line is a good start.
Error messages that help people fix things
Mistakes will happen, so plan the messages before they do. W3C guidance says error messages should identify the fields in error, describe the cause and suggest a correction when possible. “Please enter a valid email” is a start. “Please include the full address, for example name and domain” is more helpful.
Placement matters too. The W3C tutorial on user notifications suggests listing errors at the top of the page, before the form. That list should have a distinct heading and link to each problem field. It also suggests moving focus to the first field with an error.
Keep what the visitor already typed. W3C describes keeping the original submission as best practice where possible, so people only fix what is wrong. Few things are more frustrating than a form that clears itself after one small error. Many people will not bother filling it in twice.
Confirm that it worked
Once a form is sent, say so clearly. W3C notes that success messages are important to confirm task completion. Its tutorial suggests the page heading or title can carry the message, such as a simple thank you. Tell people what happens next and roughly when they can expect a reply.
For forms that involve money, legal matters or sensitive details, go a step further. W3C guidance asks designers to give people ways to check, confirm or reverse critical submissions. A review screen before the final send button is a common approach. It gives people one last chance to catch a mistake.
Test it like a visitor
The quickest test is to fill in your own form on a phone. Try leaving fields blank and entering details in the wrong format. Check that the errors make sense and that your entries stay put. Then confirm the enquiry actually reaches your inbox.
It also helps to look at how others handle it. Charities often rely on donation and volunteer forms, and some of the best non profit and charity websites show how simple these can be. Small improvements add up across a site. You can find more ideas in these design tweaks to level up your website.
Frequently asked questions
How many fields should a contact form have?
As few as you need to reply properly. For many businesses that is a name, a way to get back to them and a message. Extra questions can wait for the first conversation.
Is placeholder text enough without a label?
No. W3C says placeholder text is not a replacement for labels. It disappears when people start typing and is often hard to read.
Where should error messages appear?
W3C suggests listing errors at the top of the page with a clear heading. Each error should name the field and explain how to fix it. Messages should also appear in a consistent place every time.
Should a form show a message after it is sent?
Yes. A clear success message confirms the task is done. It is also a good place to say when you will reply.