How to Create Mobile-Friendly Email Signup Forms on WordPress

What if I told you that you could potentially be missing out on a chance to convert roughly half of your website’s visitors into email subscribers?

That sounds hyperbolic, but if you don’t have mobile-friendly email signup forms, that very well could be the case…or, in the best case, you might just be creating a sub-optimal experience for half your visitors.

Either way, it’s not something you should aspire to, which is why we’re here to explain why you should care about mobile visitors when you create your opt-in forms, and how you can make opt-in forms that still create a great experience for your mobile visitors.

Let’s dig in…

Why it’s important to have mobile-friendly email signup forms

Since around 2017, mobile devices have accounted for more than half of global website traffic – around 51% to be exact, according to Statista.

If your goal is to maximize the number of email signups that you get, you need to pay special attention to mobile visitors. After all, if you ignore half of your potential signups, your overall conversion rates are obviously going to suffer.

What’s more, the experience of interacting with a form is radically different between desktops and mobile touch-based devices. 

There’s some overlap in terms of things like copywriting and colors, but there are also big differences.

For example, popups, which can be quite effective on desktop, can pose a problem for mobile visitors (and also get you smacked with a penalty in Google!). Similarly, buttons that are easy for mouse users to click can be easily mis-touched by users on smartphones.

To sum up:

• A significant percentage of your website’s traffic is likely to be people on mobile devices – around 51% on average.
• Mobile users have different experiences than desktop users, so you can’t just apply the exact same tactics/formats.

And that’s why it’s important to pay attention to the mobile design of your email opt-in forms.

Five best practices for creating mobile-friendly email signup forms

Now that you know why your mobile forms matter, let’s get into how you can better design your forms for your mobile visitors.

Before we get into the best practices, we should probably mention that, if you’re using MailPoet, our built-in form builder already implements these best practices for you. So, if you don’t want to mess around with them yourself, using MailPoet gives you an easy way to get started – more on that later 😊

1. Be aware of the Google mobile popup penalty

For desktop visitors, popup opt-in forms are an incredibly popular tactic, so it’s easy to think that you can port this same strategy over to your mobile visitors.

Unfortunately, that is not the case for one big reason – Google’s mobile popup penalty.

Put simply, if you make it difficult for users to interact with your content after they click on it in Google’s search results, that will negatively affect your SEO rankings. Or, in Google’s words:

January 10, 2017 update: Starting today, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as high.

Basically, if a user clicks on your site in Google’s mobile search results but needs to interact with a popup before they can interact with your content, that’s going to hurt your rankings.

If you’re using MailPoet to create your mobile opt-in forms, you don’t need to worry about the popup penalty because we’ve designed all our forms to avoid issues. We’ll cover this more later on when we show you how to create a mobile opt-in form with MailPoet, but here’s the basic idea…

Let’s say you use MailPoet to create a popup opt-in form. For desktop visitors, the form displays as a modal lightbox popup. Visitors need to interact with the form to get back to your content, either by filling it out or closing it:

However, on mobile devices, that same form will appear stuck to the bottom of the screen. It still kind of looks like a popup, but the key difference is that it doesn’t interfere with the user’s experience. Even if the user doesn’t interact with the opt-in form, they can still scroll and interact with content. Because of this key difference, you won’t get into any trouble with Google’s penalty:

2. Limit form input fields

Limiting the number of form fields that you have is generally a good practice for boosting opt-in conversion rates, but this is especially true for mobile visitors where typing in form inputs isn’t super user-friendly.

Basically, you want to keep your opt-in forms as short as possible – ideally just a single email field, or a single name field on top if you want to collect additional contact information.

3. Experiment with form types

On desktop, you have a lot of different options for opt-in form placements. You can do popups, slide-ins, notification bars, welcome mats, and more. On mobile, your options are a little more limited because of the Google popup penalty and just generally the limitations of small-screen touch devices.

However, that doesn’t mean you don’t have options, and it’s worth experimenting with different types of opt-ins. You can even find more mobile-friendly ways of implementing those common desktop tactics.

For example, the “welcome mat” is a popular email opt-in tactic for desktop visitors, but it doesn’t really translate well to mobile visitors. Backlinko gets around this limitation by creating an opt-in form in the header that takes up the full screen on mobile devices.

It kind of feels like a welcome mat/full-screen filler, but it’s in a much more user-friendly package (and there’s no popup involved). All visitors need to do is scroll down to access the full content – they’re never “blocked” like they would be with a full-screen filler on desktop:

