Mobile Forms: Coding Them Correctly

In a previous post I looked at best practice in mobile UX, and identified 4 tips that will give your users a better experience of interacting with your site on mobile devices.

In this tutorial I’ll focus on the UX for forms on mobile devices, taking you through the techniques to improve your forms on mobile (and as a side effect, on desktop too). We’ll start with a simple, unstyled and unoptimised form and work through the steps necessary to increase the number of users who’ll complete that form because they find it easier to do so.

The starting form

The form I’m going to work with here is a sign-up form for a blog or community website, which asks users to provide some information about themselves and to upload a photo. 

The form includes the following fields:

  • name
  • email
  • website
  • telephone number
  • date of birth
  • photo
  • favourite colour
  • prove you’re human: 3+2=?
  • submit

Here’s the starting code for the form:

<form method="post" action="showform.php"><label>Name:</label><input type ="text">
	<label>Email address:</label><input type ="text">
	<label>Website:</label><input type ="text">
	<label>Telephone number:</label><input type ="text">
	<label>Date of birth:</label><input type ="text">
	<label>Photo:</label><input type ="text">
	<label>Favourite colour:</label><input type ="text">
	<label>Prove you're human: 3+2=?</label><input type ="text">
	<input type="submit" class="submit">
</form>

This produces a very basic form, which looks as follows when viewed on an iPhone:

mobile-forms-starting-form

Not very pretty, and difficult to interact with for a few reasons:

  • the input fields haven’t had the relevant virtual keyboard assigned to them, which will mean it takes longer for users to add data to them
  • it would be easier for users to input their own details if the device did this automatically 
  • using a straightforward input form for dates means users have to type a date in manually, making errors much more likely
  • the favourite colour field is a straightforward text field – it would be easier for users if they could choose from a range of responses
  • the photo field needs some work so that users can actually upload a photo
  • the input fields are small and close together, meaning users might tap the wrong one
  • the submit button is small and may be difficult to tap on

So, I’ll work through those issues and fix each of them in turn.

1. Accessing the appropriate virtual keyboard

Touch screen devices use virtual keyboards which appear on screen when the user needs to type, for example when inputting data to a form field. On some devices, such as iOS and Android devices, there are multiple keyboards which could appear, and it makes it much easier for users if you access the correct one.

The four virtual keyboards are:

  • text (the default)
  • numerical
  • email
  • url

So, which keyboards should we be using for the fields in our form?

  • name – text keyboard
  • email – email keyboard
  • website – URL keyboard
  • telephone number – numerical keyboard
  • favourite colour – text keyboard
  • security question – number keyboard

You’ll notice that this list doesn’t include all of the input fields – this is deliberate because I’ll be changing them to a different input type shortly.

The code for the form with the correct keyboards applied is:

<form method="post" action="showform.php">
	<label>Name:</label><input type="text">
	<label>Email address:</label><input type="email">
	<label>Website:</label><input type="url">
	<label>Telephone number:</label><input type ="number">
	<label>Date of birth:</label><input type="text">
	<label>Photo:</label><input type="text">
	<label>Favourite colour:</label><input type="text">
	<label>Prove you're human: 3+2=?</label><input type="number">
	<input type="submit" class="submit">
</form>

When the user taps on the website field, they see the following keyboard:

Mobile forms - URL keypad

And when he or she taps on the security question, the numerical keyboard appears:

mobile-forms-numerical-keypad

As you can see, this saves the user having to switch keyboards, makes the process quicker and easier – and increase the chances of people actually completing our form.

2. Accessing user contact details

Most forms require users to input some sort of personal data. This almost always includes their email address, but may also include name, address and/or telephone number.

Typing these in can take time and be a pain. On most mobile devices, it’s possible to automatically fill contact fields with this information.

To enable my form’s contact fields to access this information, I need to give the name, email address and telephone number inputs a name attribute:

<form method="post" action="showform.php">
	<label>Name:</label><input type="text" name="full-name">
	<label>Email address:</label><input type="email" name="email">
	<label>Website:</label><input type ="url">
	<label>Telephone number:</label><input type="number" name="phone">
	<label>Date of birth:</label><input type ="text">
	<label>Photo:</label><input type ="text">
	<label>Favourite colour:</label><input type="text">
	<label>Prove you're human: 3+2=?</label><input type="number">
	<input type="submit" class="submit">
