Auto Complete Attribute Will Improve Your Profit (And Forms)

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.

The autocomplete attributes can be accompanied with a section name, such as:

• shipping given-name
• billing street-address

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.

Common Attribute

Content type	name attribute	autocomplete attribute
Credit Card	ccname cardnumber cvc ccmonth ccyear exp-date card-type	cc-name cc-number cc-csc cc-exp-month cc-exp-year cc-exp cc-type
Name	name fname mname lname	name (full name) given-name (first name) additional-name (middle name) family-name (last name)
Email	email	email
Address	address city region province state zip zip2 postal country	For one address input: street-address For two address inputs: address-line1 address-line2 address-level1 (state or province) address-level2 (city) postal-code (zip code) country
Phone	phone mobile country-code area-code exchange suffix ext	tel

An example of a payment form

	<label for="frmNameCC">Name on card</label>
	<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
	<label for="frmCCNum">Card Number</label>
	<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
	<label for="frmCCCVC">CVC</label>
	<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
	<label for="frmCCExp">Expiry</label>
	<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

view raw payment-form.html hosted with ❤ by GitHub

If we are talking about forms best practices, there are two more rules to remember:

1. Use labels on form inputs, and ensure they’re visible when the field is in focus. The label element provides direction to the user, telling them what information is needed in a form element. Each label is associated with an input element by placing it inside the label element. 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.
2. 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.

Demo

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!)

The code: https://github.com/greenido/Product-Site-101

Happy coding.