The Objeqt Optimization Blog:

Actionable Posts to Help You Improve Your Conversion Rates

Whether you’re just getting started with conversion rate optimization or you’re an old pro, check out our library of how-to-posts, guides, and more. Click the topic you’re interested in now!

Fix Your Forms to Spur More Sales: Form Implementation & Analysis

Form implementation

Published by

November 27, 2017

We constantly encounter forms while browsing the web. They require us to fill in data, provide our email address, our real address, or other critical data.

The role of forms is, at its base, to allow website owners to get to know their market — to contact customers, receive payments from them, and deliver the goods they buy.

And along with being a critical part of web infrastructure, forms are also one of the greatest friction points in the overall ecommerce experience. Frequently, they require giving away sensitive data, such as credit card numbers, home address, and so on. No wonder people feel apprehensive when filling out forms.

Overcoming this friction is an important task. Why?

Because if your customer fills out a form on your site, the likelihood of their eventual conversion is much higher. This is the consequence of a psychological pattern called sunken cost fallacy. Essentially, if someone devotes time and effort to filling out a form, they will be less likely to abandon that effort.

In a widely publicized and quoted study, How to Optimize Contact Forms for Conversions, the main recommendation was to reduce the number of the fields in a form. True enough, in the case the researchers analyzed, form-field reduction turned out to be the solution.

But extensive testing in multiple other cases revealed that the solution is not always that simple. The eventual answer that many practitioners (including ConversionXL, Unbounce, and others) discovered was that form friction largely depends on context.

Whether or not a visitor is willing to fill out a form directly depends on that visitor’s expectations, as well as the form’s length and complexity.

For example, when purchasing a custom, high-cost item or completing a job application, visitors may actually expect to have to fill out a long form with specific data. And if their expectations aren’t met, they may even react with suspicion!

As with everything, the answer is “Test, and don’t assume the best practice applies to your specific case.”

Amazon’s bare-bones, low-friction registration form
Amazon’s bare-bones, low-friction registration form

You can see here that Amazon only asks for a user’s name and email address for registration purposes. They know that all other necessary data, including payment info, will follow if visitors become buyers.

On the other hand, here’s a longer form that also serves its purpose. This one is from JCB, a company that sells construction machinery. JCB is interested into getting leads — and qualified leads, at that.

JCB’s lead-generation form
JCB’s lead-generation form

Since JCB is only interested in serious, qualified leads, they require much more information, including the name of the company asking for a quote. This makes sense, since they don’t want to waste their marketing department’s efforts on pursuing unqualified (AKA unlikely to purchase) leads.

Friction-reducing best practices

Having said all of that, there are still some general principles you can apply to reduce friction and increase your form conversion rates.

One best practice is to include only as many fields as are absolutely necessary. Including more fields increases the amount of friction that form-fillers will need to overcome, and will cause more of them to abandon the form.

Another important best practice is to reduce the amount of work the visitor needs to put into filling the form. There are many ways to do this: for example, you can add dropdown menus for country, state, year of birth, and other data fields that have a small or finite pool of possible responses. In some spots, radio buttons or checkboxes can be helpful.

Also, pre-fill or include a default answer for certain fields when appropriate. This further reduces your visitors’ burden, and thus eases friction. For instance, here’s what Google does with its registration form:

Google Registration
Google Registration Form

Google recognizes the country from which you’re browsing, and immediately inserts the correct values in the “Location” field. Knowing this, it also updates the “Mobile phone” field with the correct country code.

One note: Avoid putting the description of the data required inside the form itself. For example, if you want your visitor to give you their name, put the “Name” descriptor above or adjacent to the field. Don’t put it into the field to be replaced as the visitor starts to type — since people may forget what you were asking when they start typing!

Another useful method you can employ is to break the form into two or more pages. If you truly require a long form, this may be the best way to increase the likelihood of conversion. Be sure to provide your visitors with a visual indicator of their progress. Removing uncertainty in this way encourages them to complete the process and sets a clear expectation for when they’ll be done.

Typeform.com’s referral program offers an option to create nice-looking forms with multiple pages and an indicator of progress.

A user-friendly form
A user-friendly form

Common problems with forms

Bryan Eisenberg, one of the original practitioners of conversion optimization, sorts form issues into three main categories: failure to address and reduce fear, failure to build trust and credibility, and failure to reinforce benefits.

Below are some questions to ask to ensure you don’t fall into these common conversion-killing traps.

1. Failure to address and reduce fear

Does your form ask for more information than necessary? The longer your form gets, the less likely it is that people will fill it in, unless they are really motivated. If it’s a simple contact form, you can almost always skip things like “home address”.

