Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Forms On Mobile Devices: Modern Solutions

Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller; connections are slower; text entry is trickier; the list goes on. So, limiting the number of forms in your mobile applications and websites is generally a good idea. When you do want input from users on mobile devices, radio buttons, checkboxes, select menus and lists tend to work much better than open text fields.

But constraints breed innovation, and mobile forms are no different. The limitations of mobile devices have forced developers and designers to find new ways to allow users to input data faster and more easily. Thanks to the modern solutions covered in this article, the mobile space may not be a place to avoid forms much longer. Instead, it may become the place to encourage them.

You may also want to check out the following Smashing Magazine articles:

Field Zoom Link

In many mobile Web browsers, when a user selects a form’s input field, the “field zoom” feature expands it to fill the screen’s viewable area. This makes an otherwise tiny field large enough for people to actually see the data they are entering. Given that many form errors are caused by people not seeing their inputs well enough to correct misspellings4, the usability of this feature is clear.

The Safari browser on Apple’s iPhone makes use of field zoom together with a “form assistant.” The form assistant displays “Previous,” “Next,” “AutoFill” and “Done” buttons below the magnified input field, giving people an easy way to move through and complete a form. No need to worry if an input field is off screen: the user just hits “Next” and won’t miss it!

However, not everyone will know about the form assistant or know how to hide the keyboard. So, make sure the controls on the Web page still allow them to complete the form. Excessive spacing around the “Submit” button can tuck it behind the keyboard.

Field zoom is another great reason to top-align input field labels5 in forms. As you can see on Google’s registration form (screenshot below), left-aligned labels disappear when input fields are expanded to fill the screen. With no visible label, the user can easily forget what question they have to answer. Long input fields also suffer a bit with field zoom.

Mobile browsers that don’t have field zoom also run into issues with left- and right-aligned input field labels. Anyone using such a form on Google’s Android OS (below) faces the problem of disappearing labels. The screen simply does not have enough room for both the input field and its corresponding label. Top-aligned labels avoid this issue.

Input Formats Link

Some mobile Web browsers recognize specific input types6 (part of the developing HTML5 standard) and adjust their input modes accordingly. For example, specifying an input of the type url brings up a virtual alphanumeric keyboard with “.”, “/”, and “.com” keys. Specifying an input of the type email brings up a virtual alphanumeric keyboard with “.” and “@” keys. Specifying an input of the type number brings up a virtual numeric keyboard.

These input-specific keyboards make entering the particular type of data required by each input field much easier. Even browsers without virtual keyboards benefit from the use of number, because users would not have to switch to number mode to enter numeric data.

Password-Masking Link

Most password input fields in forms instantly obscure all characters that a user enters to keep sensitive information hidden from prying eyes. Automatic masking of passwords may provide the appearance of security7, but it can also create usability issues when people are left staring at a row of bullets that they hope (but can’t verify) is their password.

Many mobile devices address this issue by displaying the most recent character the user has entered, and then obscuring that character as a bullet only after a brief delay. This technique has made its way onto the desktop, as illustrated in this password-masking solution8 from ZURB.

Pop-Up Menu Controls Link

Drop-down select menus are one of the hardest input types to use. First, you have to click on the menu to open it. Then, you have to maneuver through a potentially long list of small targets. Once you find the value you want, you need position your cursor on the right target and select it. To top it off, many implementations of drop-down menus on the Web require you to keep your cursor on the menu while navigating the list, or else the menu closes!

Even dexterous users often miss them and need to start over. Couple this interactive challenge with the small screens of mobile devices and the need for a different solution for select menus becomes quite obvious.

For drop-down select menus on Web forms, Apple’s iPhone presents users with a pop-up menu control. This control displays the options in the menu in a contained list that can be scrolled at various speeds though drag, nudge and flick gestures. The large touch targets also make it easy to select the right value once you’ve found it.

Similarly, Google’s Android provides a larger touch target for select menu options. When the user taps a drop-down select menu on an Android device, a scrollable list of menu options appears in a dialog window over the Web page.

Compound Menu Controls Link

Pop-up menu controls can be applied to compound inputs as well. So, instead of requiring three separate input fields for the month, day and year of a requested date, one date field can bring up a set of pop-up menus that allow people to scroll through three lists at once to find the right date. This approach can be applied to other kinds of compound inputs as well, such as height in feet and inches.

Google’s Android has a compound input field solution, though it makes use of visible interface elements to move through a list instead of relying on gesture-based scrolling alone.

Native Input Controls Link

In addition to having compound menu controls, most mobile operating systems have several other custom input controls available to application developers. Sliders, split buttons, rating widgets and scrubbers are just a few of the components worth considering in place of standard form controls to make inputting easier for users.

Orientation Link

