Is Your Submit Button Causing Form Abandonment?

Conversion Rate Optimisation

Small as it seems, the button at the end of your online form could be the cause of failed conversions. Your users must interact with that button to successfully complete your online form and if it trips them up, you could lose that conversion.

Examples of form buttons

Examples of form buttons

Here I’ll discuss:

  1. How to use form analytics to detect issues with your Submit button.
  2. Common issues with copy and design that could be damaging your conversion rate and how to fix them.

Tracking user behaviour around the Submit button

Formisimo’s Popular Dropoff report shows you the last element in the form that users interacted with before they dropped off.

Many of our clients are surprised to see to the Submit button in this table. For some it is the worst performing element in the form. In the Dropoff report below, the Submit button accounts for 61% of total dropoffs in the form.

1 line table showing Submit button with 32% dropoff rate

From Formisimo’s Popular Dropoff report

Finding the cause of user abandonment

Drop offs at the Submit button indicate that users are interacting with the submit button but they aren’t converting.

To find out why, you need to stress test your form, looking for errors and unexpected behaviour. Formisimo users can look to their other reports to lead their investigation. The Most Corrected Fields report will tell you where users are revisiting fields to alter their input.

Here are some common issues to look for in your own form:

Required fields aren’t clearly marked

It’s not obvious to users which fields are required and optional, causing them to try to submit the form before completing required fields.

One or more fields are reset

When an error occurs one or more other fields in the form are reset but this behaviour isn’t obvious to users. This particularly causes issues when said field is out of view, e.g. at the top of the form. Users become stuck, unable to submit the form and unaware of the reason why and so abandon the form.

False Inline validation

False validation means merely giving the appearance of checking and approving inputs without validating it against necessary criteria.

For example, a telephone number field that can only be accepted with numbers inputted. A user types some letters and upon exiting the field a green tick appears, seeming to validate the required field. The user submits the form and then the field is checked properly and thus throws up an error. This can confuse and frustrate users, causing them to abandon.

Make sure that visual validation cues aren’t merely superficial.

In some cases users might not want to give the information you’re asking for and so hoped to submit the form by inputting dummy data. Consider explaining what you’ll use the information for.

Auto form-fill is incomplete

Auto-fill features in your form may have functionality problems e.g. postcode lookup that automatically fills the address fields but not to the standard required by the form.

The way the button acts when interacted with is the final hurdle in the conversion process. Here are a few tips on how the button itself should behave before and after a user interacts with it:

Consider your button’s active state

One way you might consider preventing an invalid form submission is to keep the button inactive until validation criteria have been met.

Please note, you must do user testing before applying any recommendation. Your own users are unique and may not be familiar with, or accepting of, this behaviour.

However it’s worth testing if, by using a dead or inactive button, you can improve the data quality of submissions and reduce error frustration.

Handle errors with grace and understanding

What happens if the user experiences an error e.g. submitting the information in the form with a required field left empty?

It’s vital that you help users fix the error as quickly and easily as possible to reduce frustration and avoid dropoffs. Direct their attention to the error field by refocusing the page onto the error. Use a clear and kind error message and don’t repeat the field label.

For more advice on creating error messages that facilitate conversions, read the post How Your Error Messages Hurt Conversions.

Confirm submission

You should confirm successful form submissions to assure users that everything is working correctly. Forms that don’t confirm submissions lead to a poor user experience where users worry whether they should fill out the form again, become frustrated at the prospect of filling out the form again, and mistrust the functionality of your website.

Use a thank you message or thank you page to optimise the user experience.

Whitepaper thank you page
Formisimo academy iconPro Tip
There’s an opportunity here to reconvert straight away by offering a related product, as in the screenshot above for our whitepaper on ecommerce optimisation. Depending on your site, you could reconvert with a different piece of content or invite shoppers to add a related item to their existing order.

As well as fixing errors associated with the Submit button there are ways to optimise your form button to increase conversions.

Copy of your Call to Action

Copy is one of your greatest assets and also a common stumbling block for many online sales pages. The copy you choose for your form’s button is no exception. This is microcopy. Other microcopy includes the labels on each form field and the form’s error messages.

Content strategist, Bill Beard, describes microcopy as,

“[]the little text that can make or break your user experience.”@writebeard

