WordPress Tutorials, Tips, and Resources to Help Grow Your Business
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.
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.
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.
Looking for more ways to boost mobile form conversions? Below are a couple more guides that come handy for you.
- Research-based tips: This is a general form conversion guide, and is not specifically focused on mobile form design best practices. Read our guide here: 10 Research-Based Tips to Improve Contact Form Conversions.
- Donation form conversions: Are you a non-profit organization? Struggling to meet your online fundraising goals? Then refer to this guide: 6 Tactics to Boost Donation Form Conversions.
What are you waiting for? Boost your mobile form conversions with the most powerful WordPress forms plugin today.