Improve website conversion rates with autocomplete

Here's a small tweak to the contact form on your website that'll make it easier for people to complete it.

Adding autocomplete to your form fields is one of those 1% kaizen improvements. They all add up.

Autocomplete (aka autofill) lets your web browser (Chrome, Firefox, Safari etc.) save information like your name, email address etc. and later automatically fill that in. It makes filling in forms faster and easier, especially on mobile.

Faster and easier = more people filling in enquiry forms = more sales leads.

In the perfect world web browsers would be able to put your name, email and phone number into the right places on a web form. But in the real world that doesn't happen.

We geeks have our conventions for naming form fields. It's something we're stupidly attached to. (Think Mel Gibson in Braveheart: "They may take our lives but they'll never take our freedom... to use whatever field naming convention we want.")

So you get form fields named first_name, last_name, fname, lname, f_name, l_name, name_first, name_last, firstName, lastName, FirstName, LastName, givenName, surname and about a thousand other variations. It'd be a miracle if a web browser got that right.

The solution is to tell the web browser exactly which field is the first name, which is the last name etc. You do this by adding the autocomplete attribute to form fields.

Autocomplete is part of the HTML specification, so the arguing about whether first_name or fname is right has already been done.

Here are the most commonly used autocomplete attributes for enquiry/contact forms.

• Use autocomplete="given-name" for your first name field.
• Use autocomplete="family-name" for your last name field.
• Use autocomplete="name" if you don't ask for a separate first and last name and just have a full name field.
• Use autocomplete="email" for your email field.
• Use autocomplete="tel" for your phone number field if you're running an international site and want phone numbers in the international format, e.g. +44 752575718.
• Use autocomplete="tel-national" for your phone number field if your visitors are all from one country and you don't need the country code, e.g. 07525757178.

Here's what the HTML for a first name input would look like.

<input type="text" name="first_name" autocomplete="given-name">

The full specification is here if you're interested:

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

Related articles

The hook-to-page rule

The 8-Part Landing Page Layout That Turns Google Ads Clicks Into Leads

How I Make Writing the Company Profile Section of Landing Pages Easier

Can 2FA Reduce Contact Form Spam, and Should You Use It?

The Missing Piece on Most Service Business Landing Pages

A Fix for Low Conversions: Separating the Sale from the Paperwork

Topics you'll find on this site