How to Make the Best-Converting Checkout Form – In 5 Steps

Forms are essential in any checkout. And yet so many people get it wrong. And that causes customer drop off.

Waste. Anyone who gets to your form is no longer just a visitor, they’re a buyer.

Each improvement that you make in your checkout form will have a significant impact on your revenue. In my opinion, it just takes five steps to create the best-converting checkout form.

Step 1: Know Where it Goes Wrong

Check your Google Analytics settings

Before you can improve your checkout form, you have to know exactly where it’s going wrong. Where are you losing money? Where can you potentially earn money by optimising your checkout?

For that, go to Google Analytics. Don’t immediately look at your funnel data,  go to your settings instead.

Check to see whether enhanced e-commerce is switched on.

You find that here:

Switching on enhanced e-commerce alone is not enough. You’ll need help from your developer to be certain that you’re collecting the right data. You can forward the developer a manual for setting it up correctly.

Enhanced e-commerce gives you a great deal of data with which you can analyse your site. But in the context of this subject, we’ll only be talking about the data that’s important for optimising your checkout form.

Next, check to see whether your funnel steps are completely and correctly configured. It can be that someone else set up your funnel, but didn’t do it entirely correct. There might be a regular expression used that isn’t  quite right.

You have to be 100% certain that you are measuring what you want to measure.

If that’s not the case, now is the time to correct the funnel. Then wait several days/weeks until you have collected enough data. You cannot (yet) create your funnel retroactively in Google Analytics.

No time or desire to wait? There is an alternative. Go to Behaviour > Site content > All pages, and enter the URL of each step in your funnel. Then look at the unique pageviews for each step. Doing this allows you to manually reconstruct your funnel and see which step has the most drop off.

Analyse the Funnel in Google Analytics

Now that you’re measuring all the data correctly, it is time to start analysing.

First, of course, you look at the funnel. Pay particular attention to the steps in the funnel where there are large numbers of drop offs:

What do you see here? In the past month, only 15.65% of visitors who get to the ‘Payment & Details’ page go through to the following step. In this case, it’s the form in the checkout where people drop off en masse.

Clearly a gigantic problem. This site is losing a great deal of money here.

Let’s calculate. Suppose that we could improve that 15.65% to 60%. That wouldn’t be bad, but it’s still a very conservative estimate. That means that you need 295 people to go through to the following step instead of the current 78. Of that, say 83.33% go through. That means 83.33% of 295 = 246 transactions instead of 83. So this site missed out on 163 transactions here. Per month. That is 1956 per year. This site also has a very high AOV (average order value) of 760 EUR. In this step alone, the site is missing out on 1.5 million EUR.

Oops…

Reason enough to drop everything and make the optimisation of this form an absolute priority.

Analyse the Payment Behaviour in Enhanced e-Commerce

An alternative for the funnel is to analyse the payment behaviour. You can find this report under Conversions > E-commerce > Shopping analysis > Checkout behaviour.

What do you see on this site? A drop off of some 33% in the first step, in this case, a form. The drop off in this step is greater than in all the following steps, so you certainly have to improve this form.

The big advantage of this report, relative to the regular funnel display, is segmentation. You can’t segment the funnel display, but you can with the payment behaviour report.

With this report, you can look for mobile traffic. The drop off on mobile will typically be higher than on desktop. That’s not abnormal in and of itself. But do you see extremely high drop off on mobile for your form? If so, it could be a form that doesn’t work well on mobile.

Check the Goal Process

An additional report that can deliver interesting insights is the goal process report. You find that under Conversions > Goals > Goal process.

What do you see on this site? Many visitors go from the form, where they fill in their address details, back to the shopping cart. That can indicate that something in the form is not clear; that they’re looking for information that they aren’t finding.

But that’s just one possible explanation. In order to really know where it’s going wrong, you have to look further than Google Analytics.

Do a Quantitative Form Analysis

Have you discovered a problem with your form in Analytics? It’s important that you zoom in on the exact fields in your form that are problematic. Perhaps there is one field that is causing all the problems. Perhaps there are several.

What is especially important is that you don’t start guessing. You could be entirely wrong. You need data to be able to make a reasoned decision.

One tool that I always find myself using here is Formisimo. This tool gives fantastic insights. You can see which fields are corrected most often. But even better, you see which field your visitors drop off.

What do you see with this form? 86% of the drop offs happened in three fields. That already gives you better focus. Instead of assuming that the problem is with the whole form, you can now look more specifically at the why. Why do people drop off on this form? And why at these fields?

Step 2: Know Why it Goes Wrong

You now know that you have a problem on your form. You even know which fields are the most problematic.

High time then to… wait.

Don’t make any snap judgments and don’t immediately start A/B testing. Or even worse, don’t start tinkering around with your form.

You might well know WHERE you have a problem, but you don’t have a clue WHY you have a problem there.

If you start guessing about why there is a problem, then there is a good chance that you’ll get it wrong. You have to KNOW why there is a problem.

Of course, it’s important that you go through your form critically and expose potential issues. More about that in step three.

You want to know how your visitors experience your form. What isn’t clear to them, what creates doubt, etc.

