Supporting Google Chrome’s Autocomplete/Autofill For Registration & Checkout

A few weeks ago at Google I/O Google announced that Chrome is now supporting the HTML5 autocomplete functionality, and that your saved autocomplete information (called autofill in Chrome) will be synced across devices. This would allow you, for instance, to add your address and credit card information to Chrome on the desktop and then allow Chrome to automatically fill out that form information when you’re shopping on your phone. This can be a huge boost for mobile commerce, which is why Google is pushing it so hard. At the time of the announcement I made a note to support this for Detailed Image at some point in the near future.

Then the past week or so we started noticing oddly formatted invalid shipping addresses getting through our system. It was only a handful – less than 10 – but this never happened before. Right away I had a thought that it could be this new autofill feature working incorrectly. Sure enough, each person had registered using Chrome within the past week. After some testing I was able to replicate the problem.

There was some form validation on our end that needed to be cleaned up, but to really make the experience smooth on Chrome we needed to support autofill. Plus there is the added side benefit of likely increasing conversions, particularly on mobile where it’s a pain to type. I figured if I’m in there fixing a bug I might as well turn it into a feature improvement while I’m at it!

Problems started to arise when I went to implement the spec. Google searches kept turning up this official blog post from January 2012 where Google announced experimental support for autocomplete. Because it was experimental, the attribute was named x-autocompletetype. They also linked to the proposed spec. Cool…or so I thought. I implemented it on our development site and nothing changed.

Thankfully someone in the comments of that post linked out to this Chromium wiki page about using autocomplete. It turns out that the attribute is now just autocomplete since it’s been accepted into the HTML5 spec. That wiki page links out to the full spec, which I was able to use to gather all of the necessary fields for our forms.

So now an HTML5 email field with autocomplete enabled might look like this:

<input type="email" autocomplete="email" name="email" />

Everything worked on the first test. In addition to our registration form I also added the autocomplete credit card fields to our checkout page.

I rolled the code out a few hours ago. You can check out the form in action over on the Detailed Image Registration page. Here’s what the registration page looks like when you select your address:

Chrome Autofill Autocomplete on Detailed Image

And here it is filled in, including the correct state picked from the drop down:

Chrome Autofill Autocomplete on Detailed Image

I had a hard time figuring out exactly what the spec was and where to find it so hopefully this post helps another developer or two out.

4 comments on Supporting Google Chrome’s Autocomplete/Autofill For Registration & Checkout

  1. Ed Eichman says:

    Hi Adam,

    Thanks! Reading the specs now.
    Do you have a URL where I can see your implemented form in action?

    Have a good one,
    Ed

  2. Ed Eichman says:

    It works with iPhone 3Gs auto fill, too (ios 6.1.3). However, with chrome (latest stable – 30.0.1599.101), the email is not filled in.

    Also strange – if I type just the letter “E” in the first name field in chrome, I can get a selection that lets me fill in everything. If I type a second letter, then ONLY the current field is auto-completed. Will see if I can find documentation for that behavior.

  3. Ed Eichman says:

    Hmmm, I see that e.g. “city” works without needing autocomplete=”locality” (using Chrome auto fill). Obviously, at the very least for forward compatibility, it’s best that that is there – but I wonder if anyone uses that now.

Leave a Reply

Your email address will not be published. Required fields are marked *

Commenting Rules

I'm honored that you found this post interesting enough to leave a comment. Before posting, I have a few ground rules:

  • Please keep your comments as relevant to the post as possible.
  • No personal attacks or any other nastiness.
  • Your first comment is subject to my approval.

Thanks!