You do everything you can to create a website that will lead visitors to conversion. When you study the analytics, you're thrilled to see that the user journey you've created is supported by its visitors, time and time again. However, there is something that prevents them from being converted.
Le Contact form is an essential part of your visitors' journey. Even if you actually have almost everything a website can offer, a Contact form could ruin the experience if not used correctly. “Broken” buttons, confusing fields, too many steps, a disorganized interface… even the placement of the Contact form could disrupt the user experience.
There are many things that can go wrong.
5 rules for building the perfect contact form
A Google eye tracking study published in 2014 showed that following the most basic usage guidelines for designing forms will significantly improve the user experience. Specifically, when a contact form meets all the rules, 78% of users can fill them out and submit them in a single try. When a contact form violates these rules, however, only 42% are able to do so in one attempt.
Curious about what these rules are? So keep reading.
Rule # 1: Focus on alignment
As you will see in other rules here, people are often concerned about the length of forms of contact, which often leads to poor design choices. Take the issue of alignment, for example.
You might see a form like this on the BrainTraffic website and think: Hmmm… but isn't that a bit too long to complete?
One way to think about solving this "problem" is to move the labels to the left and place the answer fields to the right. However, UX experts will tell you that this is a major no-no as it compromises the ability to scan the form. The same goes for if you thought about placing the fields next to each other horizontally.
If you want your forms contacts meet the alignment standard, here's what you need to do:
- Left-align all labels, form fields, and the primary call-to-action button.
- Never align related fields horizontally. You can structure the form logically, but each question or field should be stacked vertically.
- Any field with multiple-choice questions (with fewer than six options) must be displayed in a vertical list of points or check boxes, not in a drop-down menu.
Rule 2: Include all relevant fields
When it comes to designing contact forms, you might think the shorter the better, right? It's not always the case. What matters most is that you provide users with all the necessary and relevant fields.
Michael Aagaard, Senior Conversion Optimizer for Unbounce, did a presentation in 2015 which addressed this issue. He and his team wanted to know what would happen if they shortened this contact form:
As you can see, they removed what they believed to be unnecessary fields in order to streamline the process of filling out the form. However, upon conclusion of the test, they found a 14% drop in conversions with the shorter form.
Rule # 3: Simplify Fields
It doesn't matter if your users interact with your contact form using a desktop or mobile device, or if they need assistive technology to help them, the form should be equipped. to simplify the entry process.
Here are some techniques you should know:
tabulation
For desktop users and those with accessibility issues, make sure your contact form has logical tab ordering enabled.
Input masks
Rather than forcing users to guess how you want certain fields to be formatted, you can add them with input masks that automatically format them.
Google Autocompletion
Rather than coding each field so that it is formats automatically according to the standards to be respected, activate autofill using the Google addresses autofill plug-in. Not only will this save you from having to deal with spelling mistakes and incorrectly filled out addresses, it will save your visitors from typing in most of this information.
Rule # 4: Exit All
While I realize this rule will go against the basics of minimalism, it is a rule you should pay close attention to in order to avoid unnecessarily frustrating your visitors.
Let me explain: You have a contact form that looks pretty straightforward. Your users fill it out based on what the labels suggest and they click the submit button. Then they get this horrible red message: “You didn't do it right! Go back, correct the form and send it back! "
You've probably encountered it as a user and you know how frustrating it can be, especially if some of the information you entered gets deleted when the error is thrown. So rather than leaving users guessing what needs to be fixed and how, don't let it get to this point. Spell everything on the way:
- Provide a focus in the field (especially on mobile) so that users know exactly where they are filling out a form.
- Write down all formatting requirements if you are not using input masks to automatically format fields.
- Explicitly indicate when a field is "Optional" (use the word, not the red asterisk).
- Give users the option to show or hide the password field as they enter it.
- Display an error message as soon as the user is engaged in a field. Don't wait until the end to do it.
Rule # 5: Do not Hide Advice
The board text in a contact form looks like this:
See how Target places the labels in the field? In some contact forms, these labels / indications simply disappear when a user clicks on a field. The target handles this a little differently and moves the label to the top of the field box (see "email address").
Regardless of how this is handled, the usability experts, like the group Nielsen Norman, will tell you that this is bad design practice because:
- This is problematic for multitasking, distracted, or too fast-paced users in the next field. When the clue disappears, users must leave the field in order to rediscover what they need.
- Tips that disappear also prevent users from returning to a form to check their work or correct an error without completely deleting the response to see what is below.
- The lighter gray text used for placeholder tips is not ideal for easy reading.
- Fields with hint text can be confused with fields that have already filled in data, leaving users to ignore them, submit the form, and receive an error message.
- Some screen reading tools are not able to read hint text.
According to the NNG, users find empty fields more attractive than those that contain clue text. Even if your forms seem longer to place these labels or descriptors above the field, it will improve usability.
That's it for these tips I hope they will help you build better contact forms.
