Optimize your forms for Mobile

Share on Facebook0Tweet about this on Twitter

Do you enjoy filling out forms on a mobile browser? If you answered yes- you’re lying. Our fingers are way too big and clumsy to complete this process quickly and efficiently. Also, your submission and validation speeds are at the mercy of your carrier’s network. We’re likely browsing on our phones to kill some boredom or for a quick web fix. More often than not, if I’m browsing on my mobile phone and I am asked to fill out a lengthy form, I politely say “no thank you” and trek on.

We as developers do not want people to “trek on” without filling out our precious forms. Our conversion rates are very important to us because higher conversion rates mean more sales, newsletter subscribers, sales leads, or job candidates.

It’s becoming a well-known fact that more and more smart phone adopters are browsing the web on the go (check out mobiThinking for excellent statistics and analysis). We don’t ever want to assume that people will be visiting our sites and filling out our forms on a desktop/laptop with a keyboard at the comforts of their desk (like we are when developing & designing these forms). We want to consider people riding on a cramped subway or killing time during a commercial break.

So the question remains – how can we get more people to fill out forms? The answer is to make it easier to do!

1. Take advantage of new HTML5 input types.

If you have a form field; say Number of ice cream scoops, you don’t want the users of your form to have to tap the number button to bring up yet another set of keys. This is an extraneous step that is not necessary.


You can do one of two things. You can either use an input type of number:

[sourcecode language=”html”]
<input type="number" />


Or an input type of tel:

[sourcecode language=”html”]
<input type="tel" />


Whichever you decide to use- you just saved your form user an extra tap. Here are a couple more examples of input types to take advantage of (take note how the keyboard changes):

[sourcecode language=”html”]
<input type="url" />


[sourcecode language=”html”]
<input type="email" />


2. Abbreviate your form by excluding certain fields.

Ideally, mobile forms should be easily viewed in their entirety on one screen. It’s less intimidating this way and ultimately easier and quicker to fill out. Check out Apple Rubber’s mobile contact form for a great example:

Great mobile form

There are a modest five form fields (only four are required) and it can be viewed in-full on one screen. There are also some key deletions we are accustomed to seeing on contact forms: Address, City, State, Zip, Country. If you need these form fields, you can retrieve [most of] them in the following ways:

  • Independant research from the Company entry
  • An IP-based Geolocation service like Maxmind
  • Rely on details given in the Comments entry
  • Take advantage of HTML5 Geolocation

When developing and designing your forms, ask yourself (or the client) “Do I really need to collect this much data?”.

3. Mask your inputs.

Have you ever had a form field prompting you to enter your phone number? (Me, too!). Have you been told that your phone number is not valid when you know it is? Don’t make your form user guess – provide a mask using one of these two methods:

Use the placeholder attribute:

[sourcecode language=”html”]
<input type="tel" />


Or use the placeholder attribute plus some JavaScript to automatically format your phone number for you. This option requires some time and patience, but you’ll prevent a headache for your form user.

Take a look at my live example here: jsFiddle (I use jQuery to get the job done).

If you’ve got forms that don’t follow all of these guidelines- fix them! You could be missing out on that next big sale!

If you have ideas or arguments, engage with us in the comments below, or chat with me on Twitter @mike_petruniak.

Leave a Reply

Your email address will not be published. Required fields are marked *