Because people like to hold mobile devices both horizontally and vertically in their hands, mobile forms should adjust accordingly to take advantage of the changing screen space. The compose email form on Google’s Android does just that.

When held vertically, the screen shows three input fields with several action buttons. In the horizontal position, the email body input takes over the screen, and one action button is shown on the right. This layout maximizes the screen space available for the message content.

Voice Input Link

Google’s Nexus One9 phone allows people to use voice input for any text field in an application. Users can swipe the virtual keyboard to switch the phone to audio input mode, or they can use the microphone button. The video below demonstrates both of these options in action. With effective voice input, typing any characters into the mobile device becomes a thing of the past.

What’s Next? Link

Mobile is growing exceptionally fast10, and as more designers and developers focus on the space, we’ll hopefully see even further innovation in mobile forms. After all, anything that makes inputting (both on mobile and desktop devices) faster and easier will do a lot of good for both companies and their customers.

About the Author Link

Luke Wroblewski is an internationally recognized digital product design leader11 and the author of two popular Web design books12. You can follow Luke on Twitter @lukewdesign13 or by using RSS14.

Smashing Magazine readers can get a special 20% off discount on Luke’s latest book: Web Form Design Filling in the Blanks. Just use discount code MIX to order.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14

↑ Back to top Tweet itShare on Facebook

