Zuko Blog

Web form design lessons from examples of high converting forms

Back to blog

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.

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 (https://www.zuko.io/benchmarking/form-performance) 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 - https://www.zuko.io/blog/inline-validation-in-online-forms

Providing errors messages inline is only step one though, they also need to be helpful and well implemented. You can find a guide here - https://www.zuko.io/blog/a-guide-to-error-messages-in-online-forms but all error messages need to be:

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. 

More from our blog:

How user behaviour has changed during the Covid crisis (and what you can do about it)
User behaviour in forms and checkouts has changed drastically since lockdown. We used our data to understand how it has changed and recommend what to do about it.
8 surprising form metric insights from Zuko’s benchmarking data
Some handpicked highlights from our benchmarking data that may surprise you
Asking about Disabilities and other Sensitive Information in Online Forms
Do you need to ask users some sensitive questions in your online form? Here are a few pointers.
Benchmarking - Deep Dive into eCommerce
We look in detail at purchase forms at the eCommerce sector and draw out some of the key stats for you, as well as learnings you can take from our becnhmarking data.
Zuko c/o Formisimo Ltd, 5th Floor, Arrive, White Tower, MediaCityUK, Salford, M50 2NT
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io
Telephone: +44 (0)800 772 0982
This website stores data such as cookies to enable important site functionality including analytics, targeting, and personalization. By remaining on this web site you indicate your consent.