Optimising Web Form Autofill

Optimising Web Form Autofill

Introduction

Autofill is a very popular browser function that helps a user filling in a form with less effort, as it automatically fills in web form fields with stored data, like first name, last name, email, phone number, etc. It can even be used for credit card details and passwords. Browsers started putting more effort in this feature early 2010’s with the rise of mobile devices that made filling forms a bit less user-friendly.

Autofill data
Autofill data will be stored in the browser by completing forms on websites or by manually adding them through the browser settings.

Autofill field detection
‘Use sensible field names’ is the advised guideline for Google Chrome. That is very broad and what does that mean? And is middle-name or house-number sufficient?

Browsers do a good job of finding the correct value for your form fields based on your field names and labels (even in foreign languages). But often, based on how your forms are built, they get it wrong, and it becomes a curse. Incorrect autofill leaves it up to the customer to correct the data. Hopefully, before they decide to abort.

Guideline
Use the HTML autocomplete attribute to provide browsers with a hint of the expected value, thereby eliminating the need for guesswork.

Autocomplete Attributes by Use Case

Signup & Account Management

HTML code

Autocompleted value

autocomplete="name"

Full name (preferred over separate fields)

autocomplete="given-name"

First (given) name

autocomplete="additional-name"

Middle name

autocomplete="family-name"

Last (family) name

autocomplete="email"

Email address

autocomplete="tel"

Full telephone (with country code)

autocomplete="tel-country-code"

Country code (e.g. +32)

autocomplete="tel-national"

National part of phone number

autocomplete="bday"

Full birthday (YYYY-MM-DD)

autocomplete="bday-day"

Birthday day (numeric)

autocomplete="bday-month"

Birthday month (numeric)

autocomplete="bday-year"

Birthday year (numeric)

autocomplete="organization"

Company or organization name

autocomplete="sex"

Gender (non-standard; freeform text)

Shipping & Billing Address

HTML code

Autocompleted value

autocomplete="address-line1"

First line of street address

autocomplete="street-address"

Full street address (exclude city, postal code, country)

autocomplete="address-level2"

City or locality

autocomplete="postal-code"

Postal/ZIP code

autocomplete="country"

ISO 3166-1 alpha-2 country code

InfoNote: House-number alone is not standardised. Either ask for complete address lines or integrate an address autocomplete service.

Payment Information

HTML code

Autocompleted value

autocomplete="cc-name"

Name on payment instrument

autocomplete="cc-number"

Card or payment-method number

autocomplete="cc-exp"

Expiry date (e.g. “MM/YY” or “MM/YYYY”)

autocomplete="cc-exp-month"

Expiry month

autocomplete="cc-exp-year"

Expiry year

Login & Password Management

HTML code

Autocompleted value

autocomplete="current-password"

User’s existing password

autocomplete="new-password"

New password (account creation or password change)

autocomplete="one-time-code"

One-time code for 2FA


    • Related Articles

    • How to setup a form

      To setup a form in the Exatom platform, go to the Setup section in the menu, select Form and click on the 'Add form' button. The form finder field will show up, where you can fill in the page URL where the form is located.  You can simply start with ...

    • The HTML form element

      Forms are more advanced than ever and modern technology does not require the HTML <form> element for your form to be functional. However it's important to add the semantically correct <form> container element to all your forms. One of the reasons is ...

    • How Session Replays assist you in optimising your forms

      With Exatom Session Replays, often called screen- or session recordings, you see the actions and behaviour of your customers on your forms, like seeing a video of their screen. They capture the customer’s entire behaviour, including mouse movements, ...

    • Form field identification

      One of the requirements for form fields to be recognised by Exatom is that they have one or both of the following HTML attributes: name="your-form-field-name" id="your-form-field-id" This uniquely identifies each field and allow our analytics engine ...

    • Keyboard shortcuts

      To make your life easy, you can use keyboard shortcuts to save some time. Here is the list of shortcuts we applied in our platform: Shortcut key Function Where applicable Shift (press 2 times) Open the website selector. Once opened you can start to ...