Autofill in Chrome
Chrome has a great new Autofill feature that as a developer you’ll want to add to your websites for Chrome to use. Other browsers are sure to follow too. The first time you fill out a form, Chrome automatically saves the contact information that you enter, like your name, address, phone number, or email address, as an Autofill entry. You can store multiple addresses as separate entries. Moreover, Chrome can save your credit card information, with your explicit permission. When you enter credit card information on a form, Google Chrome asks you at the top of the page whether you’d like to save the information. Click “Save info” if you’d like the credit card to be saved as an Autofill entry.
Later, when you start filling out a form, the Autofill entries that match what you’re typing will appear in a menu. Select an entry to automatically complete the form with information from the entry. Chrome also saves the text you’ve typed in specific form fields. The next time you fill out the same field, text that you’ve typed in the past appears in a menu. Just select the text you want to use from the menu to insert it directly into the field.
Improving your checkout flow
In Chrome, you get a full support for the
autocomplete attributes . All we need to do is to make sure we are leveraging them. You will improve your checkout process and make your users 6.73 times happier. Since autocomplete is part of the standard (WHATWG HTML) you know that other browsers will support it as well.
autocomplete attributes can be accompanied with a section name, such as:
This is recommended because it will make your form easier to understand and fill. The browser will auto complete different sections separately, and not as a continuous form.
The most common
autocomplete attributes are shown below. I’ve marked the ones that are critical for credit cards, as it will help you improve the ‘goals completed’ in your transactions. Other attributes are also important as they will let the browser ‘know’ better how to use the stored data. Chrome does a good job in predicting what to fill where, but as front-end developers, we can make sure there are no false-positive fields with these attributes.
An example of a payment form
- Use labels on form inputs, and ensure they’re visible when the field is in focus. The
labelelement provides direction to the user, telling them what information is needed in a form element. Each
labelis associated with an input element by placing it inside the
labelelement. Applying labels to form elements also helps to improve the touch target size: the user can touch either the label or the input in order to place focus on the input element.
- Use a placeholder to provide guidance about what you expect. The placeholder attribute provides a hint to the user about what’s expected in the input, typically by displaying the value as light text until the user starts typing in the element. Placeholders disappear as soon as the user starts typing in an element, thus they are not a replacement for labels. They should be used as an aid to help guide users on the required format and content.
You can see it in action over at: greenido.github.io/Product-Site-101/form-cc-example.html (It’s serving from https so your google wallet integration should work as well!)