No one likes completing paperwork or filling out endless forms. However, there are several ways you can improve the customer experience on your web form. You want your customers to know that there is a reason for the form, and that they’re receiving value from the form submission. You don’t want your customers to give up and quit, just because of a bad web form.
When customers are so close to the point of purchase, subscription, or information submission, you want the process to go extremely smoothly for them. They need to know you’re not wasting their time, and that there’s a reward on the other side for them. Don’t destroy their excitement with your web form.
In order to give your customers the best user experience possible, you should take a look at this quick guide and make sure your web form is in compliance with the best practices.
How to Optimize Your Web Form?
1 - Keep your form above the fold
You want users to see your web form on your landing page, without having to scroll down. The web form needs to be in an obvious and readable spot. Otherwise, distracted users might never see the form, and you never receive the important information you need.
2 - Your headline = A call to action
Would you rather submit your information to something titled “web submission form” or something titled “Save a puppy here”?
The choice is clear. You need to make your headline a call to action. Make users WANT to fill out the form by dangling a special discount or exclusive offer.
3 - Limit your fields
Studies have shown that the more fields in a form, the lower the conversion rate. Ideally, your form will have 3 or less fields. In fact, forms with 3 fields have the highest conversion rate. As the saying goes, less is more.
4 - Don’t ask for useless information
As Marie Kondo would say, “if it doesn’t spark joy, then get rid of it.”
You must refuse to ask for useless information. Do you really need their middle name? Do you really need to know what elementary school the customer went to? If the information isn’t crucial to your ability to convert the customer, it isn’t necessary.
Asking for useless information wastes the customer’s time, and makes them less likely to complete your form.
5 - Make it easy to read
Keep your fonts, font colors, and background colors readable. This is not the place for yellow comic sans (i.e. this) on a white background. Make your form extremely easy to read.
6 - Make it clear which fields are required
Whether you use a red asterisk *required like so, or use the parenthetical (optional), it’s important to make sure users know what information they need to fill out.
You don’t want users getting frustrated by a submission failure because they didn’t submit all of the required info.
7 - Get creative with “Submit”
Much like the headline should be a call to action, so should the submit button. Clicking “Submit” is boring. Try something else like:
- Reserve your VIP pass to see Adele
- Claim your coupon
- Download the eBook
- Save money today
- Get your car
9 - Third-party seals of approval
Whether it’s third-party security seals (Verisign and the Better Business Bureau), or ratings from independent sites like G2, Capterra, and TrustPilot, they help to build credibility and confidence in your web form.
10 - Consider helpful images
Consider adding images that will increase a customer’s attention and interest in completing the web form. However, do not add images at the cost of the form’s formatting. The form’s formatting shouldn’t be sacrificed to add images.
11 - A/B test your layout
Consider A/B testing your form’s layout. Is there a significant difference in conversion rate? You won’t know until you test and gather data.
If you haven’t tested conversion rates under different layouts, it might be time to try.
12 - Allow autocomplete software
People don’t like typing all of their information in every single form. It’s nice when forms allow autocomplete software to do the hard work for customers.
Autocomplete software will allow customers to complete your forms faster and with less effort, which will only help your conversion rate.
13 - Use several pages for long forms
If you absolutely need to have a long form, it’s best to spread that form out over multiple pages. Spreading long forms over multiple pages decreases loading times, and lessens the chance for a crash. It also has the added benefit of not overwhelming the user with too many form fields at once.
14 - Avoid duplicate fields
Do you really need users to type their email address and then retype it to confirm? No, you really don’t. If you’ve already collected that information, you don’t need to collect it again. Don’t waste a user’s time with duplicate fields.
15 - In-line, user-friendly error messages
If there’s an error in the user’s responses, tell them what the error is, and how to fix it. Don’t wait until they click “submit” to tell them there’s an error. It’s best if you notify users of an error, before they’ve moved onto the next field.
For example, you’ll want to verify that a user has submitted a real email address, before they move onto the next field. Several services offer email verification at the point-of-capture with your web form.
If you don’t tell the user what went wrong, they’re going to get frustrated and quit before submitting their info.
16 - Accept multiple response formats
Allowing for users to submit responses in multiple formats decreases the likelihood of errors for the user. For example, with phone numbers, you should give your users free reign to type their number however they want. Whether it is “(xxx) xxx-xxxx” or “xxx-xxx-xxxx” or “xxxxxxxxxx”, you shouldn’t cause an error over it.
Does the user’s password really need to have an uppercase letter, lowercase letter, 6 special characters, and the last 4 of their social security? Probably not.
As long as you’re receiving the right information, that’s all that matters. Make your forms less exclusionary with input format.
17 - Don’t reset the entire form after errors
Imagine completing a form and clicking submit, only to find out you had an error? Making matters worse, the form reset all of your answers, meaning you need to waste more of your precious time filling out the same prompts.
Please don’t do that to your users. Retain their information after submitting a form with errors. Let them fix the error without having to re-enter the rest of the information.
18 - Get rid of CAPTCHA
You’ve spent hours filling out a crucial form. Now it’s time to submit the information. The only thing that stands in your way is the CAPTCHA form.
Uh oh. That form’s not getting submitted. I always fail at these things, and so do a lot of people. For the most part, CAPTCHA quizzes in your fields are a waste of time. Consider ditching them to improve your conversion rate.
19 - Make the “Cancel” button small and out of the way
Please, for your sake of your sanity and your users’ sanity, don’t make the cancel button large, and close to the submit button.
The cancel button needs to be visible, but out of the way, and stylistically much different than the submission button. Don’t put your cancel button at the bottom of the form. Users instinctively click the button on the bottom of the form. You want that button to be “Submit” and not “Cancel”.
20 - Confirmation message
There’s nothing more satisfying (with web forms) than seeing a nice green check-mark after submitting the form.
Give users that satisfaction, and a confirmation message that they did everything right. They need to know you received the information. Otherwise, users may attempt to submit the same form multiple times.
If you didn’t feel like reading our blog post, no worries, because we still got the click 😆.
Take a look at the top 20 ideas to optimize your web form, here:
- Keep your form above the fold
- Your headline = A call to action
- Limit your fields
- Don’t ask for useless information
- Make it easy to read
- Make it clear which fields are required
- Get creative with “Submit”
- Third-party seals of approval
- Consider helpful images
- A/B test your layout
- Allow autocomplete software
- Use several pages for long forms
- Avoid duplicate fields
- In-line, user-friendly error messages
- Accept multiple response formats
- Don’t reset the entire form after errors
- Get rid of captcha
- Make the cancel button small and out of the way
- Confirmation message
As a general rule, make your forms easy to read, easy to complete, and easy to submit. That will take your web form far, and keep your conversion rates high.