Web Forms Best Practices

The Tree

Here are some of the rules that will help you build better forms. As we know, it’s a mobile world, so we wish our forms to be responsive and mobile first by nature. Let’s see how to do it right.

Use big font size and provide easily touch buttons

Here it’s simple, when you have doubt, make things bigger and check. In other words, you wish your fonts to look great both on mobile and desktop. For mobile, a rule of at least 16px will be a good start. Why? because it’s big enough in most cases for mobile. Plus,  this minimum size will prevent all iPhones from zooming into the fields. For buttons and touch areas, start with at least a size of 32px for the input field height. This will ensure it’s not too small. However, check it both on mobile (few devices from 4″ to 6″) and on larger screens (=desktop or large tablets). Both Foundation and Bootstrap gives you a default size for such elements that is good for mobile.

Take advantage of Autofill

This will enable your users an easy way to complete forms with pre-populated data.  Look for opportunities to pre-fill information you already know (e.g. Geolocation to fill the zip code), or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user. See it in action at:

Size the fields according to their expected length

A form that sizes the input fields according to their expected length is easier for the user. We guide her by showing what is the expected length. For example, a zip code field should contain a space for 5 characters (or more if we are targeting a country that got a longer zip codes) and the address should be longer as street names are longer.

Use the correct HTML5 input types

This will give our users the right optimized keyboard. It’s powerful and simple way to improve our user experience. In the table below, you got the most popular input types.

Input type


For entering a URL. It must start with a valid URI scheme, for example http://, ftp:// or mailto:.

For entering phone numbers. It does not enforce a particular syntax for validation, so if you want to ensure a particular format, you can use pattern.
For entering email addresses, and hints that the @ should be shown on the keyboard by default. You can add the multiple attribute if more than one email address will be provided.
A text input field styled in a way that is consistent with the platform’s search field.
For numeric input, can be any rational integer or float value.
For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control.
For entering a date and time value where the time zone provided is the local time zone.
For entering a date (only) with no time zone provided.
For entering a time (only) with no time zone provided.
For picking a color.

Provide both a general error message and a field specific one

It is a good idea to provide both a general error message, and a field specific one. When a form gets submitted, the user will end up on the same page, but you don’t know if the error is in the viewport. Put both an error on top of the form (and make sure it is in the viewport on both desktop and mobile) as well as field-specific explanations about what is wrong with the inputted data. There are cases, where it’s best to let the user know something is not correct once they moving to the next field (e.g. email verification field). This will help the user understand that she needs to fix.

Make it clear what is optional and what is not

This one seems obvious, but all too often it is not clear which fields optional and which are not. Using * (=an asterisk) next to the label is a good way to make it clear. If the required attribute is present, then the field must contain a value before the form can be submitted. For example, to make the zip code required:

<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>

Break forms to sections

It’s a good idea to break your form to sections and provide the users with a progress bar. Moreover, try to hide what is not needed until it is needed. A classic case will be an e-commerce site where your shipping address might be the same as your billing address.

For more visual rules with explanations, please checkout the slides (start at 14) below.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s