Make web forms mobile-friendly with autocomplete

Responsive web design is about to become an absolute imperative, as Google are now assessing websites for their mobile-friendly attributes, and will rank mobile search results accordingly.

So you need to be doing everything you can to make sure your site is as mobile-friendly as possible – and once you’ve got your responsive web design down, there are still a few more things to try.

One possibility is to add ‘autocomplete’ markup to any web forms you use, including ecommerce checkout pages, to allow visitors’ mobile devices to automatically fill in repetitive details like their name or address.

It is easy to do this – for example, a text input for the customer’s email address might originally look like this:

<input type=”email” name=”customerEmail” />

To allow autocompletion, you just have to add the correct autocomplete attribute to the element’s code:

<input type=”email” name=”customerEmail” autocomplete=”email”/>

The full list of elements to which you can add the autocomplete attribute includes names, addresses, organisations, credit card details, date of birth, telephone numbers and so on.

Mathieu Perreault, Chrome software engineer, and Zineb Ait Bahajji, webmaster trends analyst, wrote on the Google Webmaster Central blog: “Making websites friendly and easy to browse for users on mobile devices is very important. We hope to see many forms marked up with the autocomplete attribute in the future.”

And if Google hope to see it, you can bet it’s worth including on your site to maximise the ranking benefits of having a mobile-friendly responsive web design in place.