The Best Form Ever

In the vast majority of cases, a form is the primary conversion point on a website. All the hard work you put into communicating your story or promoting your product comes down to one (hopefully simple) form. Because of this, they get plenty of attention from conversion nerds like us. We analyze how to prevent spam, where labels should be positioned, and everything in between. Through all of this analysis and data we were able to create “The Best Form Ever.”

It’s not all that impressive is it? That’s kind of the point. Keep it simple and follow these 15 rules and you’ll be increasing your conversion rate in no time.

15 rules to improve your form conversion

1. It’s better to have fewer fields

Nobody likes filling out forms, but did you know a single field can decrease your conversion rate by 17%. There are multiple studies that support this and here are a few:

• An 11-field contact form was replaced with a 4-field version, resulting in a 160% increase in conversions
• A 5-field form eclipsed a 9-field form by 34%
• In a study of 40,000 sites a 3-field form outperformed a 4-field version by 17%. This study also shows that complex fields (drop downs, large text area, etc.) have a bigger impact on conversion.

2. Limit required fields

Only require fields that you truly need. In one study changing the “phone” field from required to optional increased conversions by 275%. Be sure to indicate required fields; the common convention is to mark them with an asterisk (*).

3. Use a single column layout

Single column forms are faster to complete and typically feel more organized and clean. Fields in a second column will occasionally be missed completely.

4. Place labels above fields

Top labels are ideal if you want users to fill in the form as fast as possible. The eye can move from a top label to the field in 50ms compared to 240ms for a left label. Placing the labels inside the field (placeholder) can also be a viable option for very short forms (1–4 fields max).

5. Labels should be in sentence case

This is a small one but every little bit helps. Sentence case is preferred over “Title Case” because it’s slightly easier (and faster) ??to follow grammatically. This is especially true for longer labels. “UPPERCASE” should never be used for labels; it’s too hard to scan.

6. Use client-side validation

Don’t make users submit the form first to see what they did wrong. Use JavaScript/HTML5 to show the errors as soon as they move to the next field. Make sure you highlight the field in error and clearly state how to fix the problem. Also, only validate what you really need to. Over-validation can irritate your users and potentially decrease your conversions.

7. Restrict the input format

In place of providing an example of the desired input format (xxx-xxx-xxxx), provide a solution that forces the correct format and takes out any guesswork on the user’s part. One example would be a calendar date picker in place of a plain text field.

8. Apply smart default fields

Reduce the number of fields that a user needs to complete by auto filling them when you can. Use their IP address or GPS to set the country default. If a good majority of the users filling out the form will be located in the U.S. make that the default country selected.

9. Use appropriate input field types

Don’t default to a text field. Set the type for your fields (month, number, email, etc.). This is especially useful for mobile users because it will allow their phone to display a more appropriate input method (a large number-pad for a number field).

10. Display help and dynamic tips

If a detailed label doesn’t quite cut it, provide additional information through a help icon or a block of text that appears when the user is in that field. This is useful when a user is concerned about the type of information requesteed or when what you are asking for is not 100% clear.

11. Use honeypot instead of CAPTCHA

As much as we admire the creator of CAPTCHA it is not all that great if you want to maximize your conversions. In fact, if you use CAPTCHA you could be missing out on 3%–14% of your good leads. We don’t like to push the burden of battling spam off onto our users so we use more passive techniques, such as the honeypot method.

12. Name action items clearly

Making your action items more detailed will make your form feel more engaging and less generic. “Complete Your Registration” is much better that “Submit” because it gives the user a very clean understanding of the action they’re taking.

13. Make your action item stand out

The primary action item should always be very obvious. This is especially true when there is a secondary action item present.

14. Communicate with your user

Make sure you send the user a clear message when the form has been submitted, there has been an error, or additional steps are required.

15. When to use long forms vs a multi-step approach

There is a place for both types of forms. You should determine your approach case by case. The Vancouver Olympics Store ran an A/B test on a two-step checkout form and a single page form. They didn’t have to run the test long to see that the single page form won by a landslide. In this case the single page outperformed the two-step form by almost 22%. That being said, if you are dealing with a much longer form, a multi-step approach could still be viable. If you go down this route make sure the user is aware of how far along they are in the process through a progress bar or showing the total number of steps. Also, keep the earlier steps short and sweet.