You can also still play around with tactics such as two-step opt-ins. For example, OptinMonster still uses a two-step opt-in even for mobile visitors. The key, however, is that the “popup” still doesn’t block the user from interacting with the content (remember – you want to avoid the Google mobile popup penalty):

And for one more example, check out how WooCommerce uses a sort of two-step notification bar. As with the other tactics, it doesn’t interfere with users browsing the content. But if users click the button on the email prompt, it will open the actual email opt-in form:

4. Make your submit button touchable

As a mobile user, it’s super frustrating to be trying to submit a form only to “fat finger” the submit button and mess something up (sometimes resulting in losing the form data – yikes!).

In all the examples above, you can see one common principle – a big, fat, easy-to-click submit button.

According to research in this study, which I found in this UX Movement article, the optimal button size for users is around 60 px, with a bare minimum of 12 px spacing between the button and other clickable elements.

So when designing your mobile opt-in, make sure your button hits around that sweet spot so that users don’t run into any issues submitting your forms.

5. Pay attention to typography

Along with the size of your form’s buttons, typography is another important consideration for making your forms mobile-friendly.

Let’s start with size…

In general, 16 px is a good minimum font size for your mobile opt-in forms. Any smaller than that and it might be difficult for your visitors to read the form.

Beyond size, there are also some other important typographical considerations to make it easy for your visitors to quickly comprehend your opt-in form. Nielsen Norman Group has a good discussion of this here based on research from MIT, but the basic ideas are to:

• Avoid using condensed fonts because this makes it more difficult for visitors to read text on mobile.
• Avoid using all lowercase as this also makes it more difficult.
• Consider all uppercase for important content (like your button and the headline of your opt-in) as all uppercase text resulted in the quickest comprehension. However, you shouldn’t use all uppercase for lengthy blocks of text.

How to create your first mobile email opt-in form

If you’re using MailPoet to manage your WordPress email marketing efforts, MailPoet makes it easy to create mobile-friendly email opt-in forms. Again, if you create a form via MailPoet, MailPoet will automatically implement many of these best practices to create a great mobile experience without you needing to lift a finger.

For example, you won’t have to worry about Google’s mobile popup penalty because MailPoet already handles creating a mobile-friendly design that won’t get you into trouble.

To get started, make sure to install the free MailPoet plugin and set up the basics – check out our getting started guide if you need a helping hand.

From there, here’s how to quickly set up your form…

1. Create a new form

To get started, go to MailPoet → Forms → New Form:

2. Choose your opt-in type and template

Next, you can choose the type of opt-in you want to create. For each type, you’ll also see a bunch of templates that you can choose to quickly get started. Or, you can always start with a blank form.

You can pick any form type here. Remember, MailPoet will automatically handle the mobile-friendly part for you. So even if you, say, choose a Pop-up form, you don’t have to worry about annoying your mobile visitors (remember that example we showed you in the section on the Google mobile popup penalty):

3. Customize form content

Once you choose your template, you can use the native WordPress block editor to customize all the content in your form. In addition to the native blocks, MailPoet also adds its own blocks to help you work with things like form fields and submit buttons.

If you hit any snags here, check out our help article on how to use the form editor:

4. Preview your form on mobile

Once you’ve added your content, click the Preview button in the top-right corner to check out how it looks on mobile.

By default, you’ll see the desktop preview, but you can switch to the mobile view by clicking on the mobile icon:

If you don’t like how something looks on mobile, you can always pop back to the form editor and make some changes.

5. Set up display rules and triggers

While you’re in the preview area, you can also use the settings in the sidebar to control some important behavior, such as where your forms appear. For example, you could only display this form on certain content.

You can also choose when to display your forms, including the option to enable exit-intent.

6. Configure behind-the-scenes details and publish

Once you’re happy with how your form looks on mobile devices, go back to the main editor and configure some important settings in the Form sidebar, such as which list to add subscribers to.

Then, Save your form to make it live and start collecting signups from both your desktop and mobile visitors:

Create your first mobile-friendly opt-in form today

If you want to maximize your list building efforts, you can’t afford to ignore mobile visitors. On average, they comprise about half of all Internet traffic, so they’re a valuable source of email opt-ins.

To maximize your chances of converting mobile visitors, you’ll need to pay attention to new factors such as how touchable your buttons are. You’ll also need to use slightly different formats to avoid issues such as the Google mobile popup penalty.

For the easiest way to implement those best practices, you can use MailPoet to create your email opt-in forms. MailPoet automatically makes your forms mobile responsive so that you can focus on the important stuff – like growing your website and creating awesome content for your subscribers.

Still have any questions about how to create mobile-friendly opt-in forms? Let us know in the comments and we’ll try to help!