How to make web forms work better on mobile

Making your web forms responsive is not a topic that's discussed too often. Mostly because it's not a huge deal to get HTML form elements to behave in a responsive manner – that is, to be both liquid and to utilise targeted screen widths with media queries to serve up specific form layout changes.

The main thing is to consider the context in which a person will be using the form. This a question of thinking through the device you are targeting, not just its screen size. Let's look at a couple of examples that help illustrate my point.

Field sizing

First, field sizing is important on smaller screens when people are using their fingers to target a form field. When using our phone, we do not have the same level of precision as we do with a mouse. Apple's Human Computer Interaction Design documentation has some great in-depth information on how to design for people who are using their fingers to interact with a device.

Another consideration when designing a responsive layout is the placement of form elements in relation to their respective fields. On desktops and iPads, having the labels left-aligned makes the form appear simple to complete.

If we change the same form on an iPhone's screen so the labels are on top of the fields, this makes the user slow down a little. As mobile users often have their attention split between different tasks, this should help focus their efforts. Accuracy is more important than speed.

Here are some examples:

Here’s a great example of a typical desktop browser-based contact form: the MCD Partners website (mcdpartners.com/contact). Notice the field titles are left-aligned on this version of the form.

Here’s a great example of a typical desktop browser-based contact form: the MCD Partners website (mcdpartners.com/contact). Notice the field titles are left-aligned on this version of the form.

This is the same form for the MCD Partners website, but on an iPhone. Here, the field titles are stacked vertically to save space and make things easier for the user on the long scrolling page.

This is the same form for the MCD Partners website, but on an iPhone. Here, the field titles are stacked vertically to save space and make things easier for the user on the long scrolling page.

The main form on the talent recruiting company The Supply’s website (thesupply.com) uses inline form field labels, to create much the same effect as the other examples.

The main form on the talent recruiting company The Supply’s website (thesupply.com) uses inline form field labels, to create much the same effect as the other examples.

Words: Gene Crawford

Gene Crawford's mission is to work tirelessly to provide inspiration and insight for developers, mostly via unmatchedstyle.com. This article originally appeared in issue 271 of net magazine.

Like this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.