How to Create an Online Form that Converts

Written by Jeff on May 3, 2012

Posted in Form Hacks, Form Optimization

Not all forms are created equal. A badly designed form can be the difference between an impression and a final sale. And we all know it, too. We’ve all come across those signup forms or checkout processes that just make us say “Ugh!” or “Why are they asking me for this?” These forms were all designed poorly with only the form owner in mind, and did not consider us, the user. They alienated us by creating unnecessary burdens that might’ve caused us to abandon the form. In the end, a form’s success rate rested solely on our motivation levels in getting signed up or purchasing the product(s). But it doesn’t need to be this way.

By designing a better form, you can actually increase signups or sales. It works by basically “lowering the bar” for all users, so that even those with lower motivation can breeze through a form and complete that signup or sale. In the marketing world, we call that signup or sale a “conversion,” and the process of “lowering a bar” is called “conversion optimization.”

Here are five guidelines to follow when building a form. All of these will help optimize conversions, which in the end will make both form owners AND users happy.

This is by far the most important thing you can do for improving form conversion rates. Every question you ask on a form creates tension or “friction” for the user. The more questions you ask, the more friction these users feel, and the less likely they’ll commit to finishing the form. By keeping a form short and sweet, you help keep the bar low.

Here are a few tips on how to keep your form concise:

1. Essentials Only – For every question or field, you should ask yourself, “Do I need this?” If the answer is, “No” or “Not really, but it’s very nice to have,” then drop it. What’s more important? Getting that specific piece of information, or the final sale?

2. No Profile Information – Some forms ask for “profile information,” such as name, address, sex, etc. Many times this is to complete or update a user profile for demographic purposes. But unless this information is required to make a transaction, don’t ask for it. Let users login to your site to complete this info, or send out a separate form that is optional to complete.

3. Split Forms into Sections – Humans can digest more information if it’s split into groups or sections. So similarly, they can complete a form better if fields are grouped together into sections or split amongst a few pages. However, this is not an excuse to add more fields! This is a last resort to breakup a form that requires many fields. Sections are an optional feature for Formstack forms.

Being clear on a form is often an overlooked aspect. Essentially it means not to be vague or misleading on the form. This comes into play often with Surveys that can have open ended questions. When asking a question on a form, don’t use internal company language or terms, and always go with a basic or “dumbed-down” phrasing. Don’t make your users over-think your questions.

Also, using explanatory or supporting text to help explain a field is always a good idea. This helps remove doubt or indecisiveness in a user’s mind. Formstack fields come with the option of Supporting Text, which will help keep you form fields clear.

Build your forms in a vertical layout. When filling out forms, users will first scan the process and then proceed to fill it out. When doing this, a user’s eye will follow their progress. Making a form too long or unorganized adds a lot of eye strain, adding to overall form “friction.” However, by left-aligning and stacking fields and labels vertically, you dramatically decrease eye movement and processing time for the user. The only drawback to this approach is it greatly increases vertical height, which inturn increases scrolling. However, if you keep your form concise enough, this shouldn’t be an issue.

Formstack by default uses the left-aligned, vertically stacked layout. For more information on this layout and its advantages from other layouts, check out this post by Form-Guru Luke Wrobleski.

Don’t throw a curveball at your users. Chances are you set up certain expectations for users well before they started filling out your form. Be cognisant of those expectations, and don’t throw something unexpected at them in the form process.

For example, if you started a PPC campaign with an ad that said “Find Trustworthy Contractors,” then followed up with a landing page that said “Find Trustworthy Contractors Near You. Get Started Now” but then followed that up with an application process or membership plan for contractor ratings, you’d feel a little peeved, right? Why? Because the expectations were set for a search process, not an application.  By giving users what they expect in a form, you will drive more conversions.

By the way, this also applies to individual questions you ask in a form, not just the overall form itself. Be concise and keep fields and questions down to the essentials. You will avoid the common pitfall of “Why are they asking me for this?”

Today, being “responsive” when talking about web forms typically means that it is designed for any medium (desktop, laptop, tablet, mobile phone, etc). But a responsive form can also mean that it responds to the user and gives the user a more targeted experience. Both aspects are very important when making an conversion optimized form.

Responsive web design basically means that a web page or form looks good and functions well on any device. That means it’s not tiny on a mobile phone or that it doesn’t look bad on a desktop monitor. The best example of responsive web design was first (and still is) the Boston Globe website (shrink the browser window horizontally to see responsive design at work). Having a form that converts relies heavily on responsive design. Since more and more people are using phones to browse the net, that means a larger percentage of your users are seeing the form on their mobile devices. Making sure that your form is responsive to these devices helps keep your conversion rate high. Formstack helps this aspect by giving all users the ability to embed forms with Mobile-Friendly code.

Responsive can also mean adaptable to the individual user profile. For instance, if you wanted to send out a survey to three distinct user groups, you could create one form that populates a different set of questions based on what group they identified themselves as. Or on a lead generation form, you might ask the user if they are interested in a certain product. If so, that could populate more targeted questions that would give you more insight to that user, but wouldn’t create more form friction for other users. At Formstack, we call this Conditional Logic.

All of these factors may seem  minor to you. However, it takes just the smallest barrier to cause form abandonment. Follow these easy guidelines and you’re sure to create a streamlined form process for your users and higher conversions for your company.

Have questions on form conversions? Post them below!