At the heart of almost every website conversion funnel, lie web forms.
Web forms help websites convert visitors into subscribers, leads, or customers.
However, making visitors fill up those forms is a great challenge.
Because, hey, nobody likes filling up forms!
A well-optimized website or landing page can still suffer if it contains poorly designed and developed forms.
Therefore, it becomes imperative to optimize web forms, too.
Web form optimization fundamentally involves minimizing “form-friction” and making forms more intuitive.
This post aims at helping you do just that. It lists out 8 ways through which you can optimize web forms and increase conversions.
1. Use Intelligent Web Forms
Often, websites have a lot of forms that include common form fields. If users fill up multiple forms on a website and encounter the same form fields over and over, they are bound to get frustrated. Some of them might even leave the form.
What if you can hide the form fields that users have already filled from appearing on the rest of the forms?
Well, you can.
There are various tools in the market that empower your forms with this capability. Such forms are popularly known as intelligent or smart forms.
Smart forms use conditional logic to show customized forms to users based on their history of form submissions.
Some smart form providers, like Hubspot, allow you to track users that convert on multiple forms and help your segregate them as serious prospects.
Here’s something related. You probably have already heard of Progressive profiling. Progressive profiling is what you can do with intelligent forms. In Hubspot’s words,
“It allows you to set up iterative forms that enable you to designate which questions appear based on what you already know about a particular lead. That way, every time a lead fills out a form, you are progressively collecting valuable new information about them while keeping your forms short and easy to complete.”
Web forms by Formstack and a few others even provide a “social autofill” feature. This feature pulls in the details of form visitors from their social media profiles. Formstack claims that websites using social autofill have improved conversion rates by up to 189%.
2. Offer Rewards to Users
Visitors fill and submit forms when they think they’ll get significant value in return. The value can be in the form of anything: a helpful content feed, access to a useful tool, or a product purchase.
If your web forms aren’t getting many conversions, chances are that you aren’t offering sufficient value.
To make your offer more compelling, provide better/additional rewards to users after they complete a form.
Let’s refer to our own case here, for example.
A few weeks ago, we updated the subscription form on our blog.
The new form offers a free ebook to all blog visitors who sign up. As expected, this form has provided us with a higher number of subscribers (170%), as compared to our past forms that didn’t provide any freebies.
Here’s another instance:
H&M clothing brand rewards a 20 percent discount coupon to users that sign up for its email newsletter.
So, if newsletter features like “latest fashion news” and “exclusive offers” aren’t compelling enough for users to sign up, the free discount coupon nudges them to do that.
3. Use Contest Forms
Different kinds of forms offer different conversion rates. Some forms tend to deliver higher conversions than others.
As per the Form Conversion Report 2015 published by Formstack, contest forms offer the best conversion rate.
As per the report,
People love having a chance to win. Which means contest forms are a great way to capture new leads and engage with your audience at the same time.
The report also suggests promoting contest forms on social media for an even better performance. It mentions that often conversion rate more than doubles when users integrate their forms with their Facebook pages.
This is especially noteworthy for eCommerce stores and other companies working in the B2C space. Social media can offer greater exposure to their contest forms.
Example: Feedmark.com, an equine health supplements website, used a contest form to generate leads. Below is a screenshot of their form page.
It’s worth noting that in addition to lead generation, Feedmark used the form to produce user generated content (UGC) as well.
4. Put As Few Fields As Possible
Your website forms must be lean; they should not contain unnecessary form fields.
If you will never post anything to your users, don’t ask them to fill their full address. If you will never call them, don’t ask for their phone number.
The objective is to minimize the efforts users are required to make in completing and submitting forms.
There are various case studies that demonstrate how reducing the number of form fields lead to increased conversions.
An example from Marketo:
Moreover, you need to take care of your mobile users, too.
Since mobile has become the most widely used platform to access the internet, there is a good chance that many of your visitors use mobile. However, with small screens and touch enabled keyboards, filling forms on mobile devices proves to be a hassle. Naturally, mobile users prefer forms that are concise.
Nonetheless, it is important to mention that the “safe” number of form fields varies for different form types.
While a contact form will (probably) not be effective with 11 form fields, a lead gen form with the same number of fields might work just fine.
Look at the below chart that shows the average length and conversion rates for respective form types.
5. Be creative with Lengthy Forms
So, you’ve created a lengthy form and you’ve decided that you can’t trim it down.
How do you optimize the form now?
You get creative.
There are a few tricks you can employ to make your lengthy forms fun and engaging. Such tricks can even help you outperform short forms.
Use Multi-step Forms
Break your lengthy form into multiple small forms, and place them as separate steps.
While lengthy forms can often overwhelm users, multi-step forms can help them digest the information with ease.
The Formstack report mentions that multi-step forms can almost triple the conversion rate of single page forms!
Of course, there are numerous ways to fine-tune multi-page forms, too. We covered some of them in a case study, where Tinkoff bank improved conversions on its multi-step form.
For instance, Tinkoff Bank added a progress bar to its credit card sign up form, which resulted in higher conversions.
Let Users Save Half-filled Forms
Letting users save half-filled forms enables them to complete the forms later.
For users that would have left a form because of its length, the save feature allows them to complete the form later and, consequently, reduce form exits.
Use Horizontal Layout
You can use a horizontal layout for some of your form fields.
For instance, if your form contains checkboxes or radio buttons, you can place the choices in a single line horizontally. This will make your form appear shorter.
There are other quirky ways to make your forms fun. Check out this Smashing Magazine article that mentions some interesting ideas.
6. Promote the Form During Peak Time
Targeting the right users to fill up forms is an essential practice to improve conversion rates. Similarly, it is also important to target users when they are most likely to convert.
You might be promoting your web forms using different tools such as social media, blogs, emails, online ads, etc. It’s a good idea to study your past campaigns and identify the time intervals where you recorded the highest number of conversions.
The peak time can be identified as specific days in a week, or even hours in a day.
If you don’t have sufficient enough data to jump to a conclusion, use these charts from the Formstack report for reference.
The below chart displays the peak submission time for different form types.
The below chart displays the peak submission time for forms across different industries.
7. Test Form Layouts
The importance of form layout cannot be overemphasized. Form layouts impact the way users scan and understand the form. Which means it impacts conversion rate.
Consider the findings of Agnieszka (Aga) Bojko and Robert M. Schumacher, in their paper titled “Eye Tracking and Usability Testing in Form Layout Evaluation“:
They tested 5 different form layouts, as shown below
Here’s how they summarized the findings:
Observable performance in the form of completion time and accuracy was not affected by the form layout. However, eye movement and user satisfaction measures pointed to forms 1 and 2 as the most satisfying to the users and least demanding in terms of cognitive processing, and to form 3 as the most efficient in terms of visual scanning. On the other hand, the study confirmed known concerns about forms 4 and 5, which demonstrated low user satisfaction, low scanning efficiency, and, additionally for form 4, high processing demands.
Baymard advises against using multi-column layouts based on a usability study they conducted in 2011.
So what do you take back from all these studies? Different form layouts offer different conveniences. It is upto you to figure out what conveniences your specific set of users need the most and build your form layouts to reflect that.
Let’s also talk about this other sensation in town — Mad Libs layout.
OK. First things first. What is Mad Libs?
Wikipedia defines Mad Libs as a phrasal template word game where one player prompts others for a list of words to substitute for blanks in a story.
So, how do you use a mad libs game style for your web forms?
This is how the team at Vast.com transformed their vehicle enquiry form to mad libs style.
A post by Luke Wroblewski reported that Vast.com increased its form conversion by 25-40%.
Another case study by Evergage reported that the narrative style increased a form’s conversion by 50%.
Well, of course, this shouldn’t compel you to implement mad libs style on all your forms right away. You must make sure if the form style actually helps you improve conversions, using A/B Testing.
Just to emphasize the point further, here is a case study by Kalzumeus that reports a 22% decrease in conversions for a form using mad libs style.
8. Test Your Form CTA Copy
The submit button copy is one of the lowest hanging fruits in web form optimization.
Our own archive of A/B testing case studies has ample cases where changes to the CTA button copy have led to a rise in conversion rates.
For example, Provident Resorts boosted the clickthrough rate on its elaborate reservation form by over 9%, just by tweaking its button copy.
It’s advisable that you, too, should A/B test different button copies on your forms to find out which one works best.
The Formstack report offers a few pointers on testing your button copy:
Keep Your Button Copy Short
Formstack has found that the top 10 converting buttons contained two words or less.
Use Action Words
Use words that denote action. A simple “Next” or “Continue” can prod users to navigate through multi-step forms.
For example, adding a single word after “Submit” that is specific to the form can help improve conversions.
Here are the top 10 converting buttons by Formstack:
Optimize Your Forms Now
Try these methods to create variations of your website forms, and A/B test them. Do let us know if you improve conversions.