Let me start with a confession: as a web designer, I really don’t enjoy designing and building contact pages & contact forms
Because I find these pages boring with their same and expected layout and elements
Because they are purely “defensive”: a great contact page alone won’t turn a visitor into a lead (but a poorly designed contact form care surely discourage even the most motivated person to leave you a message)
And also because they are the usually the last to be designed and built and I have already spent all my “creative juice” on other more prominent pages
From all the sites I audit, I can tell that I am not the only designer feeling this way: contact pages and forms are often overlooked and left unpolished
And that is really a pity: a poorly designed contact page is just a way to waste all the efforts made to bring your ideal visitor on the said page (it is like releasing the fish after hours of pulling it and exhausting it before you can put in in the pan)
It doesn’t have to be this way of you follow these basics UX rules for your contact form designs
Keep labels concise and always visible
Labels are a piece of text that identifies a specific input field on a form. They are important because they help user understand the purpose of each input fields. Since they provide context, label should be always visible
Use placeholders to give examples of formatting
Placeholders are also piece of text, usually a short hint or example text that appears inside an input field to provide users with an idea of what information should be entered into that field.They provide additional information but can’t replace labels
Group related fields together and used a logical order
It is easier for the user to fill the form that way: Last name + First Name, Email + Phone …
Indicate clearly the mandatory fields
Usually labels in bold with the *
Indicated clearly which field is focused
This is done by creating a focus state with a styling that looks slightly different (darker / lighter background, border change…)
Implement inline validation with clear error messages
This helps users correct mistakes before they submit a form, reducing the likelihood of errors and improving the user experience. This is extremely useful for password field with complexe rules
Enable keyboard navigation
The Tab key should allow users to navigate the form fields in the right order
Include a checkbox for explicite consent
This is required to be GDPR compliant. Also make sure you collect only the information you really need
Test your form (more than once)
That seems pretty obvious but that is the only way to be sure it properly works (and also that you receive notifications when a message has been submitted on the site)
Filling the contact form is the last (and most important) action you need from your visitors.Poorly designed forms create friction that can discourage even the most motivated person.
By following these best practices, you can create forms that are easy to use, accessible, and effective in collecting the information you need from your users
