Let’s face it – filling out forms sucks. Nobody really enjoys it. Nevertheless, a lot of people endure it because it’s the only way get to the good stuff “behind the form”. The easier and simpler you make the process of filling out your forms, the more conversions you are likely to get.
Here’s a case study where simplifying a 3-step lead gen form increased the completion rate by 30%. I made extensive changes to the form, and in this post we’ll go over all of them one by one. Check out the case study and use it as inspiration for your own experiments.
Client: Danish shipping service website (B2C and B2B) where you can get tailored offers from different carriers. Potential customers complete the form and within an hour or two they receive offers via email directly from the carriers.
Goal: Increase form completion rate and generate more leads.
Optimization hypothesis: By making the form easier to understand and interact with, we can simplify the experience, remove friction, and get more leads to complete the 3-step form.
Research question: Which variant will achieve the highest completion rate – the original or the new form?
Result: The new form increased form completion rate by 30%
The original 3-step form
The new 3-step form
Step One (description)
List of Changes on Step 1:
1. Top-aligned field labels to increase readability and scanning. In the original form, field labels were mostly left-aligned and in some cases top-aligned depending on the length of the field (meaning you had to scan both vertically and horizontally). Top-aligned labels are usually easier to read and scan as they provide better eye path.
2. Tweaked the field label copy so it’s more descriptive and easier to understand. Instead of just writing “Description”, I clarified a little and wrote, “Describe the goods you need to get shipped”, instead of “Total weight” I wrote “What is the total weight of the goods?”
3. Changed open text field to a drop down menu in connection with shipping weight. Carriers need total weight information in order to give the lead a realistic quote. Data showed that potential customers have trouble figuring out the total weight of their cargo. I chose a drop down menu with predefined weight intervals. This makes it easier for leads to chose the right weight interval – which in turn helps carriers with their quotes.
4. Added a big clear CTA button with contrasting color and relevant copy. The original button was a tiny grey thing that only said “Next”. The new button copy includes the “title” of the next step in the form in order to increase clarity and relevance.
5. Marked optional fields with (optional) – rather than marking all mandatory fields with*. Most fields are mandatory and in the original there were red asterisks all over the place. Labeling optional fields only makes the form appear less “crowded”.
Step 2 (pick-up and delivery):
List of Changes on Step 2:
1. Same changes as step 1 in regards to button (design/copy), field labels (alignment/copy) and mandatory fields.
2. Reduced total number of visible form fields from 22 to 6. The original form had an insane amount of labels on step 2. E.g. individual fields for both hours and minutes as well as individual fields for day, month and year. The main thing here was an exercise in “bundling” fields into single drop-downs with fixed intervals and an interactive calendar so you can simply click to choose dates.
Moreover, in the original form potential customers were forced to choose a date interval where pick-up could take place. However, research showed that most people need to get their stuff picked up on a specific date. Therefore it makes sense to offer them the option of selecting an interval – which in turn means that the second date field only shows if you chose an interval.
Step 3 (contact information)
List of Changes on Step 2:
1. Same changes as step 1 and 2 in regards to button (design/copy), field labels (alignment/copy) and mandatory fields.
2. Reduced total number of fields from 6 to 4. The original form asked for zip code/city and address. However, this information is not necessary due to the fact that carriers only need information to contact the lead with a quote (name, phone, email, optional company name field).
3. Aligned fields two and two together next to each other so it’s possible to place all 4 fields on two lines. This makes step 3 easier to overview.
4. Button copy emphasizes the “pay off” of submitting the form – rather than the act of submitting itself. The direct translation of the CTA copy is: “Get free shipping quotes”
Header Changes (headline and step overview)
List of changes:
1. Headline. Direct translation of the original form headline is “Fill out form – it only takes a moment”. Direct translation of the new form headline “Get free, no-obligation shipping quotes”. I also added a sub-header that says, “Fill out the 3 steps and get 4 quotes via email directly from the carriers”.
This headline/sub-header setup makes it possible to present a value proposition to potential customers. Moreover it helps clarify what will happen after you fill out the form and submit it. In my experience telling your prospects what they’ll get and what will happen after they “convert” seems to increases both motivation.
2. Step overview with titles. I added a step overview with titles for the individual steps in order to give potential customers a clear idea of what to expect throughout the process of filling out the form.
Results and Data
We could not run an A/B test between the two forms flows. So in this case we compared data from 90 days leading up the switch with data from 90 days after the switch was made. No other changes where made during the 180 day period and traffic remained consistent and we saw a lift across channels and traffic sources. A sample of 4510 conversions (completed lead forms) was the basis for these numbers.
Of course, there is more bias involved when comparing periods instead of running an A/B test. Conversion rates vary from month to month and traffic and traffic sources can change as well. But let me show you some data that clearly indicates that the new form outperforms the old one.
Here’s the overall development in conversion rate for the website (not just the form completion rate). As you can see, conversions started going up when we implemented the form and has not dropped down to the previous level (good sign).
Here’s data for the relative difference in form completion rates (number of visitors who start on step 1 and complete the process).
And here’s the completion rate for the individual steps in the new form.
What’s Your Experience With Form Optimization?
If you want to share some insight from your own form optimization experiments, I’d love to hear from you. Just leave a comment.
Moreover I’m going to run a bunch of follow-up experiments, so if you have any interesting optimization hypotheses worth testing, please let me know and I might run a test based on your hypothesis!