</form>

Now when the user accesses one of these fields, they will be able to use the AutoFill button to populate the fields automatically:

mobile-forms-autofill

3. Optimising the date input field

The next field to look at is the date of birth field. I could have kept this as a numerical input, meaning the numerical keyboard would appear when the field is tapped, but it makes thing much easier to change the input type to date, as follows:

<label>Date of birth:</label><input type="date">

Now when someone taps on this field, they see the device’s native date picker, making it easier to select a date without having to do any typing.

mobile-forms-date-picker

4. Using a drop down box for select input types

Next we need to improve the favourite colour field. For the sake of this exercise, I’m going to assume that users only have a limited number of colours to choose from on this form – let’s use the colours of the rainbow.

The current code for our select box is:

<label>Favourite colour:</label><input type="text">

We replace that with:

<label>Favourite colour:</label><select name="colour">
	<option label="red">
	<option label="orange">
	<option label="yellow">
	<option label="green">
	<option label="blue">
	<option label="indigo">
	<option label="violet">
</select>

And when the user taps on that field, this is what appears:

mobile-forms-picker

A nice straightforward select box, making it quicker for users to input the data and also meaning that if you do need responses from a finite list of possibilities, there won’t be any errors or weird answers.

5. Adding the ability to upload an image

UIf you need users to upload images to your form, you can add a field which lets the user upload an image from their hard drive if they’re on a desktop, or from their photo stream or camera roll on an iOS device, or even by taking a photo specially for the upload. Let’s add it to this form.

The code to add a photo upload field is:

<label>Photo:</label><input type=file accept="image/*">

This adds a ‘Choose file’ button:

mobile-forms-file-upload

And when users on iOS devices tap the field, they see the same input as they would be used to if they’ve uploaded images using apps:

mobile-forms-file-upload-interface

This creates all sorts of possibilities – not only does it increase the number of users who can complete the form, but it also means you could encourage users to upload photos while they’re interacting with a web app or community site – for example on a website for an event or band, people could upload photos of the event or a gig while they’re there.

6. Improving the ergonomics

At the moment the form fields are a bit small and close together, meaning users could easily tap the wrong one if they’re using a touch device. I’ll correct that with some CSS:

label {
	margin: 10px 5% 10px 0;
}
input, select {
	padding: 5px 0;
	margin: 10px 0;
}

This adds some padding and margins to the labels, inputs and select box, giving users a larger area to tap. Notice that the right hand margin for the labels is set at 5% because the layout is responsive.

mobile-forms-margins

7. Styling the submit button

The default submit button in my form is a bit small. I’m going to make a simple change to make it a bit larger and make the text bigger too, so it’s easy to read and to tap.

Here’s the styling:

input.submit {
	height: 44px;
	font-size: 14px;
}

Of course you could add a lot more styling to make the button look less like the default, but what this does is increase the size of the button so that it’s 44px high, which is the minimum recommended height for easily tappable buttons. It’s now much larger:

mobile-forms-larger-submit-button

I now have a button that even the largest of thumbs should be able to tap accurately. The form has some basic styling for ergonomics as well as being coded in a way which will make the process of completing it quicker and easier for users.

Summary

Optimising your forms for mobile users isn’t difficult. It just requires a small amount of consideration and planning, so that your fields can be coded correctly. As we’ve seen from the above worked example, all I had to do was add a bit more detail to the basic markup for the form, which made it much easier to interact with both on desktop and mobile.

So next time you’re coding a form, consider its mobile UX. Make sure:

  • you’re accessing the correct keyboard
  • you replace input fields with select boxes or date pickets where relevant
  • you use the autofill feature when requesting the user’s contact details
  • any buttons are large and easy to tap

Forms which are easier to interact with will make your users love you. You’ll avoid causing them frustration and irritation when they have to keep switching keyboards or type in unnecessary text. And most importantly, you’ll increase the chances of them making it all the way to the submit button and completing the form – and if they don’t do that, then there isn’t much point creating the form in the first place.

Posted in Uncategorized