To find that out, you can utilise the following research methods:

1) User Tests

Let real users use your site. Have them say aloud what they are thinking and doing. And watch where they get stuck. You’ll learn a great deal about your site and how visitors use it.

You’ll especially notice what isn’t clear in the checkout, what information is missing, and what works counter-intuitively.

It’s important to note that  testers typically get an incentive for testing your site. They are motivated to complete the task that you give them. In other words, if you tell them that they should go through the checkout and place an order, they will typically go through to the end. Real users will of course not always do that.

You can try to capture that problem by formulating your tasks well. You can ask them to place the order as though it were for themselves. And ask them to indicate whether there are points in the process where they would hesitate about continuing with a real order.

Take note of everything that does not go smoothly and whether they retrace their steps. Those are clear indications of problems with your checkout form. Your testers will go through those points. But many real users will likely drop off there.

2) Visitor Recordings

You can also record the mouse movements of your visitors during the checkout and play them back in visitor recordings.

A good tool for this is Hotjar. With Hotjar, you set up a funnel (the same that you use in Analytics), and Hotjar shows where in the funnel that people drop off. You can view videos from those drop-offs directly from the funnel. Just click on ‘watch’ for each drop-off.

3) View Click Maps and Scroll Maps

Click maps and scrollmaps give you additional insights. Do your visitors click on elements in or next to your form that actually aren’t clickable? Consider changing it or removing it, if it isn’t essential to your checkout.

Do they often click on the contact link in your footer ? Then something is probably not clear on this point and they want to contact you. Make your contact information clearer to encourage them to contact you instead of dropping off. At least until you know what isn’t working and have modified it.

Since you’re already using Hotjar for your user session replay videos, you can also use it to set up click maps and scroll maps.

I’m also a fan of Beampulse for this. They have advanced click maps and scroll maps. Of all these tools that I’ve worked with, Beampulse is far and away the most advanced.

4) Ask Your Visitors

The simplest way to find out why people drop off on your form is to ask them.

How can you best do that? With an exit intent popup that is displayed as soon as someone leaves the page. In other words, when they drop off.

Don’t make a long survey from it. That won’t get filled in. Limit yourself to one question, like, ‘What stopped you from completing your purchase?’

If needed, you can ask two questions to try to increase the number of answers. For example, ‘Has something stopped you from completing your purchase? Yes/no’. If they answer yes, then you can ask, ‘What stopped you?’ The first question is easy to fill in  and you create momentum. They’ve now entered something and feel obligated to answer the follow-up question. This approach sometimes works better. But sometimes not. You’ll have to test both methods to see what produces the most answers.

Don’t make a multiple choice question out of it. You don’t know what you don’t know. If you ask a multiple-choice question, you give your visitor a number of options, and they will choose from among them. But sometimes there is a completely different answer, of which you are entirely unaware. Yes, you can add an option of ‘Other, specify’. But many people just check one of the existing options, even if the real answer is something else.

You can easily set up this kind of exit intent question with Hotjar, Beampulse, and Webengage.

Step 3: Go Through Your Form Yourself and Evaluate on the Basis of Best Practices

You have already collected a good deal of data. You know whether it’s going wrong on your form, at which fields it goes wrong, where your visitors click, how far they scroll, what isn’t clear to them, which information is missing, and why they drop off.

With all that knowledge in the back of your mind, it’s time to go through your checkout form yourself.

Surprisingly few people do this. Make a habit of regularly filling in your own forms. And not routinely, but with a critical eye.

In addition, it’s a good idea to do this on all the most important browsers and devices. There is a chance that you have a problem on mobile that doesn’t exist on desktop. Or that you have a problem with Safari, but not on IE. To get an early indication of that, you can look at the data in Analytics. But it remains essential to not only look at the Analytics data for this but to follow the real customer journey on different browsers and devices.

Evaluate your form on the basis of best practices. But never base your decisions on best practices alone. They can give you an idea of why something doesn’t work well, but no more than that. Use the conclusions that you’ve drawn from this to check the data that you’ve collected. A problem for one site is not necessarily a problem for another. And the reverse is true: what works well for one site will not necessarily work well for another.

For example, you often see that fields such as ‘date of birth’ are problematic. People see this as private information and irrelevant for their purchase. So they drop off. If you have a field like that but you don’t see drop offs at this field in your Formisimo data, then you don’t have a problem and should feel free to leave it in.

There are many best practices for forms, and that is easily a subject for a separate article. Here are several of the foremost points on which you can evaluate your form:

• Keep it as short as possible. It is typically true that the more you ask, the more people will drop off. Ask yourself whether you really need that telephone number. And why ask for their date of birth? That’s probably unnecessary. Don’t be a greedy marketer who wants to collect as much data as possible. Yes, I am very data driven. But if I have to choose between collecting more data and making fewer sales or collecting less data and making more sales, then I choose the latter. Only ask for what you really need to be able to process the order.

