Solutions

Connected Growth

Our connected services compound to accelerate growth in your B2B business.

FREE ASSESSMENT

ALL SOLUTIONS

Growth

Discover our comprehensive growth services that fuel success in sales, marketing, and customer success. From strategy to implementation, we're your trusted partner for connected growth.

HubSpot

Explore our HubSpot Services designed to supercharge your marketing, sales, and customer success efforts. Let us guide you to harness the full potential of HubSpot for Connected Growth.

Our Approach

Strategic Expertise

We have decades of experience delivering growth for B2B businesses like yours.

FREE ASSESSMENT

About Us

Resources

Web Design

How to Fix the 5 Most Common Web Form Conversion Mistakes

October 27, 2016, by Digital Litmus

How to Fix the 5 Most Common Web Form Conversion Mistakes

Form fields are the life blood of any web or mobile app.

At some point your user will encounter a form in your product (they might want to personalise their experience, you might want them to buy something) and a good form will allow this to happen in a painless, transparent way.

A bad form, however, will turn them off of your product, perhaps for good.

Good form design is a commitment to testing and the power of small incremental changes until the form’s conversion rate is as high as it can be.

When you reach this beautiful promised land, you can be confident in getting return from any investment in user acquisition.

Entire books have been written on form design, but I’m going to give you fixes for 5 common form mistakes.

1. Poorly structured forms

Users scan webpages to see if it is relevant to their interests and forms are no different, so the structure of your form is vital.

Not grouping form fields

Having your form fields all contained as one indistinguishable group will make it hard for your users to scan through and understand the information they need to enter.

Chunking your form into distinct clear groups with subheadings will help a user to understand what information is needed at which point.

Examples of distinct chunks could include Personal information, Address, Payment details.

A Website Unstructured Form and a Structured Form
An unstructured form (left) is harder to scan in comparison to a form broken in to distinct sections (right)

The number of form fields

Received wisdom in form design states that more form fields increases the drop-out rate.

With this is mind, fewer form fields must equal a better performing form right?

Well, not necessarily so.

that removing required form fields or breaking the form into distinct steps can have a negative affect on conversion rates.

How to get around this? Well this will sound flippant, but include as many form fields as necessary. No more, no less.

If you need a user to sign up before allowing them access to your app then ask for those details. If you need to capture payment details before allowing a user in then ask.

But the key point is, do you need to capture that information before the user has the essential core experience that you want them to have? If not, don’t include them.

Single vs multiple columns

This one is quite simple, don’t use multiple columns for forms.

Having a single column of form fields allows for easy scanning, creates a clear path to completion and increases conversion.

2. Poorly labelled forms

Position of labels

Research has shown that placing labels above the form field increases the speed at which a user completes a form and gives the best form completion rate.

Labels placed to the left of the form field slows the user down by increasing the eye movement required to process the form. Sometimes you want to slow a user down so that they’re aware of the information they’re inputting, so left-aligned labels might be more suitable.

Unclear text labels

Form field labels should succinctly tell the user what information is needed. They shouldn’t contain extra words or hints.

A Poorly Labelled Form Field and a Well Labelled Form Field
 
Poorly labelled form field (left) vs succinct, direct form field (right).

3. Bad Form field design

Poor helper text

We’ve all entered a new password, pressed ’Submit’ and have been thrown an error saying that the password didn’t have the right number or type of characters. Ugh! Frustrating.

Helping a user understand what input they need to add is vital in creating a form that converts, and helper text (when needed) should be carefully considered and placed.

Studies have shown that helper text should be shown below the form field, not on it.

If the helper text is shown on field, users can mistake the field as having been completed.

It’s also confusing when a user selects a field and the helper text disappears. How many characters did the password need to be?

Form fields are too large

Where possible, give the users a clue to the type of information they need to add. If you want them to enter a date, break the form into separate fields or select boxes, one each for day, month, year.

Formatting form fields

Input masks can help guide users for the information that they need to enter.

Although they look like in situ helper text (bad) they don’t disappear when the user starts to input values. This can help users understand whether they’ve entered the correct credit card number for example.

Your Credit Card Number Form Field
 
Give users a guide to the information they need to enter.
Don't let a lacklustre website hold you back. Upgrade your online presence with our expert web design services and watch your business soar. Explore our web design services.

4. Unhelpful forms

Smart defaults

With more and more people accessing forms on a variety of devices, anything that can be done to help pre-fill a form will help the completion rate.

Pre-filling location information for dropdown menus, such as country will require one less field to enter, and speed up the process of completing a form.

Address lookup

Filling out an address is often the most time-consuming and problematic part of a form, so allowing a user to find their address from a postcode lookup will reduce the number of fields they need to enter.

Services such as PCA Predict allow you to easily implement address lookup without having to build the complex tech needed.

5. Bad button design

Volumes have been written about designing buttons that convert; these quick tips will help.

Buttons that don’t look like buttons

Buttons should look clickable. They should be distinct from a text link, and should have a colour that brings them forward. It should be blatant that the user should click the button.

An Unclear Button vs a Clear Button
 
A unclear button (left) vs a clear button (right)

Generic button labels

Generic words like ‘Submit’ give no idea what will happen when you press a button, which raises a user’s apprehension (the fear of Mystery Meat).

State what action will happen when the button is pressed.

’Create account’, ‘Complete order’, ‘Download document’ are more compelling and give the user an idea of what will happen.

Conclusion

Who’d have though the simple form could be so complicated and yet so important? But it really is.

If you can avoid these five common mistakes then you’ll have a good basis for creating a web form that converts:

  • Poorly structured forms
  • Poorly labelled forms
  • Bad form field design
  • Unhelpful forms
  • Bad button design

We’ve spent years improving forms through design and usability testing, so if you’re a startup or small business that needs help getting a form to convert then get in touch.

Could we be your next strategic marketing partner?

Could we be your next strategic marketing partner?

Our marketing strategy services - We are a B2B marketing agency with a dedicated team of experienced 'CMO-level' strategy experts specialising in strategic roadmaps, persona development and customer journey mapping, along with content and SEO strategy. Find out more about our marketing strategy services

Enjoy this article? We produce blogs like this for our clients as part of our content marketing agency services, and could produce engaging content for you too. 

graphique_ebook-ABM

Don't be a stranger to your ideal customers!

Download our latest guide and learn the benefits of ABM and how to use Hubspot to execute a campaign that hits your revenue targets.

LEARN MORE

BE A GROWTH LEADER

Sign up now to receive the latest thinking in B2B demand generation.