We originally published this post back in 2015. Since a lot can change in the online world in two years, we’ve published an updated version for 2017.
The purpose of an online form is to collect information from site visitors, so it’s always baffling when websites make it difficult or confusing for visitors to share their information. If it requires a Herculean effort for your users to fill out a form, they’re not going to do it, and you’re going to lose out on a conversion and/or valuable customer data.
So how do you cut down on user effort and make your form super appealing? You could deploy robot assistants to fill out the form while customers dictate… or you could use the tips below to improve the user experience.
Make Benefits Clear
Nobody’s going to fill out a form just because they think it will make employees at your company happy—you need to make it clear that the user is getting some direct benefit that outweighs the cost of submitting their information.
If space allows, briefly outline a few reasons someone should complete the form. For an ecommerce site, these might include a faster checkout process or exclusive email offers. For a B2B site, these might include access to original research and industry insider information.
Keep Fields to a Minimum
What sounds better: filling in 3 fields, or filling in 15? Unless you’re the rare online form enthusiast, you’ll want to fill in as little as possible, and so will your customers. If your online form currently rivals War and Peace in length, it’s time to look at what you can cut out.
Avoid optional fields whenever possible. Very few users are going to fill in more than the bare minimum, so anything optional tends to be a waste of space. Stick with only the fields you need in order to meet your goals with the form: in some cases, this could just be a name and email address.
Of course, there are exceptions to every rule. For example, if you’re using a simple form for lead generation but find you’re getting too many unqualified leads, you may need to add several fields and ask more targeted questions to hone in on the right audience.
If you do have a complex form that you can’t cut down, try grouping fields into subsections like ‘Account Info’ and ‘Contact Info’ in order to make the form less daunting. You can also break the form up into manageable steps, but if you do this, make sure you use a progress bar so that users know exactly how many steps they have to complete.
Use Real-Time Validation to Reduce Errors
Have you ever completed a form only to hit the submit button and see a message in red text saying you’ve made an error? It’s a frustrating experience and one that can be easily avoided if you use real-time validation.
With real-time validation, a user is informed that they’ve made an error as soon as it happens. For example, if they enter their phone number with dashes, they might get a notification next to the field telling them they need to remove the dashes. It streamlines the form fill process and saves the user from hunting down a single error after they’ve completed the entire form.
Avoid Boring Call-to-Action Buttons
A call-to-action button that just says ‘Submit’ doesn’t tell a user much, other than that they’re sending their information off to your company’s database. Give users a reason to click that CTA by customizing it so that it tells them what they’re getting. If they’ve filled out this form to access your new eBook, the CTA might say ‘Download Your Free eBook’.
It’s also important to make the CTA button easy to see. It should ideally be a color that’s distinct from the other colors on the page and surrounded by plenty of white space.
Keep Mobile Users in Mind
Over three-quarters of American adults now own a smartphone, so it’s more important than ever to think about mobile users when designing your forms.
To make your form as easy as possible to fill out on a mobile device, use smart defaults whenever possible. If you need a user’s location, you might be able to populate that field based on GPS data. If you need their language, populate that field using their browser’s default language.
Labels should be directly above each field rather than to the side. On a narrow smartphone screen, left-align labels leave less space for the field itself, and users may not be able to see their entire input (making them more likely to make errors).
Remember that mobile users are working with a touchscreen. Leave enough room between fields so that a user can easily touch and activate one without accidentally activating another element of the form.
A/B Test Your Forms
Think your online form looks good? There’s still room to fine-tune it using cold, hard data. Choose a variable to test (such as the CTA button) and then create two versions of the form, changing only this one variable. Your digital marketing team can help you run both versions so that you can see which gets more submitted forms. Keep testing other variables one at a time in order to hone in on your optimal form.
Need help with your online form design? Our Leverage team offers web design services for ecommerce and lead generation businesses, and we’d be happy to talk.