WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

4 Simple Tricks to Boost Mobile Form Conversions

by Shahzad Saeed on May 18, 2017

Is your contact form optimized for mobile users? Mobile users are quickly dominating web traffic, so if your form is not yet optimized for mobile visitors, likely you’re losing lots of conversions. In this article, let’s take a look at a few mobile form design best practices to boost your mobile form conversions.

Why You Need Mobile Friendly Forms

Across the globe, mobile devices dominate total minutes spent online.

Mobile share of online time percent 2017

According to comScore, smartphones were responsible for 80 percent of internet usage growth between June 2013 and June 2016.

It doesn’t make any sense if you still ask whether mobile marketing is important, because we know it is!

With WPForms, every form you create is responsive, mobile friendly. That means your forms look beautiful on all devices.

Let’s dive into the tips on boosting conversion rate with truly mobile-friendly forms.

1. Choose the Right Input Types

You might already know that reducing the number of form fields can encourage more people to submit your form. The shorter the form, the easier it is for your visitors to fill it out.

That said, sometimes, reducing the number of form fields can result in poor lead quality. It is because generating high-quality leads require gathering more than just name and email address.

In fact, ensuring the information is accurate that your prospects submit is equally important as driving more people to fill out your form.

Validating your form fields is one of the easiest ways to ensure that the information is accurate.

By validating the form fields, Iron Mountain has improved the number of qualified leads by 140%.

WPForms comes with tons of form fields to choose from, so you can choose the right field when creating a form to boost form conversion rate.

For example, with WPForms, the form fields like Email, Phone, Address, Website / URL etc. automatically validates the input.

Additionally, input types like date picker are optimized for mobile devices as well. This makes form submission convenient on all devices, which can encourage your prospects to submit your form regardless of the devices they use.

mobile design best practices- select right input type

2. Set the Field Height At Least 38px

Did you know that the average adult’s finger pad size is 10mm wide, which is equivalent to 38px?

This means if your form fields are less than 38px, it will be harder for your mobile visitors to tap on it, which can reduce the conversion rate.

WPForms users do not have to worry about it because we set 38px as the default height of WPForms’ buttons and fields.

WPForms also allows you to easily create a form without having to touch a single line of code. However, if you want to customize the CSS of your form to match your site’s design, you can modify it by adding a custom CSS class to your forms.

3. Set the Font Size of Labels At Least 16px

While 14px is a fairly standard font size for web, it is highly recommended for you to make it at least 16px for the font size of your field labels.

First off, the larger font size will make it easier to read.

In addition, iOS devices will zoom in when any text below 16px is tapped, which can be distracting to your mobile visitors when they’re trying to fill out your form.

The default font size of WPForms labels is 16px.

4. Turn Your Layout into Single Column

In terms of conversions, a single column layout is far better than a multi-column layout with questions positioned side by side, according to eye tracking studies.

Visually cluttered and complicated forms can distract your visitors. But, since every website and its audience is unique, it’s better to test your conversions by split testing your forms with a single column and multi-column layout than blindly following a study conducted on other sites.

If you’d want to, you can easily create a multi-column form layout with WPForms. You can learn how to create a multi-column form layout here.

Tapping on a multi-column form can be hard on mobiles.

Even if you decided to go with a multi-column form layout, it’s smart to turn it to a single column layout for mobile devices.

Here’s a guide on how to turn a multi-column form into a single column only for mobile visitors.

Looking for more ways to boost mobile form conversions? Below are a couple more guides that come handy for you.

What are you waiting for? Boost your mobile form conversions with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.