Basics: mobile form design

Online shoppers are increasingly using their mobile devices to discover new stores, browse products, and make purchases. In the US alone, more than 35% of online purchases used a mobile device, and this number continues to grow every year. 

To make sure you convert these customers into subscribers, it’s critical that your sign-up forms look as good on mobile as they do on desktop. 

If you need more than 3 fields, such as if you want to collect email and SMS consent at the same time, consider a multi-step form. 

A multi-step form allows you to gather more information without overwhelming potential subscribers. Plus, having a separate step for SMS is a compliance best practice when collecting multiple types of consent in 1 form. 

Alternatively, you can learn more about your subscribers by re-targeting them later in the customer journey. Maybe you ask about your current subscribers’ birthday by showing them another form after 30 days, or perhaps you ask as part of your welcome series.

Even if all fields on a form are required, it is still strange to ask someone’s birthday before their name. 

Generally, ask for information from least to most personal. For instance: 

1. Name
2. Email or phone number
3. Birthday

A single-column means all the inputs, fields, and buttons follow a single line in the form. While multi-column formats are fine to use on desktop, they can make mobile forms look cluttered or crowded. Single-column forms are also easier to scan on mobile.

Single-column form	Multi-column form

The CTA button should be at the end of the viewer’s scanning journey, so it’s the last thing they see. You don’t want them to have to scroll up to complete the form, or have to search for the button. 

Typically, the CTA button is placed in the center or left-hand side. 

The reason why the close button needs to be in the top right corner is simply because that’s where users expect to see it. 

If you place it somewhere else, like in the top left or near the bottom, your users may spend time searching for a way to close the form, and get frustrated while they look. This could cause them to leave with a negative impression of your brand, meaning they’re less likely to visit your site in the future or become customers.

Place a label directly above each field in your form that clearly describes what information they should provide. 

Also, put labels close to the fields they’re describing, so it’s clear the two are together.

Each label should take up less than a single line when viewed on any mobile device, so being concise is key.

In every field where users need to input text or numbers, include placeholders to show your audience what their input should look like (e.g., an example email, name, date format, etc.).

This helps reduce the number of errors someone might make. Working together with labels and placeholders makes it easy for users to navigate through your form. 

Pro-tip: buttons should have labels too. Being more descriptive in the button text also helps the user. 

For instance, rather than a simple “Submit” call to action, saying “Subscribe to newsletter” or “Sign up for SMS” gives a clearer idea of what the button does. Plus, this can help you save precious space in the smaller form. 

Telling your customers which fields they have to fill out and which they don’t streamlines the user experience. You can make certain form elements required and others optional, 

Include a success message after someone submits the form so the user knows they were successful. 

Using a font size of 16 or more pixels helps ensure the text is legible. This way, users don’t need to zoom in to read.

16 pixels is the minimum font size recommended for any text in your mobile form, including labels, placeholders, and button text. 

Leave enough space between individual actions in your form so that users don’t struggle to click into the field they want. Otherwise, they may decide to walk away rather than to continue trying. 

As you build your form, try to make it as difficult as possible for users to make a mistake. Test the user experience on different types of devices. 

Any “touch targets,” such as input fields or buttons, should be big and easy to click. 

The average adult finger is 11 mm, which is around 41.6 pixels. To account for this, a best practice is to make touch targets at least 48 pixels. 

Use a form teaser so mobile visitors can open and close the form as desired while they browse, and so the form doesn’t cover up your site’s content.
Note that Google has a penalty on sites with intrusive interstitials. Teasers help avoid this penalty, but you should also use a long time delay with forms. 

Color contrast is the difference in light between text or objects in the foreground and the background. Good color contrast improves your form’s readability, and it is a key component of accessibility. Use a color contrast checker to check your color contrast.

The smallest contrast is 1:1 and is impossible to read (think white text on a white background). The highest contrast available is 21:1, or black text on a white background. In other words, the larger the ratio, the better the contrast is. 

Under the Web Content Accessibility Guidelines (WCAG), the minimum color contrast is 4.5:1 for small text, images, and text in images and 3:1 for large text or important elements. 

Ideally, the contrast should be even larger. According to WCAG, a better minimum is:

• 7:1 for smaller text, images, or images of text
• 4.5:1 for larger text, key visual elements, etc. 

It’s important that everyone can appreciate the content you work so hard on. Using certain color combinations can make the form difficult or even impossible for some groups to read. 

As for which ones to not use, keep in mind that there are many types of color blindness (it’s not just red and green).