Request A Demo

15 Best Practices for Mobile Web Form Design


Twitter Share Link Facebook Share Link Linkedin Share Link

With mobile traffic to websites growing rapidly, it’s important for retailers and others to focus on reducing friction to convert more visitors.

One key area that often produces friction and can frustrate users to the point where they abandon is form completion.

In this article, we’ll look specifically at mobile web form design, to make it easier for sites to convert mobile shoppers.

Mobile forms can be more of a challenge than desktop for a number of reasons:

  • Smaller smartphone screens allow less space for designing forms and adding key features like explanatory text.
  • Touch inputs can be less precise and more likely to produce errors from users.
  • Mobiles are often used in transit, or in situations where the user is hurried or cannot give forms their full attention.
  • Variable mobile internet connections can make form filling more difficult.

Why Mobile Form Design Matters

Stats from Christmas 2020 highlight the importance of a focus on improving mobile conversions.

Adobe stats show that retailers received the majority of their traffic from smartphone users, but didn’t convert them so well, with just 35% ending up buying on mobile.

Percentage of mobile traffic and sales to retailers

Other stats from Monetate show a big difference in conversion rates. Desktop traffic to retailers converts at 4.97% while the same figure for mobile is just 3.35%. 

There are several reasons for these figures, but one is that it is often easier to complete purchases, bookings or quote requests on desktop.

And this is where forms matter. Make them easy and frictionless for mobile users, and conversion rates can be improved.

There are several reasons why users may abandon forms. Some are to do with the actual design of the form, while others are around the motivation of the user to complete the form.

For example, if you ask a shopper to complete a post-purchase survey which is quick and easy to complete, many will take the time. If it takes five minutes and plenty of effort, then forget it.

People need to be motivated to complete a form. This may be the desire to buy a product, book a flight, or the need to ensure you have car insurance.

This motivation is a starting point, and well-designed mobile forms help to ensure that the effort required to complete them doesn’t take away that momentum.

With this in mind, here are some best practices for mobile forms to make them less painful to complete.

Use a Single Column Design

This is generally best practice for mobile and desktop forms, but is even more important on a smaller screen.

Single column layouts are easier to read as users can focus on one column at a time. This approach also makes forms seem cleaner as less daunting for the customer.

Chunky Form Fields

Form fields are a harder target than desktop, so there is an increased likelihood of user error when attempting to click inside a field.

The answer is therefore to make form fields big enough, and with enough space between them, so that users can click into them without risk of error.

Make Forms Visually Appealing

If a form looks dull, then it can deter users before they even begin to complete it.

A simple and easy to read form with some useful visual elements looks more professional and easy to complete.

Break up Longer Forms

Long forms can deter users, as they can seem like lots of hard work, but good design can address this issue.

Breaking up forms into more manageable chunks can make the task of form completion easier for users.

Here, comparethemarket breaks up its home insurance form into five sections.

Show Progress Indicators

Progress bars are great to use to let shoppers know just how far through the checkout process or form they are.

This can encourage them to keep going, knowing they’re making progress through the form.

Minimise the Number of Form Fields

If you can reduce the number of form fields by removing unnecessary questions, then this reduces work for the user.

Broadly speaking, if a field isn’t essential for completing the quote or purchase, then you should consider removing it.

Provide Clear Feedback and Validation

Providing clear feedback at the point where users enter data helps to speed them through the form, confirming that they have entered data correctly and offering suggestions.

In the inline validation example below, providing feedback at the point where data is entered is better than having users click ‘register now’ and then finding they’ve made errors.

Image credit: digitaluncovered

Clear and Concise Error Messaging

People will make errors as they complete forms, but this needn’t be an issue if error messages are useful.

Error messages should:

  • Be easy to notice, and easy for users to understand.
  • Highlight the form field where the error has occurred.
  • Provide clear instructions on how to fix an error.

Anticipate Common User Errors

It can also help to anticipate common errors and account for them. Analytics data and user testing can help you to identify fields that are tripping users up.

One error which used to be quite common on ecommerce sites (and still causes problems on some) was around postcode entry. People typing postcodes with or without a space in the middle, or perhaps using lowercase text could trigger an error message.

The best approach is to anticipate this and allow users to enter postcodes in any format. It saves creating a point where users may abandon forms.

Show Suitable Input Keyboards

This is an area where smartphone features can help to make forms easier for mobile visitors.

Simply showing the best version of the touch screen keyboard for the form field – numeric for telephone number in this case – makes is easier for users, thereby reducing the risk of errors and speeding up form filling.

Place Form Field Labels on Top

This is easy to read and creates more room for form fields on a mobile screen.

Use Clear and Well Defined CTAs

Calls to action (CTAs) should be easy to spot, and the wording should make it clear what the next step is – complete purchase, submit quote etc.

It should also stand out on mobile and be large enough to be unmissable, as well as ensuring they’re far enough away from other links to avoid errors.

Use Microcopy Where Appropriate

Text around form fields can be used to explain certain fields and information required to help users to complete forms.

Used well, it can help to reduce basket abandonment by providing key information at the right time.

It can be used to explain why key information is needed, and even where to find it, as in this car insurance quote form.

Add Autofill Where Possible

This is another way to save the user time and make mobile web forms easier to complete.

It reduces the amount of typing users need to do, again helping to reduce abandonment.

Provide Mobile Friendly Shortcuts

Any shortcuts during form completion and checkout can help to make mobile forms easier and increase conversion.

Payment shortcuts are an easy win for retailers, as they remove the need to enter payment card details and shorten the payment process.

Here, this cinema checkout allows uses to scan their credit card to populate the fields.

The option of Apple or Google Pay is also offered, so mobile users can pay quickly with face or touch ID.


The 2021 Ecommerce Stats & Trends Report

The latest data on ecommerce trends and online customer behaviour

2021 Ecommerce Stats & Trends Report

Graham Charlton

Graham Charlton is Editor in Chief at SaleCycle. He's been covering ecommerce and digital marketing for more than a decade, having previously written reports and articles for Econsultancy. ClickZ, Search Engine Watch and more.