Surprise! You can make it easier for users to buy your products online with the power of autofill.

It must be your lucky day. Or, well, years?

Autofill isn’t new, though it’s been improving over time. It is, however, a fantastic way to encourage users to fill out your web forms – whether you want them to contact you or enter their payment information so they can hit that big, beautiful Purchase button.

Automatic form filling takes all the effort out of web forms that can be tedious, time consuming and a barrier to conversion. When you autofill form data for your users, you provide a better user interface and user experience (UX) by saving users time and reducing the potential for errors (like typos).

It also saves users from having to think too much, or worse yet, get up from the comfort of their couch to walk the dreaded distance to their wallets.

You might think we’re being dramatic, but sometimes after a long day of work, your lead is too exhausted to get up. Or they’re a busy mom who thought they’d make a quick purchase during their 5-minute break, and suddenly, they don’t have the time.

In one study, Google found that users completed forms 30% faster with automated form filling activated. This speed, combined with the sheer convenience of autofill, boosts form submission rates and conversions while making happy users in the process. And happy users are returning users.

It’s why automatic capabilities are on our list of form design best practices.

So, how do you make autofill work on your web forms?

It all starts with having your web developer optimize your forms to work with the user’s browser so it can recognize your form fields for what they are.

How Does Autofill Work?

How about we start here: what is autofill in the first place?

Autofill is a nifty tool offered by most browsers for their users. When users enable autofill, their browser will automatically fill forms for them with any applicable user data it has saved. As a result, the user doesn’t have to fill out each field by hand.

Different browsers save slightly different user data but are similar overall:

Note: “Addresses” includes phone numbers, email addresses and shipping addresses.

Now, how does autofill perform its magic?

It’s pretty simple. The browser collects the information that a user has entered into past forms on others’ websites or your own. Some users may even set up autofill in their browser’s autofill settings and provide the information directly to make life easier. In this case, the browser can save sensitive data, like a payment method, through an authentication procedure.

Users control autofill preferences on their end through their autofill settings and can choose to enable or disable it.

As long as it’s enabled, their browser will use several heuristics to determine which of your form fields it can autofill based on user permissions.

How to Add Automatic Form Filling to Your Web Forms

Are you ready for some good news?

As long as you build your web forms using form best practices, autofill is usually a given because the main functionality is baked into the user’s browser or device. So, you only need to focus on developing forms that meet coding standards. Manage that, and autofill should work on your mobile and desktop forms.

If not, Google gives two reasons for why autofill might not work for users:

1. 1. Your website might not be secure enough for Chrome to provide user data.
   2. If your website is secure, Chrome might not be able to detect your form fields.

To prevent these issues with your web forms, ensure that your website is secure enough to meet browser standards. Set security guidelines, keep your website and software updated, use a firewall and VPN and prevent data silos.

If your website is secure and autofill isn’t working on its own, confirm that your form follows the following form code best practices.

Form Best Practices to Guarantee Autofill Works

While browsers work their magic to make the user’s life easier, there are ways you can help them out. By developing web forms that provide the right hints to the browser, you can guarantee it will be able to autofill form data for your users.

Start by giving browsers hints about the kind of data it should fill your form fields with, so it’s easier for the browser to read your form and do its job.

To do this, make sure you use the correct input type and corresponding input labels. You will also want to provide the name attribute and autocomplete attribute for each input element. The image below shows the common name and autocomplete attributes according to HTML standards that you may need.

Photo from Google Developers.

To comply with standard HTML form practices, you or your website developer should also ensure that input elements are wrapped in a <form> tag to enable autofill. The Google Chrome web browser requires form fields to be in an HTML form tag, or it will only offer suggestions and won’t autofill form data.

What Not to Do: Practices That Prevent Autofill

While some practices help browsers autofill form data, others get in the way. When creating forms, make sure that you:

• • Avoid field validation pitfalls like client-side validation
  • Use standard input fields instead of creating your own
  • Use the placeholder attribute in input fields instead of fake placeholders
  • Don’t copy a shipping address into the billing address
  • Ensure Your Forms Work With Password Managers
  • Sometimes browser data isn’t the only helping hand when it comes to automated form filling.

Users have grown tired of keeping track of a million passwords, and can you blame them? Nothing is worse than guessing a password until you get locked out of an account or giving up and resetting a password just to be told you can’t use the current one. (Didn’t you try that one already?!)

In turn, password managers that keep track of all your usernames and passwords in one place have grown in popularity. The best of these managers, like LastPass and 1Password, come with the ability to autofill passwords in login forms.

For website owners, this means making sure your login forms work with password autofill apps.

Fortunately, password managers hook into correctly built forms on their own – just like browsers. Follow the form tips above, and your form should work seamlessly with LastPass and 1Password.

But, also like browsers, there are ways you can help password managers read your form and guarantee their functioning:

• • Don’t use login forms that dynamically add or remove fields
  • Show your form on the first render of the web page
  • Use placeholder attributes as intended
  • Avoid using multi-page login forms when possible

How to Autofill: Other Tips

When it comes to form UX, meeting user expectations is the minimum requirement, and exceeding expectations is the goal. Sometimes this means implementing form layout flexibility to adapt to differences in user expectations.

In the case of autofill functionality, creating a flexible form layout can be crucial for businesses that do business in or serve consumers in multiple countries because people throughout the world write addresses differently. To accommodate these users’ expectations and browsers, consider providing a flexible form that adjusts address fields accordingly.

Setting Up Autofill Forms for Apps

When creating an app that users will access on Apple devices, make sure that your app supports Apple’s Password AutoFill functionality, and set up your app’s associated domains as instructed here:

iOS Autofill Requirements

For apps on Android devices, the Android autofill framework will automatically fill forms as long as your app uses standard views. You can optimize how your app works within the framework by completing an autofill workflow, setting up associated domains, marking fields as important, and using the android:autofillHints attribute as described here:

Android Autofill Operation and Instructions

Get Thanked in Conversions

Making sure your forms work well with browsers’ and password managers’ autofill capabilities is one of the best ways to enhance form UX and reduce friction surrounding form submissions. Who doesn’t love getting the same result with half (or less!) of the effort?

Autofill makes users’ lives easier by making forms faster and simpler to complete, which means users get what they were looking for, and you get more conversions.

And, in our opinion, conversions are the best way a user can say thank you.

Interested in making your forms to die for (aka fast, gorgeous, user-friendly and optimized to autofill form data)? Our team is passionate about all of that, and we love to talk. Reach out.