Beard goes on to say that while ordinarily you should look for opportunities to inject branding into the copy, that this should never break the flow of users trying to take action. Therefore, I recommend not trying to be too clever but rather write copy that is action focussed.

Up to now I’ve been referring to your form button as the Submit button but infact you should avoid labelling it as ‘Submit’. FormStack reported in their 2014 Form Conversion report (PDF) that action focussed button copy, that explained the purpose of the form, increased conversions two fold.

Submit button copy and conversion rates

This included ditching the word ‘Submit’ in favour of phrases like ‘Submit Application’ and ‘Register Now’ which are more specific to the purpose of the form.

Don’t forget to do this for buttons between intermediate steps as well i.e. if your form is spread over several pages use appropriate copy to explain where the user will be taken when they click the button, rather than just ‘Next’.

Design tweaks to try

It’s a popular myth that button colour can change the conversion rate. There are many articles discussing colour psychology and extolling one colour over another. Read a little deeper and in truth the colour itself may not be the reason a variant button won in a test.

As Peep Laja says about colour and conversion optimisation,

“[] green vs orange is not the essence of A/B testing. It’s about understanding the target audience.”

It’s more important to ensure your button:

  • attracts attention
  • looks clickable
  • has a large interactive area

All of which increase its clickability.

Contrast

To ensure your button attracts attention it should stand out from the rest of the page and that means choosing a contrasting colour. So there isn’t one killer colour that will increase conversions on any site, it needs to have high contrast with the rest of the page.

Equally there should be high contrast between the button colour and the text within the button i.e. no light yellow with white text. This is a basic accessibility requirement but will ensure that the text is more legible for all sighted users.

Tom Osborne, VP of design at Viget.com, tested colour contrast and luminosity. You can see some of the results in the screenshot below:

Contrast and luminosity results for button colours

Download the Colour Contrast Analyser from Paciello Group. You can use the dropper to grade foreground and background colours against the three levels of accessibility compliance, A, AA and AAA.

Button-i-ness

Does your button look like a button? It’s a pretty basic requirement but the popularity of flat design means that many buttons have lost their affordances. An affordance is a design quality that conveys an object’s purpose.

Nick Petitt says, in his article What are Affordances in Web Design?,

“Thinking in terms of affordances and metaphors can help lead to more intuitive user experiences.” – @nickrp

However, you can see in this forum discussion on flat button design that the designer struggles to convey the clickability of the buttons. He says of the below design:

“I know, as the conceptor of the design, that it is clickable. However, I feel like it is not obvious – or not enough at least – for any random user.”

Examples of flat button design

These flat-design buttons don’t look clickable.

Comments from other designers suggested raising the buttons from the background and underlining the accompanying text, as these are familiar indicators of clickability. One commenter even recommended removing all supporting information in a bid to push the user to seek more information by clicking – which forces action rather than being intuitive.

To strengthen your button’s affordance, it should have a hover and focussed state. This means that the button changes appearance when the user hovers over it with the mouse or focusses on it with their keyboard, adding to the impression that the element can be interacted with.

Size of clickable area

Creating a large clickable area should be covered by your accessibility compliance. Users with reduced motor skills and certain vision impairments need the clickable area to be as big as possible for easy interaction.

A big button is easier for all mouse users to click and for users of touchscreen devices, reducing the frustration of trying but failing to engage the button first time.

Designer Stephen Hoober, in his article Common Misconceptions About Touch for UXMatters, warns against making buttons too big though:

“If buttons get too big, users start having problems perceiving them as clickable buttons—and sometimes even discerning them as discrete elements.” – @shoobe01

Instead, make the touch target around the button larger.

“[] the sizes of the visible target and the touch target for a button can be different. More often than not, they should be. – @shoobe01

In the presentation slide shown below you can see the larger touch target around the visible target of the menu button:

Desgin for touch from Ming-Liang Liu

If you’re not designing with an accessibility-first approach, read up on the benefits that accessible design has for all users.

A combination of fixing problems in your form and optimising your form design will help you convert more primed users. Don’t lose out on conversions at the last minute, fix your online form.

image representing average form conversion rate uplift from using Formisimo From 0% to 24% Form Conversion Uplift Get the insight that increased form conversions by 24% (and rising)
Latest Insight
Improving Insurance Forms Reviewing the top 31 insurance forms