The Advanced Conversion Rate Optimization Guide to your Forms

Forms are the linchpins of every website. So form conversion optimization should haunt your nights and occupy your days. Because if your forms aren’t optimized, you’re bleeding money. They are what stands between you and new users, sales or leads. You better make it your mission to keep improving them. Let's break down how you should do this in our advanced guide to conversion rate optimization for your forms? Forms are everywhere. I’m not exaggerating, here are just a few examples:

• Signup (for a product)
• Checkout
• Subscription
• Contest
• Donation
• Survey
• Event registration
• Download (content)
• Contact
• Task (do something in an app/website)

 

That's a lot to optimize!

What’s a good conversion rate for my forms?

Before we get in the nitty-gritty of form conversion optimization, let’s get that question out of the way. But don’t worry too much about it. They’re just here to give you some elements of comparisons. What you should worry about, though, is to keep trying to improve YOUR conversion rates every month. That being said, here are the conversion rates by form type and then by industry from a study conducted by Formstack on more than 400 000 forms:

 

Okay, now you kinda know if you should be a bit worried or pat yourself on the back. Either way, you've got to keep optimizing. There is gold at the end of the (form) rainbow.

Don’t believe anything I say, A/B test everything

I’m going to give you a good number of advice and good practices here about form optimization. But as you probably already know, you can’t say “optimization” without implying “test everything.” What worked for others might need tweaking for it to work for you OR not work at all.  I encourage you to take every piece of information given here into consideration, look at your analytics data (be it Google Analytics or advanced form analysis with Hotjar or Formisimo) then formulate A/B Tests hypothesis.
As to what you should test first, it’ll be specific to you and your business. Rank what you could test by:

• how much of an impact they’d have on your bottom line (./10),
• how easy it’d be to implement (./10)
• how much room for improvement there is (./10)

Then average the 3. Start with the highest grade? and fire up your A/B Testing solution! Okay, let’s dig in!

The 4 W’s of form optimization

At Kameleoon, we use the 4 W’s strategy. It originates from our Personalization framework and solution, but now we use it for basically everything, forms included. It brings us back to what matters, allows us to build a solid strategy and prevents us to skip steps in the process.

• Who? Which of your buyer's persona are you targeting? What are their needs and expectations? Do they have specific behaviors or habits when it comes to forms?
• What? Does your value proposition meet your visitor segment needs? What are you giving in exchange of your visitors' information?
• Where? Where will your form be? At the bottom of the page, above the fold, in a sticky bar, a pop-in, …?
• When? When in the buyer journey does a visitor comes across this form? How does it integrate with the other forms on your website? Write it down for each of your forms—be it with your team or for yourself.

Do you want to convert more or better?

If you’re wondering “how many form fields should I have?”, You probably saw many articles saying you should have as few as possible. It can be true in some cases, but not always. The mandatory question to ask yourself before designing or optimizing any form is: Do I want more users/sales/leads (quantity) or better ones (quality)?

Depending on the answer your form will be very different. Let’s take two lead gen forms as examples: a “Request a live demo” and a “Download a resource”. First distinction between these 2 forms is the visitor’s intent. He either just wants information OR is sufficiently advanced in the buyer journey that he wants you to show him your product. The annoy-meter (What’s that? Read on and find out ?) is closer to green than normal there, and the motivation noticeably higher. They’ll be more inclined to give you more information.

Second, your goals are also different. You want as many people as possible to download your resource, BUT you don’t want to flood your sales team with countless demo requests. Because 1) they can’t handle everyone, 2) it would be a significant waste of time as most of the requests wouldn’t be qualitative. You want to make sure the RIGHT people ask for a demo.

What you’ll ask for in the form won’t be the same. With that in mind, let me add a caveat. Ask only what you need. Don’t ask for “nice-to-have” information. Optional information is superfluous information and that much effort required by your visitor to complete your form.

Clarity, clarity, clarity… Oh, did I mention clarity?

People don’t read, they skim (study by NNG). It pains me to admit it as someone who writes, but hey, c’est la vie. Also, we’re all mostly lazy on the internet, and we’re rebutted by the smallest amount of efforts required from us.

What does that mean? Well, your visitors shouldn’t have to think when they fill your form. Everything must be easily understandable and transparent. Never assume (good life principle ? btw) something is obvious. It might be for you, because, well, it’s your job. But for your visitors? Not so much. Be painfully (for you, your visitors shouldn’t feel any pain obviously :D) descriptive and clear. Here a couple of questions your visitors shouldn’t have to ask themselves:

• Why should I give them my information?
• What do I have to gain?
• What will happen if I click?
• Can I trust them?

 

The CTA