Do you ask sensitive questions? People will hesitate to give away private information for fear of abuse, fraud, and theft. You must establish credibility and ensure that collected data will not be exposed to unwanted third parties.

Does your form look intimidating? If your form is a wall of fields, it will visually intimidate your visitors. Try to reduce the number and density of fields, or break the form into multiple parts.

Does it create doubt and uncertainties? If you go out of your way to get information from visitors, or ask questions in your form that have no clear bearing on what visitors get in return (for example, you ask for a phone number and home address when giving away a free PDF file), don’t be surprised when people fail to fill it out.

Do you handle errors graciously? Point your visitors directly to any errors made in filling out the form. Don’t just generically, infuriatingly say, “There is an error.” Indicate where the mistake was made, and show your visitors how to correct it. Ideally, auto-validate fields as they are filled out and give a clear indication of the expected format — for example, show the “mm/dd/yyyy” format if you require a date.

2. Failure to build trust and credibility

Do you establish yourself as credible and trustworthy? If your website does not feel trustworthy and your offer lacks credibility, no matter how you design or present your form, it will not convert.

Is it obvious that your browsing environment is secure? Make sure your page is using the https:// protocol and that appropriate security badges are featured on form pages, especially if you require payment data like credit card numbers.

Do you leverage trust messages at the point of action? For example, provide relevant messages at each step of your conversion process and don’t cram in unnecessary messages that burden the process. For example, put payment security information on the step where you require payment info.

Do you assuage uncertainty as to why you’re asking for certain info, and explain what you’re going to do with it? Clearly explain your privacy policy, and assure visitors that you won’t share their data or use it for anything other than the intended purpose.

3. Failure to reinforce benefits

Remind your visitors what tangible benefit awaits them if they fill the form out. What will happen next? How will their life improve?

Is your message relevant to the ad or offer to which your visitors may have responded? Relevance can build trust, so make sure your copy and design are cohesive across the different elements of your marketing funnel.

Do you give your visitors sufficient payment options? Offer a third-party payment service, such as PayPal.

Are your forms user-friendly and simple to fill out? No one wants to squint at a form whose fields are packed too tightly together or displayed in 8-point font.

Solving for all three of these major issues is a must. Failure at any point will affect the form’s overall submission (AKA conversion) rate.

How to analyze your forms

Begin analyzing your form the moment you create it. Carefully ask yourself the questions above as you add or modify fields, so you can be sure you’ve created a functional form that’s as frictionless as possible.

Take, for example, a lead-generation form for a service or SaaS business. If you were making one of these, you’d need to consider what information you truly need and what questions will help unqualified leads self-select themselves out of the funnel.

In this case, you may want to include some fields on your form that will dissuade unqualified leads from completing the form — like asking for a budget range that begins well above $0.

But balancing friction and motivation can be really hard. That’s why it’s vital to carefully monitor form interaction on your website. Just knowing whether or not the form was submitted won’t cut it. In fact, it’s even beneficial to know the timing of each field being filled out, and when users quit.

This information can provide insight as to which fields in your form create most friction, and what questions should be rephrased or cut entirely. That’s why most form-tracking tools feature a timer that shows users’ hesitation to fill out a given field.

Conversely, a high completion rate for your forms may indicate that your form could be even be longer, and that you might be missing an opportunity to collect more data on your prospective customers. In this way, form analytics tools help you establish that delicate balance of friction and motivation.

Helpful tools for form analysis

So now that you know the methods used in form analysis, let’s check out some tools that can help.

The first tool to look at is Google Analytics — and often, you don’t need to look further. Establishing form-tracking in Google Analytics is relatively easy. If the forms are deployed in a standard HTML implementation, then adding a tag through Google Tag Manager is as simple as adding a new tag, selecting “Universal” tag, and tracking the type of event.

Using a trigger, you can easily set up form submission tracking on your website
Using a trigger, you can easily set up form submission tracking on your website

In the fields, simply input how you want your form to be reported and add a trigger. There is a predefined form-tracking trigger in Tag Manager that can be used with standard HTML form implementation.

However, since this setup involves making a tag for every form and carefully defining triggers to avoid triggering a tag on wrong forms and messing up the tracking (which invalidates any data collected), it can get fairly tedious.

Tracking gets a bit more complicated if your forms use Asynchronous JavaScript and XML, aka AJAX. These forms are not easy to track, since they are usually filled in and completed within the same page using a layer.

This is not easily interpreted by Google Analytics, and to add salt to the wound, the data layer — a crucial element in how Google Tag Manager tracks events — gets refreshed every time this happens, removing any variables stored within it.