LukeW is an internationally recognized Web thought leader who has designed or contributed to software used by more than 600 million people. He is currently Senior Director of Product Ideation & Design at Yahoo! Inc., author of two popular Web design books, and a top-rated speaker at conferences and companies around the world. You can follow Luke on Twitter at lukewdesign or by using RSS.

  1. 1

    Great article, gives a good insight on how forms work on mobile devices!

  2. 6

    Awesome, thank you!

  3. 7

    Awesome! Ok, but “mobile devices” is not only iPhone and Android. Where is eg. Symbian and its mobile web philosphy and interface?

  4. 8

    What about the file upload button ? :(

  5. 9

    Any examples of good UI design on a Nokia?

  6. 10

    Orientation is great – how is it implemented?

  7. 12

    Ionut Botizan

    March 11, 2010 6:10 am

    Well, the iPhone Password-Masking way is not actually the iPhone way. Nokia had that long before the iPhone came out, so here’s an example of good UI design. :)

  8. 14

    I’ve been a recent iPhone converter and I’ve noticed on several occasions while filling web forms, of how simplistic and intuitive it is.

    I am curious though, is there a way to set the phone up to have a specific keyboard come up as default. I tend to have to fill in my email address often, but the URL keyboard seems to be the default on my input fields. The EMAIL keyboard would be preferred, but it’s likely not specified. What’s a work around for this, or would it be more prudent for a designer to set EMAIL as the default keyboard out of the gate?

  9. 15

    Tom - Airopia

    March 11, 2010 7:28 am

    Good idea for an article.

    I’m starting to scratch the surface for ideas in develpoing a mobile version of my site, and this helps. I was also wondering if it would be a good idea to make a rss feed app for the iPhone?!

  10. 16

    Wendell Fernandes

    March 11, 2010 8:07 am

    A good way to get this going as well, is to create a form where if you click on a specific field, you can get another screen template just for forms, since you are going to at lease design the whole app, why not a better form screen template?

  11. 17

    How do you make such “compound menu controls” in html? Or did I overlook the html code for them?

    • 18

      I also hope Luke can tell us how to do them.
      I’ve searched on Google but i can’t find anything about that.

    • 19

      The compound menu controls are OS-native controls rather than Webkit-native controls, so it is not possible to use them in HTML.

      There is a JavaScript solution at, but keep in mind that if you use this, people on other mobile devices may be confused. It is not good practice to emulate OS-specific interface elements in this way. If you’re on a Mac & a webpage uses Windows-native interface elements for example, it will not be a comfortable experience for you.

  12. 20

    One thing that this article didn’t touch upon is form inputs such as search boxes that depend on the user pressing the Enter key to search (without any “submit” button) or select menus that perform an action (such as navigating to a new page) when the user clicks on a particular choice. Such controls fail on many mobile platforms.

  13. 21

    I have just myself begun working on converting some forms for mobile devices … very handy.

  14. 22

    Awesome, thank you!

  15. 23

    This is a great article and more and more we should be seeing these kinds of postings. One thing though, your examples are showing web development for the big 3 of mobile browsers. What I mean by that is that they are the most powerful and should only be one facet of your mobile web dev kit. Many device manufacturers have their own browser “baked” into the device and allow little control for appearance. The legendary RAZR for instance had its own (horrible)font that no amount of style sheets could override. Sure each manufacturer is or has made an Android and possibly Web OS friendly phone, but many of their offerings in the near future include whatever default browser has been baked in. Especially since those phones don’t have the power or the size, and aren’t as cheap to sell as the big smart phones.

  16. 24

    Good article but ugh onscreen keyboard.

    The world is more than iphones. Palm’s webOS for the Pre and Pixi is a great mobile OS.

  17. 25

    Cool article, you just forgot one thing:

    Why not include Opera Mini? The most used browser world-wide! With it’s introduction on Android and perhaps iPhone soon it’s just stupid to skip them..

  18. 26

    I’m all for modern. But this clearly accounts for western high-end experiences on top devices.
    Get to the real everyday people all over the world: they don’t have these phones.
    And that’s the real market for which we need creative design and usability solutions .

  19. 27

    It’s interesting to see some of these standards, and I realize why you focused on iPhone and Android – because they have the best UI/adherence to standards. But how well do these things work on Blackberry phones (both 2G models like Curve & Pearl, and 3G models like Bold & Storm)?

  20. 28

    Good points, I’ll forget to go back to register if I can’t easy sign up on the go!

  21. 29

    Jon Peterson

    March 17, 2010 7:43 pm

    I love the article overall, but I would like to point out that the Password Masking solution provided by ZURB is (while visually appealing) inelegant and buggy. It is far simpler, and likely more effective, to merely toggle the input element’s Type between “password” and “text”. I have added a comment on the ZURB site with an example using a checkbox as a toggle, but it would be easy to adapt it to a button or radio switch.

  22. 30

    Awww man this stuff is soo cool! Thanks for the input type tips and such, bringing control to the minute, mobiles is a lovely step deeper in the details!


  23. 31

    very interesting tips .. I have just started to create a website for mobile.
    Thank you so much. it will really help me..

  24. 32

    For those with Windows smartphones, there is a product called ElectroForms ( that provides an iPhone-style interface to Excel.

    Useability is everything – worth a look!

  25. 33

    Thanks for sharing, Twapt is same …. Mobile Form Builder helps you build forms, in just minutes, without any programming or design experience.
    Your clients and visitors will be able to contact you anytime, anywhere, because your forms are accessible and can be filled from every mobile phone in the world.
    Whether you want a contact form, a quick survey, an inscription form, employee reports, opinion polls, or any other input, using Mobile Form Builder – 5 minutes and you’re ready to go. Everywhere.

  26. 34

    This is great but that compound input for multiple drop-downs is hard to find. Any pointers for example codes to call up that view?

  27. 35

    Bailey Digger

    July 6, 2010 8:13 pm

    Hi Christian,

    We just posted an article, “100 Great Graphic Designers to Follow on Twitter” ( ) . I thought I’d bring it to your attention in case you think your readers would find it interesting.

    Either way, thanks for your time!

    Bailey Digger

  28. 36

    Blaze Pollard

    July 20, 2010 12:58 pm

    Ajax’d Form with Fancy Email

  29. 37

    This article is misleading in that it mixes up OS-native controls with browser-native controls.

    For example, compound selectors such as the iPhone’s slot machine style selectors are not available within Webkit, so cannot be used in a web-based application.

    Forms on mobile devices still have a long way to go – the controls available to us in mobile Webkit are not well optimised for mobile devices. HTML5 does help to some extent with URL, number & email input fields, but there is a long way to go.

    • 38

      Daniel Jimenez

      March 21, 2012 5:54 am

      Thanks for the clarification. Do you know of any reliable javascript (perhaps jquery) that provides a similar behaviour for “compound menu controls”?

  30. 39

    Hi ,

    you can paremeter / develop and test freely the forms for Windows CE or WM Windows Mobile/PDA with Tracerplus :
    and share /download such applications on (integraption on GPS: RFID / Barcod is also embeded

  31. 40

    Thanks for this – I’m building registration forms for mobile and appreciate some of your factors to consider, such as top-aligned labels and expanding input boxes for horizontal/vertical viewing.

  32. 41

    This was a very informational topic. I learned a lot about web forms and I cannot wait to implement web forms on my portfolio! ♥

  33. 42

    Great article. I just want to add that with the rise of smart phones, comes the rise of surveys that are compatible with smart phones. The power of speed and feel is very important as smart phones are small and users expects fast actions. allows you to create surveys that are not only compatible w/ smart phones but the look and feel of the surveys will be native to each device as well.

  34. 43

    Tim from IntuitionHQ

    March 11, 2012 11:02 pm

    You made some great points. Interesting read. Thanks

  35. 44

    Daniel Jimenez

    March 21, 2012 5:51 am

    I am wondering if “compound menu controls” are achievable in a mobile WEB app instead of a Native app? I have looked and have’t found any explanation or leads. Any ideas?


↑ Back to top