Don’t just put “Download”, “Submit”, “Subscribe”, or at least put something after, like “Download [resource], “Submit survey”. Use action-based vocabulary related to the purpose of your form. If they read nothing but stop on your CTA they must understand what’ll happen should they click.  

The Form title

Try to make it benefit driven and answer the question “why should I give you my info”, in other words, describe its purpose and value proposition. As an example here is a title from a Hubspot form:

Labels, error messages, hints

There shouldn’t be any room for interpretation here. If your visitor’s flow is interrupted in any way, you lost him. Maybe a bit dramatic but not that far from the truth. We’re not done with labels and error messages, we’ll talk more about these later.

Friction, Public Enemy N°1

Ah, friction. It always comes up in CRO articles, but I don’t find the concept particularly colorful. Here’s another way to think about it: each of your visitors has an annoy-meter, set by default on medium-high, ready to be triggered. Every little nudge on the way brings the needle closer to high and eventually in the red—which means they’ll leave. Okay, so what exactly triggers the annoy-meter in your forms.

Captcha

I don’t know about you, but when I see a captcha, few things happen: I sigh, then squint while thinking “Geez you really don’t want me to go through with your form, uh.” AND it sends a signal that you’re having problems with spam/bots. You could argue that I still completed the damn thing, and you’d be right most of the times. But if the process was a pain in the butt, do you think I’ll come back or not be negatively biased toward your company from now on? (Oh, and people with some types of disabilities won’t be able to complete your form.) If you HAVE to use a Captcha, try to use one of the alternatives from this UserTesting.com article.

 

Error messages

What happens when someone doesn’t fill out a field or input invalid data? When and where do the error messages appear? What you’ll usually see are delayed error messages, meaning they appear only after you hit the CTA.

You then have to go back and see what went wrong. It doesn’t seem like a big deal I know but you’ll get a spike on the annoy-meter—or worse if it clears the form and you have to start over (that makes me want to flip the table).  If you’re doing this, I recommend you test in-line, as-it-happens error messages. That way, when your visitors hit the CTA, they’re really done with the form, and they can correct any problem instantly. It’s a lot smoother.

   

Put yourself in their shoes. You make the effort of filling out a form; you give out your personal information, and when you think it’s over—when your mind is now focused on you’ll get, it brings you back. You have to correct things, and click that CTA again. Wasn’t particularly enjoyable the first time, so the second …

 

Passwords

How do you feel about typing in your password twice every time you create an account somewhere? I usually let out a slight sigh. Yet another hoop to jump through.

 

“But everyone’s doing it.” When is THAT a good reason? Why are they doing it by the way and should you do it? There are actually debates over this question, the answer varies depending on the demographics / profile of your audience. The main reason is … we have fat fingers and asking for the password twice prevents any risks of typos. There are other reasons, some a bit obscure. (If you’re interested I invite you to check the link just above.) But this is not the only way you can prevent typos. One solution is an unmasking option in your form. You could unmask the password field when the visitor is in it (first picture) or put a checkbox “check my password” under (second picture).

   

     

 

Data formatting

Depending on the type of data you ask in your form, it sometimes requires a certain format to be easily stored in your database (dates, credit cards, phone number, …). Or does it? Remember, we’re trying not to trigger the annoy-meter here. Imagine this; you’re filling a date field, but then an error pops: you can’t use “/” but had to put spaces instead. Then it had to be MM DD and not DD MM like we’re used to in France for example. THEN the year needs to 16, not 2016.

Let’s spare the nerves of our visitors, shall we? You can easily put scripts in place so people can format things however they please. 2 examples with credit cards fields: 1. Spaces in the credit card number: why you would consider a credit card number invalid if you format it as it appears on the actual card?

​

It would super easy to just remove the spaces with a script once visitors validate the form. Case in point, here is the javascript you’d need: var cardNumber = document.querySelector("input").value; cardNumber = cardNumber.replace(/\s/g, ''); That way, if you’d enter 4321 0000 0000 0000, it would become 4321000000000000 without the visitor having to do anything. 2. Asking for the credit card type: did you know you don’t actually need to ask if a card is a Visa or Mastercard? The answer is already in the credit card number, if it starts by 4 it’s a VISA, by 5 a Mastercard. You could just as well show a VISA picto as they start typing to show them you know what’s going on and remove yet another nudge in the process. Tip: For the expiration date, ask for the year first so you can adapt the months they can choose next. There are a good number of people registering outdated credit cards inadvertently, doing that will reduce the risks.

 

Checkboxes, radio, dropdown, autofill

When it comes to choosing from multiple options, there are several possibilities:

• Dropdown
• Radio
• Checkbox
• Autofill

These are all fine but depending on the number and type of options it can be quite painful. For example, this is bad:

You have a huge list of countries you have to go through to find the right one. Here an autofill field would be best.

