Project Inquiry

    The more information you provide, the better we’ll understand your project and find the right solutions for you. If you want to share a document or talk to a live person, email us at hello@gravitatedesign.com or give us a call at 888.217.9502. Talk to you soon!

    grav

    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.”

    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.

    best_form_required2. 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.

    anti_captcha11. 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.

    best_form_1pgvs2pg15. 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.

    Want more? Take a look at these links: