Design lessons from high converting web forms

From our recent examination of form conversion rates across all of our clients (you can find more information on our benchmarking pages), I thought it would be useful to share some of the similarities across some of the high converting forms and hopefully share some design tips as a result.

All of the forms used below have conversion rates of 80% or more.

‍

Removing distractions, provide direction

From three of the highest converting forms in our database we can see that they remove almost everything on the page besides the inputs within the form. No top navigation or additional visual noise at all:

The next one is also clear of clutter, save for a very small information box which provides a prompt as to some information that will be asked for later in the journey.

By the time someone hits a form page, they have a clear goal in mind. They have browsed your website, collected information, consumed content and have made the first tentative step to complete the acquisition journey. 

The form journey then should be entirely built and constructed to allow a user to hand over the information needed efficiently and encourage them to do so. By removing distractions you allow a user to focus on this. Including navigation only gives a user a path somewhere else, and a chance for distractions to get in the way of their goal.

Check whether your web form is a high performer by signing up for a Zuko Analytics free trial or demo.

‍

Utilise Progress indicators

Let’s take a look at a third form:

This form, like the first two, also has a progress indicator along the top to clearly indicate how far through the journey a user is at a given time.

We’ve covered this elsewhere but this further enforces the idea that if your form journey is divided up over more than one step, giving users a clear indication of progress and direction can be hugely beneficial.

Not only do they provide clarity, they encourage a user to finish the form because they tap into some important psychological phenomena:

1. We can feel stressed by incompleteness
2. We all respond to operant conditioning
3. We find completeness intrinsically rewarding
   

So if you have a multi-step form process, be sure to look into implementing a progress bar.

‍

Don’t worry about length and number of inputs

Each of the above forms have at least 30 inputs that it is possible to interact with (some only appear depending on the options selected). In our form benchmarking reports we saw that the number of inputs within a form didn’t, on its own, change the conversion rate of a form:

The relevance of the information required may make a difference, but the number of fields in isolation will not make a difference.

‍

Use inline validation (for errors, and for success)

All three forms utilise inline validation. As a user exits a field, the form checks, in real time, whether or not the data entered is correctly formatted.

You can view a full guide to inline error messages and validation here.

Providing errors messages inline is only step one though, they also need to be helpful and well implemented. You can find a guide to using error messages correctly here but all error messages need to be:

• Unambiguous and helpful
• Clearly indicated
• Displayed until the problem is resolved
• Prevented where possible

One of the forms not only provides feedback on error, but also shows a user when information has been accepted (from a validation standpoint):

This adds further positive feedback to users as they progress through a form. For this client, it seems to add to its usability and conversion rate.

‍

Be wary of copying others

The above forms convert well and have a number of nice design features, but there is a danger in copying forms, since there is no such thing as a perfect form.

Here’s another very high converting form (79% conversion rate):

It’s busier, uses three columns on a single page rather than splitting the journey up into steps with a progress bar. It has far more help text than the other forms, and ‘feels’ very different to look at. But it converts. It also has a number of shared features, such as inline validation:

The lesson here is not to copy examples of good forms exactly. Take aspects and features of well designed forms and craft them to suit your brand and customers.

You will inevitably be disappointed if you try to replicate a beautiful looking form exactly. Every form is different because every customer persona is different and what works for one journey will not work for another. 

For more design tips, take a look at Zuko's big Gide to Form Optimization and Analytics.