Tip: when it comes to lists of options, try to pre-select the most popular answer. You’ll save time for a good number of your visitors! We did just that on our forms and our conversions increased significantly.

But what if, for example, you do need an additional piece of information? At TheFamily, we need to segment our users into one of a few categories: Entrepreneurs, investors, media, etc. But 70% of our users are Entrepreneurs. So what we did was to have an additional step, where the user would click the box next to their category, but we made it so that the “Entrepreneur” box was already clicked by default. So 70% of our users have absolutely nothing to do at that step. Côme Courteault, Growth Hacker at TheFamily

 

Label, placeholder

Should you use labels? Placeholders? Or both? Where should place your labels? All existential questions of course. Replacing labels with placeholders: I’ll give you a couple of arguments against placeholders and one case where we did use one. We humans are easily distracted, and our attention span is continuously decreasing. If your form is long and you use placeholders instead of labels, you risk people clicking in a field and forgetting what they were supposed to type in. There were also eye-tracking studies conducted by the Nielsen Norman Group showing that our eyes are attracted to empty fields. On the flip side, we tend to overlook fields that look already filled. BUT, we did do it on a landing page where we had only one field (email), in this case, it seemed fine.

Where to place your labels: the main thing to consider here is the distance your visitor's eyes have to travel to make sense of what they see. Experiments have been conducted, and the most effective placement is usually just above the input field since visitors can catch in one look the input and label. Although, if you’re looking to make your form seem less long (or you’re limited in vertical space), putting right-aligned labels on the same line as the input also had good results.

 

Design

How your form looks is obviously a huge factor for your conversion rate. Try not to have your form look like it escaped from the early 2000’s. We know we shouldn’t judge a book (company here) by its cover (form) but—let’s face it, we do. If your form looks something like that:

 
Please do something about it. But above that is visual hierarchy. Make sure you direct your visitors' eyes to what’s important, on your page first, then in the form itself. For that, you can use color, visual cues (pictures, arrows, …), white space, contrast. For example, when you have a particularly long form, you can group related elements to make easier to digest. (If you’ve been paying attention, you’ll notice a couple of other things wrong in the image below).

Single-step or multi-step

Multi-step forms are usually used when you don’t want to overwhelm people with asking too much at once and make it look less daunting. From a conversion point of view, multi-steps are used for check-outs and long forms addressed to existing customers. Else, single step forms tend to perform better.

Important: When using a multi-step process, be sure to indicate progress to your visitors. They must know what’s next and how many steps are left.

Example: Renault, one of our clients did just that. They A/B tested their “Ask to try our car” form with 3 different variations.

• Control: Multi-step process
• Variation 1: Single-step but the visitor chose the car dealership himself
• Variation 2: Single-step with an algorithm automatically selecting the closest dealership.

Results: variation 2 won, and increased conversions by 29%. Way less friction, way more conversions! Ah, I’d be remiss not to mention two other things.

• Above the fold, always? It usually is more effective to have your high enough on the page, although as we saw earlier, you must be very clear on the purpose and value proposition. So if your topic is complicated enough, maybe you should explain things a bit before your form. That’s something you’ll have to test.
• Single-column or multiple-column layout? Here the answer is more unilateral, experiences have been conducted and it shows multiple-column layouts form provoking usability issues with subjects wondering if the fields side by side were related, or if they should fill out just the left or right column for example. Exceptions to this would be for the first and last name, country and state fields were the tests showed people had no problems interacting with.

Reassurance

Sometimes, all we need is a slight push to take the leap and convert. It could be we need a little bit of extra reassurance.  

Advanced shenanigans

With solutions like Hubspot, you can keep track of the information visitors already gave you. So the next time they come to your website and want to fill out another form, what they gave you the previous time will be pre-filled. You could even replace some of the fields with new ones if they already filled them during a previous visit.

Whew, we made it to the end. Kudos to the both of us, me for writing and you — the only one crazy enough to read this entire article. Optimizing forms isn’t that hard, as long as you can do A/B Testing and apply your usual CRO process…

1. Research
2. Hypothesis
3. Prioritization
4. Test
5. Analysis
6. Implementation
7. Repeat

… and you know what to look for. The two main focus of your form optimization should be:

• Reducing friction
• Improving clarity

To achieve this, you can look into:

• Form title
• CTA
• Labels
• Layout (single/multiple step, single-multiple column)
• Number of fields
• Password
• Radio/checkbox/dropdown/autofill
• Form location
• Error messages
• Reassurance
• Placeholders
• Data format
• Captcha
• Visual hierarchy

Maybe you didn’t notice but I’m quite proud of myself, I didn’t make any form-related puns. It was a FORM-idable effort on my part (don’t look for me I already left, I feel an almost Canadian urge to apologize, sorry guys, won’t happen again). Happy testing!