If you’re not following form design best practices, you might be leaving a significant amount of money on the table.
While forms aren’t the sexiest part of conversion optimization, they tend to be the closest to the money, the macro-conversions. Spending a little time optimizing forms can be some of the most important optimization work you can do.
Of course, best practices don’t work the same on all sites. It’s contextual. But generally, implementing form design tactics that work more often than not is a good way to get started.
Luckily there’s no shortage of data, case studies, research, and examples on form design best practices. It comes from all over the place: business case studies, blog posts, A/B test examples, usability research, eye tracking studies, and more.
This post will outline some of the most common form design best practices. If you’re just starting with optimization, use them as a baseline.
If you’re working on your forms, these guidelines will hopefully help you get some quick wins early on.
Form Design Best Practices
1. Less Is More (Remove Form Fields)
Every field you ask users to fill out increases friction. The best thing you can do to improve form completions is to get rid of as many fields as possible.
In one case study, an 11-field contact form was replaced with a 4-field version, and form completions increased by 160% with the quality of the submissions staying the same.
In another test, a 5-field form outperformed a 9-field form by 34%. In this one, too, they didn’t notice any drop in data quality or lead quality.
Most forms are too long. It’s “greedy marketer syndrome” where we think we need all the data.
Baymard Institute found that the average checkout contains 14.88 form fields. But their checkout usability testing also showed that most sites can achieve a 20-60% reduction in the number of form fields displayed by default.
Essentially, the average checkout display twice as many form fields as needed.
Image Source
So form field reduction is ground zero for bottom of the funnel conversion optimization. It’s where you can get some of your quickest wins. The effort and resources required are super low, and the potential gains are tremendous, especially at scale (how many forms do you have? How many people experience them? What does a 10% increase on each form mean to you?)
Now, there are definitely data concerns. Especially if you’re a B2B company doing lead generation and passing leads over to a sales team, you want to make sure they’re qualified leads – otherwise more leads ends up being an externality, incurring its own cost in wasted productivity.
An example of this is adding a tiered system of allotted budgets. Basically, how much is the lead willing to pay? Set the lowest bar at the lowest you think a valuable lead would be worth, and you’ll weed out a lot of tire kickers. An example from our agency page:
When you’re optimizing form fields, ask about the data: Do you really need it?
Do you really need people’s phone, fax, or address? Do you need someone’s company name if you’re selling candles? Only ask what’s relevant. Expedia removed the “Company” field from their booking form and saw an increase of $12 million a year in profit.
Know also that, especially for B2B, data enrichment companies like Clearbit exist. If you collect an email and maybe a first name, they can generally enrich the rest of the data (company name, size, Twitter handle, etc.) and it tends to be quite accurate.
Think about it this way: every additional fields makes you lose a number of prospects. Is the additional information you gain from the field WORTH losing those people? Do you lose anything if you don’t get all the data right away?
Most forms are far too long (Image Source)
The best signup form is short:
Image Source
As always, I need to mention the exceptions – of course, reducing form fields doesn’t always increase conversions.
There are data concerns as well. The more information you collect on a user, the more effective marketing and targeting you can use (usually).
In general, though, it’s safe to follow the following heuristic: remove useless or superfluous form fields.
2. Single-Column Beats Multi-Column Forms
This has been well researched in eye-tracking studies (including our own), and business case studies and A/B tests. When you’re deciding between a single column form and a multi-column, default towards the single column.
In a study conducted through CXL Institute, we found the single-column form was faster to complete.
Survey participants completed the linear, single-column form (n = 356) an average of 15.4 seconds faster than the multi-column form (n = 346). This was significantly faster at a 95% confidence level.
This guideline isn’t new. In fact, it’s been around for years, but until our study there wasn’t much quantitative evidence for it. Still, those in conversion optimization will have undoubtedly seen dozens of compelling user tests, as well as A/B tests, that show single columns to be more usable.
I’m sure there are exceptions to this rule (as with any), but I haven’t found anything empirical that has been published. If you know of any conflicting resources, feel free to send them over.
3. Communicate Errors Clearly
Users will make mistakes. It’s inevitable. Even if you used every form design best practice, you’d still get users ringing up error messages.
How you handle error messages can greatly affect user experience.
Image Source
Designing error messages is all about limited the amount of frustration users feel with your form.
When users feel frustrated, they get stressed and cortisol starts to build up. If it hits a certain threshold, users will give up and go to your competitor’s site. Life is too short to go crazy trying to deal with crappy form design as well as unhelpful error handling.
So, yes, do usability research yourself, but start with these error message best practices:
- Don’t blame the user.
- Write like a human, not a robot.
- Make sure errors are clear, and the messages are positioned in a place that is intuitive.
- Make sure users know how to fix said errors.
- Don’t list all errors at the top of the page. Inline validation is a good solution.
4. Use Inline Form Field Validation
Also related to error messages is how you communicate to a user whether their submission is okay or whether they need to change something. Form validation is a whole topic of its own, but we can cover some quick aspects here.
Inline validation is a beautiful way to find, alert, and correct errors in real time. Instead of waiting until pressing ‘submit’ to learn of your errors, you are told right away what went wrong.
Here’s a great example of inline validation:
Image Source
There’s a lot of empirical support for inline validation. In 2009, Luke Wroblewski tested inline validation against a control (after-submit validation), and even though the sample was small, they found the following results with the inline version:
- a 22% increase in success rates,
- a 22% decrease in errors made,
- a 31% increase in satisfaction rating,
- a 42% decrease in completion times, and
- a 47% decrease in the number of eye fixations.
- 22% more people making it through your forms is well worth the effort – and so is creating a more satisfying experience for anyone filling out the form.
I’ll take those results. I’ve seen similar results from A/B tests run on many ecommerce sites.
If we step back and create a heuristic based on this, it makes sense: it’s all about transparent and clear expectations and communication. A user shouldn’t have to guess what will work and what won’t. The easier you can make it to understand what the expectations on a form are, the less errors people will make, and the more form completions you’ll achieve.
It’s a win-win. Look into inline validation for your forms.
5. Fields should be ordered from easiest to hardest to fill out
Dr. Robert Cialdini’s principle of commitment and consistency tells that when someone takes a small action or step towards something, they feel more compelled to finish. For this reason, it’s a form design best practice to put the easiest stuff first.
Wait until later to introduce friction inducing form fields like billing information or anything too personal. Basically, you can put this to action by allowing people to complete shipping information before billing (they’re often the same anyway, so they won’t need to type it again).
Start with the easy stuff (like name) first, and end with credit card number.
Don’t do this:
6. Make typing easy: autoformat, support copy/paste, make suggestions (not always!), etc.
The general guiding principle for form design best practices keep popping up: make things easy for the user.
Especially on mobile, this means limiting the amount of physical typing they need to do to complete the form. One particularly effective way of easing the amount of typing necessary is to automate as much as possible.
Use Autofill:
Image Source
When designing forms and deciding on autofills, here are some good questions to reflect on:
- Do you have any good defaults for this field?
- What’s the history available?
- Do we have any commonly used values?
- Can you use the browser of mobile features or settings to populate the field?
- Can you calculate the field? (e.g. autofill the state based on the zip code)
Autoformatting is also incredibly important (and frustratingly underutilized). Allow users to enter data (particularly fields such as zip code, phone numbers, and credit cards) any way they want. It takes a few lines of code to fix the formatting after they input it. Don’t allow your laziness to ruin the user experience.
So don’t do this:
7. Indicate whether each field is required or optional, unless they’re all required
First, ask yourself whether you actually need to include those optional fields. If you truly dig deep, you’ll realize that most of the time they’re completely unnecessary. For example, L.L. Bean doesn’t really need my title or my middle name. What took them four fields could be accomplished in one:
Initially, focus on what information is necessary to get the visitors started. The number isn’t so important. What’s important is that your visitors aren’t sitting at home thinking, “Why do they need this?!”
Indicate whether each field is required or optional, unless it’s all required.
8. Name and phone number fields should be one field, not multiple
Instead of a first name and a last name field, you can just have a field that says “full name.” Instead of a 3 or 4 field entry for a phone number, you can just have one field.
Image Source
The main problem with multiple fields is interaction issues. Generally, a form design best practice is “the fewer fields, the better.”
Imagine on your mobile device having to go through having to go through five fields for name and number (two for name, three for number) instead of just two? Needless friction.
9. Forms should offer radio buttons over dropdown box selection
UXmovements.com published an article that sparked our curiosity towards the use of multi-select form fields when another form field type would work. In their piece, “Why Users Abandon Forms with Select Menus,” they argue that forms with select menus often get abandoned because they “take more time and effort to complete.”
More specifically they say they slowed users down by interrupting user flow, being hard to read, and requiring dexterous mouse maneuvering.
But, they provide no data to support this.
Well, it’s easy enough to test. So we did. We were just launching a large survey on online trust perception, so we had a good opportunity to simply manipulate a survey form and ask different groups of people the same questions in different formats (multi-select vs. radio buttons) to see how form completion time compared.
The results? The form with radio button was faster to complete.
Survey participants completed the radio button form (n = 354) an average of 2.5 seconds faster than the form with multi-select buttons (n = 354). This was significantly faster at a 95% level.
10. Don’t make coupon code fields prominent
When people see an “Enter coupon code here” field, they feel less special. “Why don’t I have one?” they think. They get FOMO.
Many go to Google to search for a coupon. Some find coupons on third party sites like RetailMeNot, which cuts into your profit. Many never return.
Leaving the site to search for coupons is a common reason for shopping cart abandonment.
So this is not a good idea:
Instead, have a text link saying, “Got a coupon?” or something similar, and clicking on the link makes an input field – like the one above – appear. Text links are not very visually prominent, so less people will pay attention for them.
Customers who already have a coupon code will be looking for a way to enter it – so unless you hide it really well, they’ll find it and will be able to apply their coupon code. And if a customer has received a coupon (via email) automatically apply it to total and display the discount.
11. Avoid clear fields button
Nobody who fills in your form wants to clear the fields. If they don’t want to fill it in, they can just leave.
If they fill the form and accidentally clear the fields, there’s a good chance they won’t start over.
Mobile Specific Form Design Best Practices
While most of the above can be applied to mobile as well, there are some specific issues to keep in mind with smaller screens. Generally, you want to conserve effort where you can. Mobile users are less patient, and using a smartphone is more difficult than using a desktop.
So follow these guidelines for mobile-specific form design best practices.
1. Offer field focus
If you have a form with multiple fields, you don’t want users to get lost in the form. Especially on mobile this is important, as the smaller screen allows for less visual control over the entire form.
Therefore, make the input field that is being currently edited prominent and focused.
Image Source
2. Don’t Mask Passwords
While it may seem to be a security concern to show the password as the user is typing it, it is much better for user experience.
As NN/g summarized, “Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.”
Image Source
Caveat: Run Your Own Experiments
Just because something is a “best practice” doesn’t mean it is always the optimal solution. Sometimes best practices fail.
Websites are contextual. What works on one site may not work on another.
In addition, your business context may be different. Who knows, maybe you really need that middle name as a piece of data. Who am I to judge?
So take everything with a grain of salt. Know it’s all been tested and studied, but at the end of the day, all that matters is how it works on your site, and in your business context.
Let this be a guideline, not a mandate.
Conclusion
Form design best practices may work more often than not, but they’re not universal. They’re definitely not silver bullet solutions: you have to test this stuff for yourself.
But in the case that you’re starting from scratch or just beginning to optimize your website, these form design best practices will get you to a good baseline. They’re a good starting point, not where you’ll eventually end up.
All of the guidelines in this article have empirical backing and have stood the test of usability research and many A/B tests. They’re not opinion-based. So starting with this is a safe point to begin.