WordPress Tutorials, Tips, and Resources to Help Grow Your Business
Is your contact form optimized for mobile users? Mobile continue to dominate web traffic, so if your form is not yet optimized for mobile visitors, likely you’re losing lots of conversions.
In this article, we’ll 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 and mobile friendly. That means your forms look beautiful on all devices.
So, let’s dive into some tips for boosting conversion rates 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. That’s because generating high-quality leads require gathering more than just name and email address.
In fact, making sure the information your prospects submit on your forms is accurate is as 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 on your forms is accurate.
In other words, requiring your users to fill out every field, input data in the correct format, and confirm important form fields such as passwords on a user registration form helps you get the most accurate information possible.
Take for instance Iron Mountain. By validating their form fields, they improved their number of qualified leads by 140%.
WPForms comes with tons of form fields to choose from. And, it just so happens that form fields like Email, Phone, Address, and Website / URL automatically validate the input.
Additionally, input types like the datepicker are optimized for mobile devices as well. This makes form submissions 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 hard for most of your mobile visitors to tap on it, which can reduce the form’s conversion rate.
WPForms users do not have to worry about this because the default height of WPForms’ buttons and fields is set to 38px.
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 the web, we recommend you make your font at least 16px on your form’s field labels.
First off, the larger font size will make your forms 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 mobile form 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 rather than blindly follow a study conducted on other sites.
If you 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.
However, tapping on a multi-column form can be hard on mobile devices.
That’s why even if you decided to create a multi-column form for your website, it’s best to turn it into a single column layout for mobile devices.
Here’s a guide on how to turn a multi-column form into a single column for mobile visitors.
5. Consider a Mobile Popup Form
If your mobile site is difficult to navigate, and your forms are hard to see and fill out, people will abandon your site regardless of what you have to offer.
Luckily, our sister plugin, OptinMonster, has plenty of mobile popup form designs that will make seeing and filling out your site’s mobile forms easy on site visitors.
For help with this, check out our step by step tutorial on creating a mobile-friendly contact form popup in WordPress.
6. Avoid Captchas
We’ll be the first to admit that captcha form fields can help prevent spam form submissions. After all, WPForms has a Captcha form field that requires users to answer a question or solve a math problem in order to submit a form.
That said, on mobile devices, captcha form fields can be extremely annoying and hard to fill out, especially if you use the kind that has floating letters that oftentimes appear very blurry.
In fact, a study performed by video app animoto found that removing the captcha form field from their form resulted in a 33% increase in form conversions.
If you worry about spam form submissions, don’t when using WPForms. All forms come with built-in honeypot protection. And if you feel you really need a captcha solution, you can always enable Google invisible reCAPTCHA on your mobile forms to help with unwanted form submissions.
For more information about preventing unwanted form submissions, check out this exhaustive guide on creating spam-free WordPress forms.
Looking for more ways to boost mobile form conversions? Below are a couple more guides that we have that will come in 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.
- Mobile Lead Generation: Boost mobile form conversions and get higher quality leads by following these proven tips for optimizing your WordPress forms for mobile devices.
- Mobile Form Abandonment: Find out why mobile users are abandoning your forms and make changes to your forms so that stops happening.
And there you have it! You now know some simple tricks for boosting mobile form conversions.
So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.