Home Resources Blog

Mobile-friendly form

Recently, we were asked for advice on how to make our email subscribe forms more mobile-friendly. The good news is that mobile devices like iPhone and Android handsets generally do a good job of making forms at least remotely usable these days, however there are a couple of things us designers and coders can do to make them as easy-to-use as possible. The obvious benefit to optimizing your forms is that they require less time and effort to fill in on a mobile device. To you, this means higher completion rates and more subscribers.

In this post, we’ll cover a couple of pointers, plus feature a simple example you can use as a starting point for your own subscribe forms.

Top-align those labels

A common boo when it comes to using forms on a mobile device are having labels that reside out of sight when a form field is selected in a mobile browser. At the initial zoom-level, a left-aligned label like ‘Enter your email address:’ may be visible, but as soon as you start entering text, the viewport zooms-in and the label is flung out of sight.

The solution is to either use a top-aligned label, or add the form label as a text-field value. The latter requires less vertical real estate, but can be a little annoying if the field you’ve just started filling in was initially hidden by the phone’s “Form Assistant” or keyboard.

Our subscribe forms come with top-aligned labels by default – which is a good thing.

Use input type=”email”

Talking about form assistants, Kevin in the comments made a great suggestion – if you use input type="email" on the email address form field, a special keyboard will display in iOS devices, featuring commonly used characters like @. David Walsh features a couple of added advantages to this method in his post on HTML5′s “email” and “url” Input Types. Thanks, Kevin!

Narrow down your forms (if not the entire site)

We’ve spent a lot of posts talking about designing responsive layouts for email using CSS, but now we’re talking about the web, it’s possible to do away with the usual caveats on poor CSS support on Android devices and all that. A grand vista has opened up. We are free.

I’m sure I’m not the only one that takes great pleasure visiting Colly-style responsive sites on a mobile device. The good news is that the same techniques that are applied to sites can be used on individual forms, too. Adding mobile-specific CSS using @media queries to go narrow-gauge and remove visual clutter can really improve the usability of forms. After all, there’s nothing more clunky than having half a text-input field disappear off the screen.

Personally, I favor using fluid layouts for mobile devices, simply because you can’t predict the viewport’s dimensions or orientation. Simply making a text field’s width say, 80% of the viewport width can massively improve the appearance and usability of our subscribe forms.

No love for lightboxes

Lightboxes - egads!

I’m sure there are tasteful email subscribe form lightboxes that have been optimized for use on mobile devices. But 99% of the time, they make sites almost impossible to use on smaller screens. Make sure you test your lightboxes on a mobile device before you use them in this manner.

Be mindful of multi-option fields

While we’re talking about narrow layouts, it’s prudent to force all content to flow in a single column – particularly checkboxes. When inline form options wrap, things can get all kinds of hairy. Often drop-down lists are a better option over radio buttons and reduce the amount of scrolling required to navigate the form.

Take a stand on scale

Finally, a lot of these tips here haven’t been specific to forms – more like web design in general. Included is the idea of setting the initial scale/zoom on a mobile device using a viewport meta tag, especially when building stand-alone forms. When applied, they can prevent the user accidentally zooming in unnecessarily and losing sight of most of the form. Here’s what a typical viewport meta tag looks like in the head of an HTML page:

<meta name = "viewport" content = "width = device-width, user-scalable = no" />

For a couple of variants on this, check out Mozilla’s docs.

Check out our sample form

We decided to collect a couple of these tips and quickly mock up a simple CSS template that you can plonk our ‘Basic formatting’ subscribe form code into. You can view it in your browser and on your mobile device using this short link: bit.ly/cm-mob-form2.

Feel free to repurpose the CSS, play with the @media queries and use it either as a stand-alone form, or on your pages. Thanks to Buzz for providing a starting-point for this form.

Now, I’m a lazy coder and this is far from an exhaustive list of form usability tips.
Can you suggest some more ways to optimize subscribe forms for mobile devices? Share them with us below.

  • Kevin

    Here’s a good tip: Use input type=email! That will make your users much happier when they have to enter an email address in your form, as iOS shows a special keyboard with the commonly used symbols.

  • Ros Hodgekiss

    Thanks Kevin, that’s a brilliant tip. I’ve just updated the post to include that one – love your stuff! :D

  • Sérgio Lopes

    Please, don’t use “user-scalable=no”, it’s bad UX and antipattern. People on touch devices are used to zoomable content, and yes they still want do zoom your page even when it’s already mobile optimized.

  • Yoosuf

    I personally prefer “user-scalable=no”, and its a great post

  • Julian Wellings

    Kevin / Ros – Presumably then we can use… input type=”email” ..as a matter of course on all web forms?
    If that is the case could CM tweak their code generator to include this automatically?

  • Ros Hodgekiss

    Julian – It’s definitely something for us to consider. I’ll note this as an improvement internally and we’ll look at whether there could be any potential downside to rolling this out across the board. :)

  • Wolf

    I design most forms on the web like the top right form in the blog post. But when designing a native app I would do something like this: http://cl.ly/0V0c3s3s3v2Y332H2j2n (iOS forms as it should be). A similar layout could be implemented using the HTML5 placeholder attribute and webkit appearance “none” for form fields (this would only work on sufficiently advanced browsers).

    This allows you to show the form and a full keyboard (1/2 of the screen) comfortably.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free