There’s no question that web forms are one of the most important elements of your website. They’re used to capture payment info, user signups, email address, and all kinds of important information.
For this reason, you should be spending a lot of time on the design of your web forms to ensure they’re converting well. Doing so will mean more leads, more customers and more revenue. In fact, the case studies highlighted in this post reported increased conversion rates between 10% – 90%.
Now that you’re convinced, let’s take a look at the 8 killer ways to design higher converting web forms.
Remove Any Unnecessary Fields
Have you heard the saying “less is more?” Well, the same holds true for web forms. The fact is, nobody wants to spend a lot of time filling in a form. Therefore, you should only capture what’s absolutely necessary.
For example, if you have two separate fields for first name and last name, consider combining them into one name field. For contact forms, it might make sense to remove the ‘subject’ field. Whatever the case may be, try to ditch all the fields that aren’t absolutely necessary.
Visual Website Optimizer found that removing 3 form fields increases customer registrations by 11%. When users want to purchase Bootstrap themes & templates on BootstrapBay, we only require 3 fields for users to signup. Everything else can be updated in their account settings once their account has been created.
Use In-line Validation
There has to be nothing more frustration than submitting a form and getting bombarded with all kinds of errors once submitted. Having to go back and correct a bunch of these errors all at once can create a lot of friction.
Save users the pain by using in-line validation. This will enable users to fix errors as they go and will greatly increase the chances of completing the form.
Use Clear Labeling & Don’t Rely on Placeholders
This may sound obvious, but you’d be surprised just how many websites have forms with confusing labeling. Expedia once added an optional “Company” field which lead to serious confusion among users and cost the company nearly $12M in sales. Avoid this mistake by being as clear as possible with all your form labels.
Secondly, avoid using placeholder text as the only form of labeling. This can lead to confusion when users start making changes to inputs then forget which field is what.
Make it Mobile Friendly
With so many people on mobile these days, it’s super important to have a mobile friendly web form.
The most important thing is to make sure the sizing and appearance is appropriate. Deploying a responsive design will ensure that your web form is resized appropriately on smaller mobile screens. The last thing you want users to be doing is pinching and zooming in on their phones in order to fill in the form.
Another thing to be cautious of is fields that have a huge list of options. Have you ever been asked to select your country and had to scroll through nearly 200 options? Painful.
Instead, try using the phone’s GPS functionality to locate the user’s country instead. This is just one of many ways to make it easier to fill out forms on mobile.
Invoke Emotion in Your CTA Text
Many web forms use the same standard text for buttons such as ‘submit’, ‘send’, or ‘sign up.’ Because we’re so used to seeing these common call-to-actions, they don’t invoke any emotion.
One of the best ways to invoke emotion is to write your buttons in the first person. Unbounce increased their conversation rates by 90% by using this technique.
When appropriate, try writing your call-to-actions in the 1st person or use something a little non-traditional. Here are some examples you might want to try:
- Sign Me Up
- I’m In
- Add Me
- Start My Free Trial
Noah Kagan uses this technique on the OkDork blog.
Include Links or Tool-tips for Extra Help
The majority of web forms are pretty easy to fill out and don’t require much clarification. However, you should always include links or tool-tips for extra help in case your users get stuck.
When people are stuck on a particular field, they’ll often just leave instead of asking for help. Being proactive and including extra help will reduce bounce rates and keep your users on track to complete the form.
If your website is a little more sophisticated, you can try inviting the user for a live chat session if they’ve been stuck on a particular form for too long.
Explain the Next Steps After The Form is Submitted
A big mistake when designing forms is to neglect what happens after the form is submitted. Have you ever submitted a form without knowing whether or not it was successful or what happens next? It can be pretty frustrating.
After your users submit their form, two things should happen so they’re not left in the dark:
- A confirmation that the submission was successful should be displayed very prominently.
- Explain to the user what the next steps are. Will they receive a confirmation email? Can they login immediately? Whatever the case may be, tell them what will happen next.
A/B Test Your Button Sizes & Colors
One of the easiest things to test is the size and color of your buttons. This can be a very worthwhile exercise if you have a lot of traffic coming to your site. Hubspot found that red buttons outperformed green buttons by 21%.
This isn’t to say that red buttons will always be the best converting color. The takeaway is that different colors will do better than others depending on your website. Make sure to test and find out which one works best for you.
As you can see, the design of your web forms play a very critical role in your business. Implementing some of these techniques can be a simple way of maximizing the conversion rates on your website.
However, because the science isn’t always perfect, you should always perform split-testing before implementing any permanent changes across your site.