Forms are basic business interaction tool. We use them every day when we interact with businesses online - registration forms, contact forms, purchase forms, service booking forms, price quote forms, and many more.
In this post I will talk about different ways you can increase the conversion rate of your forms - meaning forms that people complete filling-in - and reduce forms abandonment. Those are things that I've learned from my experience and from data seen in different sites.
1. What is the value in filling this form?
Filling-in forms has high cost in the eyes of the users - both in terms of the data that they are being asked to provide, and in terms of the time that they estimate it would take them to fill in the form. Users invest this cost just in order to get the value in the other side of the form - the product that they want, get support, book a hotel room, etc. So this is a simple equation - the perceived value should be higher than the perceived cost.
Most of the tips in this post will talk about how to reduce the perceived cost. But you should not forget about increasing the perceived value.
If this is a support contact form, make sure you remind users about your support SLA.
If this is a hotel booking form remind users about some of the fun things they will get in your hotel.
If this is a purchase form, add a quote from another user that talks about how much he likes the product.
If you are conducting a survey you can provide some benefit to those who complete your survey, or at least show them how this helps you improve the service that you provide to them.
2. Less is more
Every question that you ask the user to fill-in increases the cost and therefore increases the form's abandon rate.
For every question that you add, you should ask yourself a few important questions:
Is this question really necessary in order for you to provide the promised value to the user?
Can the user understand the value of this question to himself?
Is this question necessary?
What happens if the user fakes an answer to this question? For example, if you ask users for their phone number and they fake a number - will you still be able to provide the service? If the answer is yes, you should consider removing this question from your form.
Can the user understand the value?
For example, when you ask the user for their email address in a contact form, they usually understand that it is needed so that you can get back to them. However, if the same contact form appears for a user that is currently logged-into your site, filling this could be an unnecessary burden since you probably already have their email address in your system.
Another way of reducing the number of fields is to avoid unnecessary breaking of fields into multiple fields:
Instead of First name and Last name fields use just Full name
Instead of breaking address into country, state, street, etc, use Google place autocomplete
One last common burden designers put on users is asking them to repeat their password or email. This has no value since users usually just copy&paste the repeating email field, and as for the password users don't get it wrong so often and there's an easy reset-password flow for those who do.
3. Provide defaults and autocomplete
If you can guess the answer to a question that you ask your users, provide a pre-filled answer so your users can just skip to the next question. Few examples:
If you ask for the user's country or state you can prefetch it using ip-to-location service such as ip2location
If your user is logged-in, prefill their name and email in a contact form, or even hide them completely
In a product order form, prefill the quantity to 1
For common questions such as name, email and address make sure your form supports autocomplete. Most users have these details saved in their browser and autocomplete allows them to quickly get to the finish line of your form.
4. Keep one-column forms
Forms are mach easier to scan and fill when they are in a single column. Multi-column forms often look intimidating and their perceived cost is much higher. If you have 2 related short fields you can put them one next to the other, but the overall layout of the form should still be single column.
To evaluate the cost of filling your forms, users quickly scan it before they fill it. Make it easier for them to scan the form by placing related questions together and group multiple fields under meaningful section headers such as Personal Details and Payment Information.
6. Breaking into steps
Long forms prevent many people from even starting filling them. If your form must be long break it into multiple steps so it is easier to digest. Make sure you have progress indicator that shows how many steps are left and what are those steps (address, payment details, etc)
7. Conditional steps
If some of the fields are only needed in some cases, don't show them to users for whom it's irrelevant. Instead use conditional steps and only make the relevant users go through this step.
8. Less clicks, less typing
Every additional click or keystroke that your user has to go through increases the chance of abandonment. Use field types that require less typing and clicking. Few examples:
Avoid drop-downs that require 2 click in order to select a value. Use radio buttons or toggle buttons instead
Use numeric spinner buttons for things like quantity that can be set using the mouse
Use sliders for range or numeric values
9. Keep friendly language, guidance and feedback
Try keeping conversational, guiding language and avoid imperatives. That being said, keep your texts short so people can scan through it quickly.
One place where designers often overlook the used language is error messages. Don't make your users feel guilty for their bad inputs. For example, instead of writing Bad email try something like Did you mistype your email address?
Wherever possible, provide immediate feedback and don't wait till submit. If someone fills invalid email address, you can immediately tell them that once they leave the field. However, you should not block them from moving on if they wish to fix this later. Also be careful not to mark the field as invalid while they type since this is often a frustrating experience for the user.
As mentioned before, your form should be easy to scan through and with minimum effort to figure out what is requested in each step. To do that:
Keep clear labels above the field, and make sure that they are close enough to the field so it is clear where do they belong. Having the label above the field rather than on the left allows longer labels and improves scannability
Depending whether you have more optional or more required fields, mark the ones that you have least clearly. Preferably with the word optional or required rather than some green or red asterisk which not all users understand
As You Can See in This Line, Title Case are Much Slower to Read Than Sentence Case. This is because your brain read through pattern matching and not by actually reading every letter. Therefore use sentence case for all your labels rather than title case or all-caps.
Don't distract the user from completing his task. Postpone anything that is not absolutely vital for this form till after the form completion. For example, don't try to up-sell by offering complementing products before the checkout is completed. You can offer those immediately after a successful checkout.
11. Use the right field type, pop the right keyboard
HTML5 introduced many new field types which are broadly supported by most browsers. One of the key benefits of using the right field type is that on mobile it shows the right keyboard. For example, phone-pad for phone numbers or numeric fields, "@" key for email fields and search icon instead of enter for search fields.
As much as more and more traffic is moving to mobile, users still prefer desktop to fill in forms. Having your form more mobile friendly will increase the conversion rate of your mobile users drastically.
12. Keep your form accessible
Forms should be accessible to people with different kinds of disabilities. They should be friendly to screen readers, navigate-able using keyboard only, support larger fonts, etc.
To answer all these you must make sure that you use semantically correct HTML. That means that labels are crafted using the <label> tag and correctly point to the field they relate to using for="input-id" property. Tab order should be sensible and field type should be correct. Read the following two links to learn more:
13. Increase the clickable area
Increasing the clickable area is especially true for mobile users, but nonetheless important for desktop users. Here are few things you could do:
If you followed the previous section then you already know about the <label> tag. One more benefit of using it is that users can click it to focus on the field or to check/uncheck checkboxes and radio buttons.
Make sure that you use large-enough font size. 16px is the minimum, and on mobile don't be shy to go up to 21. This helps both for readability and allows for easier navigation. Font size smaller than 16px will make iPhone and some other mobile browsers zoom into the field, which breaks the native layout that you designed for your users.
Provide large clickable images or icons instead of radio buttons. For example, if the user has to choose between few product colors, show them actual images of the product in those colors so they can click the right one
14. Don't make it harder than it has to be
Unfortunately I've seen too many cases that form designers over-validate field values. Few examples:
Using the regular expression [a-zA-Z0-9] to validate names assumes that people don't have any accent letters in their name or dashes in their last name, which is simply not true
Assuming that phone numbers have specific format, use or do not use spaces or dashes, makes it hard for many people that are used to write their phone in a certain way to provide it. If you get a number with spaces or dashes, you can strip it down on your server if you need it in a certain format. Don't put the burden of providing the right format on your users.
Email addresses are possibly far more complicated than you'd expect. The RFC allows addresses like joe.$%&‘*+–/.email@example.com Using a simplistic regular expression can sometimes block real users that happen to fail on your too-tight validation
You can use light validation that is more permissive even if it means that in some cases you'd get invalid values.
15. Allow users to continue later
Users will not necessarily be able to complete your form in one session. Sometimes they will want to come back themselves, and in other times they will need some reminder or incentive.
Try collecting the user's contact info first so you can send them a reminder email to come back and complete the form. Many users would return if presented with such a reminder email
Save the form data locally while the user fills it in so they can return to it and don't lose their data even if they refreshed the browser. You can use a library like garlic.js to achieve that
16. Make the user feel safe
Users want to know that their data is safe. If they feel they might be spammed, they will almost never provide their email address. If they don't trust a seller, they will not provide their payment information. Reassure users that their data is safe:
Make your site available over SSL (HTTPS). Users that see the browser's green lock feel better about sending sensitive data.
When you ask for email or phone number, let the user know what it will be used for. For example "We will only use your email to contact you regarding your order". Try avoiding using negative words, even if used in positive manner. The sentence "We will never spam you" might have negative impact on conversion simply because the word spam is there.
If applicable, make sure you are GDPR compliant, and let your users know about it
Some last words...
Test, rinse, repeat
If you followed this far you probably feel that there are a lot of things you could do, but perhaps you're not sure how they will impact your conversion rate. You are probably right with that feeling. Any change that you make may have positive or negative impact on your conversion rate. Therefore it is highly advised that you make gradual changes and keep measuring the result. Best way to do that is by using A/B testing system that allows you to measure the performance of 2 alternate versions of your form. If the results are positive, keep it. Otherwise drop it, and move on to the next change.
This might look like a harder thing to do, but it ensures that you go in the right direction.
Give our form builder a test drive
form-builder is a text base open-source form builder that generates mobile friendly, accessible, good looking forms. Even though there are things it does not yet support like some field types and multi-step forms, it does provide a very good starting point for your forms. You can use it and customize the form anyway you like.
Give it a try and let us know what you think.