• If you really need a great deal of info, it can be interesting to test your one-step form against a multi-step form to see which version performs best. A multi-step form can change a person’s  perception. What initially looked like a very long form now looks a good deal shorter. Typically, it’s a good idea to test starting this at eight fields. Be certain that you add clear progress indicators, so that your visitor knows what step they’re in. This way, you shape clear expectations about the number of steps to follow.

• Be very clear. Ensure that there is no confusion. By ‘Name’ do you mean first name or last name? With ‘Address’ do you mean the street name or the street name + house number + any additions?

• Always start your form with simple fields like ‘first name’ or ‘e-mail’. It’s easy to enter, and you create momentum. Now they’ve started the form and it’s more likely that they’ll complete it. Never start with something like the VAT number. The chances are good that they don’t know that off the top of their heads. If they have to look it up, this postpones the entry, and perhaps they never return to your form.

• As crazy as it sounds, the place where you put your label relative to the field matters quite a bit. The best place for your label is above the field. That works well because you can see both the label and the field in one glance. The second best option is to place your label to the right of your field. Don’t use inline labels, although the chance is good that your designer will suggest that. Why not? Simple. Your visitors start filling in the field and halfway through the field, they wonder, ‘Wait, is this supposed to be my first name or family name?’. They remove what they were entering to check whether they were correct. Not really user-friendly and an increased chance of drop offs.

• Use drop-downs sparingly. I see drop-downs turning up all too often in forms where there’s just a choice between two options. Like ‘man/woman’. That’s not needed, and it’s less user-friendly than radio buttons (because it’s not as fast to use). A good rule of thumb: If you have fewer than five options, use radio buttons instead of drop-downs.

• Don’t make account creation a requirement. Always offer a guest checkout. Research has shown that 25% of your visitors will drop off because you are required to create an account. The easiest way to handle that is to let them go through the checkout as a guest, and offer the option on the thank you page to create an account if they like. You have all the details, after all. The only thing they still have to enter is a password.

• Don’t set requirements for a password. You’ve undoubtedly faced this yourself. You enter one of your standard passwords and you get a notification that you have to use a capital letter or a special character. Or the reverse happens and you can’t use any special characters. A real bother. Especially because you now have to make up a new password for one site. Guaranteed, you will forget that password. You’re not making it easy for your user to login easily the next time.

• Eliminate confirm password. If you ask for a password , it’s a good idea to leave out the second field ‘re-enter password’. Just use a checkbox with ‘show password’, as is often used on mobile apps. That’s one less field.

• Auto-fill. If you can fill in things automatically, do that. If you ask for the postal code and the house number in the Netherlands, for example, you can complete the rest of the address automatically.

• Don’t use captchas. People hate captchas. They make them look dumber than robots. People spend an average of ten seconds on a captcha. And they make mistakes. Because of that, some people will drop off. There is a simple alternative. Add a field that is not visible to your user, but is to bots. Visitors will not complete the field, bots will. If that field is completed, then you know it was a bot and you can remove that submission.

• Work on your error messages. No one likes error messages. And each error message is a reason for some people to drop off. Some tips:

• • Make them more clear. If an e-mail address is not completely filled in, then don’t post ‘This is a required field’ but ‘Your e-mail address doesn’t seem to be complete.’
  • Be friendlier: ‘Please enter your street’ is friendlier than ‘This is a required field’.
  • Place them in the right context. Never throw all your error messages together. Place the error message by the field where the mistake has been made.
  • Use real-time inline validation. That’s the best way to give error messages. As soon as someone fills in a field, a green check mark appears. If it’s wrong, an immediate error message appears so that your visitor can correct it. Real-time inline validation can be a real conversion booster.

• Formatting should be done on the backend. Let your visitors fill in the information the way they want. Formatting is not their problem, it’s yours. And it’s easy to fix on the backend. If you ask for a VAT number, let them use spaces, periods, capital letters and lowercase letters.
  Not unimportantly, permit accents as well. I happen to live on a street with an accent in the name. And on many sites, you see that it goes wrong there. Not only do they not accept the street name because of the accent, you often get an unhelpful error message so that you don’t know what to do to solve the problem.

• Required or optional? Make it immediately clear whether a field is required or optional. Not only by placing a * by the required fields, but also by adding the word ‘(optional)’.

• Use input types for mobile. Make it easier for your mobile users to complete your form by using input types. With input types, you ensure that the right keyboard appears for the right field. If you use <input type=”tel”>, then the proper keyboard appears:

Step 4: Implement No-Brainers

If you went through steps one through three carefully, you now have a good idea of what can be better about your form.

Time to get to work.

You don’t have to test everything. Some things will be so abundantly clear that you can just implement them. If your form doesn’t work on Safari, you just have to fix that. If your form doesn’t accept accents, then solve that. If you notice in Formisimo that you have a 30% drop off at a field that isn’t essential is, then remove it.

Step 5: Test, Test, Test

Finally, start testing all the other things that you found in your analysis. These are the things where you think you can make an improvement but aren’t  100% certain about.

If your research is done well, you’ll be testing the right things and not just setting up tests on the basis of gut instinct. If you use research to create your tests, you have a much better hypothesis to work with. And a good hypothesis is essential for a good test.

Good luck!