Autofill on Browsers: A Deep Dive

In the ecommerce world, two main forms customers frequently fill out are are the address form and the credit card form. These two forms are critical to complete transactions. When users experience glitches while filling out the forms, they may abandon the session. This is especially true for guest users. Customers choose guest checkout, because logging in requires more commitment. We need to be really keen on making our guest flow as quick and convenient as possible. Needless to say, a seamless process with less input will help us get customers returning to our site or convert them into members.

How autofill works

Making autofill work on your forms is relatively easy. We just need to follow the autocomplete attribute standards. Data handling and autofill are handled natively by each browser, so no extra work is needed. The credit card scanning feature on mobile phones is a subset of the browser autofill feature.

Now, let's go over each form separately.

Credit card form

The mandatory fields for a credit card are credit card number, expiration date, security code, and cardholder name.

While a credit card number auto-fills magically on Android and iOS, the expiration date and cardholder name have to be in a specific format for iOS to work. When we designed our form interface, we were not aware that separate standards are established for each field. During our research, we discovered that the most popular ecommerce sites split or merge fields to make autofill work. Here, I will share our findings, field by field.

a) How expiration date field works

There are two ways to lay out the expiration date field, either as a single field that accepts both month and year or as two separate fields.

Although web standards call for autocomplete attribute values to work for both options, only Android/Chrome autofill implements the web standards. iOS/Safari autofills the expiration date only if we split the expiration date field into expiration month and expiration year.

The behavior on iOS/Safari frustrates customers, because the autofill suggestion gives the perception that each card detail field will be filled. In reality, the only card number is populated. We need to avoid this kind of friction to ensure that users stay with us. To have autofill working across platforms, our credit card form has split expiration month and year fields.

b) How cardholder name field works

There are two ways to layout out the cardholder name field as well, either as a single field or split as first name and last name.

While Android supports both formats, iOS expects us to have a single field. If we use the first name field and last name field, iOS does not autofill the name. This adds friction to the flow and is something we should avoid. The less users have to type, the better chance we have for users to stay in the flow. The smoother the checkout process, the higher the chance of getting users to return to our site for their next purchases. For guest checkout flow, this is key in converting guest users into members.

What you need for successful autofill across platforms

1. From our experience, we found that if we follow the autocomplete attribute values below, we can autofill successfully across platforms.

Note: The security code should never be auto-filled for security reasons.

Credit card Field Name Autocomplete value cardHolderName cc-name cardNumber cc-number cardExpiryMonth cc-exp-month cardExpiryYear cc-exp-year securityCode cc-csc

2. One thing to remember about autofill is that the web page must be served over HTTPS and requires a valid certificate.

Address form

Unlike the credit card form, the address form works like a charm. Follow the autocomplete attribute values below for frictionless form-filling.

Address Fields Name Autocomplete value firstName given-name lastName family-name addressLine1 address-line1 addressLine2 address-line2 city address-level2 State address-level1 postalCode postal-code email email phoneNumber tel Country country

For the phone number field, to go to a more granular level, use the following attribute values:

• tel-country-code
• tel-national
• tel-area-code
• tel-local
• tel-local-prefix
• tel-local-suffix
• tel-extension

Refer to these autofill standards for details.

Test, test, and test again

Finally, remember to test extensively across browsers to ensure the forms work in all target browsers.

Let’s give our users the best user experience!

As we iterated and improved, our web app now allows our users to complete a transaction with fewer steps and less typing, resulting in better checkout conversion.

Autofill is a key feature to keep in mind when we design any form. Stick to the standards and let the browser handle it natively. Happy autofilling!