Make your forms mobile-first

An increasing number of website owners are aware that the contact or order forms on their sites leave something to be desired on mobile devices. But if you’re getting yours redesigned, what should you be telling the designer? Here are a few tips.

Rule number one is to have the form in a single column, preferably with the form labels above the form box. Most mobile devices are used in a portrait format, and you don’t want stuff hidden off to the right of the screen, or compressed to the point of illegibility to fit it in. The simplest format is a label above each field, but be certain that the separation of fields is clear enough that nobody starts thinking a label refers to the field above. One clever arrangement I’ve seen is to have the label inside the uncompleted field, but when the user starts typing, for it to move up above as a reminder. However, it should be clear that the initial label is just that, or the user could assume the field has been pre-filled.

Much more than in desktop browser forms, it’s important to keep mobile forms simple. Any form of automated form-filling that you can introduce will be welcomed. Auto-completion of town/city names is one possibility. Also, try to avoid drop-downs, which aren’t nearly as elegant to use on mobile devices. Selector buttons are nice, as are up/down ‘stepper’ buttons to indicate quantities.

If you only have one form, make sure it’s the mobile-first one. This will almost certainly work fine on desktop browsers.