Of course, there are solutions. They generally involve creating custom JavaScripts that populate the data layer with event variables after the form is completed. Google Tag Manager can then interpret these variables and actually track the form events.

And fortunately, most plugins for forms that use AJAX also feature easy-to-use tracking enabled through the server interface. For example, the popular Gravity Forms plugin for WordPress uses AJAX forms with this type of built-in tracking.

The results from this type of tracking are displayed in Google Analytics reports as “events”.

But as you might guess, there is very little in the way of visualization with this solution.

And often, having a visual representation may make all the difference in the speed of analysis. Humans are visual creatures. We’re faster at interpreting images than tables and numbers. That’s why there are quite a few tools made specifically to track forms and display the results in a more visual format.

The first of these are the mouse-tracking tools, such as MouseFlow or HotJar. All of these tools offer some kind of form-tracking. (They also track cursor movement, clicks, scrolling, and session recordings! Those features are all valuable, but form-tracking is the feature we are interested in right now.)

HotJar only offers tracking for the standard HTML-type forms. You just add the URL of the page containing the form, and the tool does all the heavy lifting for you. Pretty soon, you start receiving the tracking results, which look like this:

A sample HotJar report
A sample HotJar report

MouseFlow is even better in this regard, since it’s able to track AJAX forms virtually automatically. You just go to the Form menu and follow the simple installation instructions.

Once completed, MouseFlow will show all the fields of the form it’s tracking:

An example MouseFlow report
An example MouseFlow report

These tools are mainly used for mouse-tracking, and offer form-tracking features as an addition, While they’re often good enough, these features are, after all, afterthoughts in tools created for another purpose.

There are dedicated form-tracking tools, so let’s take a look at those now.

The first and most widely used is Formisimo. Formisimo focuses solely on form-tracking, using a script that is implemented on your website.

The setup procedure is simple: you enter the URL of the page where the form is located, and you can name the form you want to track if there are multiple forms on the page. Soon, you start receiving the results:

An example Formisimo report
An example Formisimo report

There are many alternatives, such as Inspectlet, Lucky Orange, JotForms, and others.

The main point of all these tools is the same. They track form conversions and offer powerful visualizations to help you get insight into your form performance.

Finally, there is another powerful tool at your disposal to help you with form analysis. You can employ remote user testing services to get a sample of real users to fill out your forms. This way, you can quickly see exactly what users are doing and how they interact with forms on your website.

A word of caution, though: since user-testing visitors are not your real customers, they may not act authentically. However, you’ll get a general idea of the hurdles that may be impeding visitors from filling out your forms.

Using any of these means, you’ll be able to spot difficulties with your form conversions. And knowing there’s a problem is halfway to solving it! The next step is figuring out what to do.

Surveys can help you troubleshoot problems with your forms

Once you set up form-tracking, you’ll soon have a clearer idea of which forms are underperforming, and which fields or questions are creating the most friction.

Sometimes you’ll be able to guess the reasons for the trouble immediately. Other times, well, you’ll have to ask your visitors using a survey.

The best way to increase form conversions is to match visitors’ expectations. This is obviously easier said than done. To determine what your visitors actually want, you should use surveys. Cleverly posed questions will reveal their expectations so you can meet them.

In order to analyze most effectively and efficiently, you should test different form implementations. Create several forms and put them to test using a A/B testing tool. Once you get a clear winner, implement it.

Use this checklist to create your next form

Forms are a vitally important (if not the most important) part of your conversion process. You need forms to find out who your visitors are, how to take their payment, and how to send them their purchases. For this reason, forms are at once a great source of friction and a great opportunity.

If a lot of people successfully complete your forms, you’re probably well on your way to improving your conversions.

Your 7-Step Form Implementation & Optimization Checklist

  1. Define what information your form needs to gather. Build questions around the end data you need.
  2. Design the form itself. If it’s long or complex, break it down over multiple screens or pages.
  3. Before the form is put on the site, user-test it. Fix any issues that this round of testing reveals.
  4. Implement the form on your site, connect it to your form analytics tool of choice, and analyze the results. You’re looking for spots where users seem to have trouble, or where they commonly abandon the page.
  5. Survey your visitors to get a better idea what might be wrong with your forms. Find out what information visitors are reluctant to provide, or if the forms are too long, by asking your visitors questions.
  6. Iterate and improve your forms, using your analysis and survey results. Test different versions of potential solutions to find a winning variation.
  7. Implement the winning variation!

Published by

Edin is a Senior CRO Consultant. Edin is into Google Analytics and testing (any A/B testing tool really) and likes to write about it. You can follow Edin on Twitter.