You do everything you can to build a website that will lead visitors to conversion. As you study the analytics, you’re excited to see that the user journey you’ve created is being taken by those visitors, time and time again. However, there’s something keeping them from converting. Find out what it is in this advanced contact forms guide.
The contact form is a critical part of your visitors’ journey.
Even if you’ve effectively sold them on whatever the website has to offer, a contact form could realistically ruin the experience for them if not executed well.
Broken buttons, confusing fields, too many steps, a disorganized interface… Heck, even the placement of the contact form could disrupt the user experience.
There’s a lot that can go wrong, and in this article we’ll be doing our best to educate you on how you can avoid these things.
More specifically we’re giving you our…
6 Rules For Building the Perfect Contact Form
But hold on, quick PSA first…
Before we go any further, you should know this is an advanced look into the world of WordPress contact forms.
If you want a simple introduction, our getting started with contact forms post is a great place to start.
Then, once you know you need to create more contact forms for your site, the next step is choosing the right contact form plugin to make life easier.
Once you’ve done those things we reckon you’ll be ready and primed for the advanced in-form-ation (heh) that follows.
Moving on…
User logins. Membership sign-ups. Email subscriptions. Quote requests. Questionnaires. Support requests. Order and payment forms.
There are a bunch of different ways to use contact forms on a WordPress site. What doesn’t change, however, are the rules you must abide by if you want the contact form to perform well.
A Google eye-tracking study published in 2014 showed that following the most basic usability guidelines for form design will significantly improve the user experience.
Specifically, when a contact form abides by all the rules, 78% of users can complete and submit them in a single try. When a contact form violates those rules, however, only 42% are able to do it in one attempt.
Curious to know what those rules are? Then keep reading.
Rule #1: Focus on Alignment
As you’ll see in some of the other rules here, people are often concerned with the length of contact forms, which is what often leads to bad design choices.
Take the matter of alignment, for instance.
You might see a form like this one on the BrainTraffic website and think, “Hmmm… but isn’t that a little too long to fill out?”
This is just a beautifully constructed contact form on the BrainTraffic website.One way you might think about fixing this “problem” is by shifting the labels to the left-hand side and placing the answer fields on the right.
However, UX experts will tell you that’s a major no-no as it compromises the scannability of the form.
The same thing applies if you were thinking about placing fields next to each other horizontally.
Basically, if you deviate from the label-on-top/field-below-it structure, you’ll create friction within the user experience.
Back in 2010, a set of guidelines were issued regarding the design of web forms called “Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design” .
Google picked those guidelines up in 2014 and put them to the test with an eye-tracking study.
It’s clear from this eye-tracking test how much work we’re putting visitors’ eyes through when we don’t pay attention to alignment.Among their many findings, they concluded that left-aligned forms with labels placed atop each field resulted in an improved user experience.
If you’d like your contact forms to abide by this simple alignment rule, here is what you need to do:
- Left-align all labels, form fields, and the main call-to-action button.
- Never align related fields horizontally. You can structure the form logically, but each question or field needs to be stacked vertically.
- Any field that has multiple choice questions (with under six options) should be displayed in a vertical list of bullet points or checkboxes, not in a drop-down menu.
A really nice example of mobile contact form alignment and design from WPMU DEV.Not only is this design great for the user experience, but it will help your site bridge the gap between the desktop and mobile experience (especially important as you work towards updating your sites for Google’s mobile-first index).
Rule #2: Include All Relevant Fields
When it comes to designing contact forms, you might think that shorter is better, right?
This actually isn’t always the case. What matters most is that you provide users with all necessary and relevant fields.
Michael Aagaard, the Senior Conversion Optimizer for Unbounce, gave a presentation in 2015 that tackled this very question.
He and his team wanted to know what would happen if they shortened this contact form:
Surprisingly, the shorter form did not fare as well as the longer one.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 concluding the test, they discovered a 14% drop in conversions with the shorter form.
Afterward, they studied which fields had the highest and lowest interactions on the contact form.
Using the original, longer design, they rearranged those fields and updated the labels to clarify what type of information was needed.
They re-ran the test and saw a 19% improvement in leads with the relabeled and reorganized version of the long form:
Unbounce found that the keys to improving the longer contact form were in the labels, not the form length.That’s not always how these tests work out though.
Expedia, for example, found that there was a field in the contact form for “Company” that was confusing customers.
It was optional, but users didn’t necessarily understand that and, in turn, filled out the wrong information which eventually led to their purchase being declined.
When Expedia realized the issue, they removed the field and saw an additional $12 million in revenue the following year.
I would suggest that, when building your own contact form, start with the basic fields as QuickBooks has done here:
Only the most necessary fields are included when signing up for QuickBooks.If you find that conversions aren’t tying out with expectations, study the analytics and see if you can determine which fields are stopping users up from completing the form.
Rule #3: Simplify Input
Regardless of whether your users engage with your contact form using a desktop or mobile device, or whether or not they need assistive technology to help them do it, the form should be equipped to simplify the input process.
Here are some techniques you should be aware of:
Tabbing
For desktop users and those with accessibility issues, make sure your contact form has a logical tabbing order enabled.
Input Masks
Rather than force users to guess how you want certain fields formatted, you can code them with input masks that automatically format them as the user types.
An example of what an input mask looks like from the Social Design House website.This type of auto-formatting also leads to fewer clicks (especially if a field like a phone number or credit card is broken into multiple fields) and quicker form completions.
Input Types
HTML input types will help users see the right keyboard options as they type on mobile, saving them from having to type everything from scratch (like the “.com” for email).
Watch how the keyboard at the bottom of this Elluminati contact form changes based on the field selected.Google Autocomplete
Rather than code each field to automatically format per the standards it needs to meet, enable auto-fill with the Google Address Autocomplete plugin.
Not only will it help you avoid having to deal with misspellings and improperly formatted addresses, it’ll spare your visitors from having to type most of that information out.
Conditional Logic
If you’re worried about the length of your contact form–especially if it targets different user types and fulfills various purposes–you can use conditional logic to keep it short.
Once the user selects their particular “condition”, only then will the relevant parts of the form be exposed.
Upon selecting the final field, users are presented additional fields to fill in that are most relevant to their request.Many contact form plugins come with an extension for this. For example, here’s one for Forminator.
Create forms with conditional logic using Forminator.Breadcrumbs
A breadcrumb or progress bar for a contact form isn’t necessarily about simplifying the process of filling out a form.
However, it does help encourage users to finish it as the remaining steps are clearly defined.
Once again, here’s an example of a progress bar using Forminator’s Pagination element:
Rule #4: Spell Everything Out
While I realize this rule will go against the basic principles behind minimalism, it’s one that you should pay close attention to so you can avoid unnecessarily frustrating your visitors.
Let me explain: You have a contact form that looks simple enough.
Your users fill it out based on what the labels suggest and they hit the submission button.
Then they receive that ugly red message: “You didn’t do it right! Go back, fix the form, and resubmit!”
You’ve likely encountered this as a user and you know how frustrating it can be, especially if some of the information you inputted drops out when the error is thrown.
So, rather than leave users guessing about what needs to be fixed and how, don’t let it get to that point.
Spell everything out along the way:
- Provide field focus (especially on mobile) so users know exactly where they are in the process of filling out a form.
- Write out any formatting requirements if you’re not using input masks to auto-format fields.
- Explicitly state when a field is “Optional” (use the word, not the red asterisk).
- Give users the ability to show or hide the password field as they enter it.
- Show an error message as soon as the user has engaged with a field. Don’t wait until the very end to do it.
Hubspot shows the right way to handle error messages in a contact form.In the aforementioned Google eye-tracking study, they followed up with users who took the test and found that a lack of formatting was often specified as a complaint.
Google suggests providing clear guidelines throughout the form as well as highly visible error messages. In addition, these labels shouldn’t just be in a standard red font.
They should be outlined, colored, and bolded.
Rule #5: Stay Away from Hints
Hint text in a contact form looks like this:
While Target has fixed some of the problems associated with using hint text in form fields, it still might not be enough for users with accessibility issues.See how Target places the labels within the field? In some contact forms, those labels/hints simply disappear when a user clicks on a field.
Target handles this a little differently and instead shifts the label to the top of the field box (see “email address”).
Regardless of how this is handled, usability experts–like the Nielsen Norman Group–will tell you that this is a bad design practice because:
- This is problematic for users that are multi-tasking, get distracted, or too quickly tab into the next field. When the hint disappears, users have to back out of the field in order to rediscover what is needed.
- Hints that disappear also prohibit users from going back over a form to check their work or to fix an error without deleting the response completely to see what’s underneath.
- The lighter grey text used for placeholder hints isn’t ideal for easy reading.
- Fields with hint text can be confused for fields that have already had data filled in, leaving users to skip them, submit the form, and receive an error message.
- Some screen reader tools aren’t capable of reading placeholder hint text.
According to the NNG, users find empty fields more attractive than those that contain hint text.
While it may make your forms look longer to place those labels or descriptors above the field, it’ll improve usability.
Rule #6: Look at Your Buttons
WPMU DEV already has a great guide to designing better buttons, so I’m not going to rehash that. Instead, I want to focus on the few things you can do to improve your contact form buttons.
For starters, always align the primary CTA with the form fields, even if it doesn’t seem logical.
For instance, if you have a “Next” and “Back” button, “Next” should appear on the far left as it’s the action most users are going to take.
Also, try not to use “Reset”, “Clear”, or “Cancel” buttons. Many users get to the bottom of a form and automatically click on the first button they see, thinking it’s the submission button.
If they lose all their answers by erroneously hitting the wrong button, you may find them unwilling to re-submit.
In this A/B test from Unbounce, they found that value-driven copy (even if longer) was more successful in converting users.
The CTA text may be longer, but users responded much more positively to the value-driven message.The updated copy received over 31% more conversions than the original message.
Finally, use trust marks around your contact form buttons when it makes sense.
The CoSchedule statement about no credit card being required is a nice example of this:
Generally, a great-looking form that does a good job of using “trust mark” text that encourages users to click without hesitation.But be careful. If you use a trust mark when it’s not needed, it could mislead users into believing they have to hand over sensitive information when that’s not actually the case, as this A/B test from Behave demonstrates:
You’d assume the TRUSTe trust mark would help increase conversions, but that’s not so in this case.Version B received almost 13% more submissions than Version A as the security seal led users to believe they’d eventually have to submit payment or other sensitive information through the website.
Time To Apply The In(Form)ation
Contact forms are not a one-size-fits-all kind of thing.
Every website (and business behind the website) has a different goal and, thus, the contact forms within it need to work specifically to help achieve that goal.
If you want to properly execute the rules above while working towards those goals, you have two options.
You can find a WordPress plugin that will help you create a custom WordPress contact form or you can build your own.
A plugin like WPMU DEV’s Forminator gives you the best of both worlds (and it’s free!).
Install the plugin and choose a template to start with, then build the form to suit your specific needs with a range of powerful customization options and settings.
Whatever you decide, just remember that users aren’t necessarily afraid of lengthy contact forms, it’s more about how well you’ve created an experience within the form for them.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!
Keep reading the article at WPMU DEV Blog. The article was originally written by Suzanne Scacca on 2018-01-08 08:00:09.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.