Self-filling is an essential function for users. Google has found that "users fill out forms up to 30% faster" when they use the auto-fill feature. Needless to say, but the more natural a form is to fill out, the more likely you are that a user will go through with validation. It is, therefore, an excellent way to accompany a visitor to your site towards the conversions you expect.
So let's learn how the auto-fill function works, how to create forms that support auto-fill in multiple browsers.
How does the automatic filling function work?Until recently, there were no standards for <strong>automatic filling</strong>. Each browser implemented its autofill functions differently, and there was little documentation on how a browser determines the content of a field.
Despite this chaotic situation, browsers seem to have opted for two main approaches:
1. Automatic filling of predetermined fields
Chrome, Opera and Safari have all adopted the strategy of identifying form fields and providing a way to manage what the browser will automatically fill in for those fields.
For example, Opera allows you to fill in addresses and credit cards automatically.
Chrome, Opera and Safari all differ in the fields for which they provide automatic filling, but the primary areas necessary to complete an ordering process are well supported.
Most users never need to change these preferences to use the autofill feature. The browser monitors the person filling out the forms, and when it recognizes an address or a credit card, it asks the user if he wants him to save this information to reuse it later.
2. Automatically fill in any field
if the previous approach is like a scalpel stroke applied to carefully preselected areas, this second approach is a chainsaw that cuts all the fields in the view.
When a form is submitted, Microsoft Edge and Firefox store the submitted value as well as the attribute value "name." If the browser then sees a field with a corresponding name attribute, it will provide auto-fill options. Firefox also seems to be looking at the id in addition to the name attribute.
Because this approach poses security and privacy concerns, disabling autocomplete has long been supported to prevent the browser from automatically storing and filling sensitive information.
Construction of an autofill form
Here is an example of code for a form field with automatic filling:
<label for = "name"> Name </label><input type = "text" id = "name" name = "name" autocomplete = "name">
Given what we have learned, is it possible to build a form that supports auto-fill in all browsers? I think so. Or at least, we can get very close by following these steps.
1. Add the auto-completion attributes "autocomplete."
This is the future of self-filling. Browsers that do not recognize the values will ignore them. Just add the attribute "autocomplete" to each field of your form. You will find here a list of these attributes and how to implement them.
2. Use common values for the attribute "name."
To make Firefox and Edge users benefit from the autofill, you must hope that the values you choose for the attribute "name" correspond to those used by developers on other sites.
How to do? One way to do this would be to survey popular sites and see what they are using, then use the same values. Or maybe use the same benefits as the autofill field in the hope that as web developers become more familiar with the standard, they will start using these names for their areas. Unfortunately, there is no way to guarantee that your Firefox and Edge users will already have visited a form that uses the same name values as your form.
3. Integrate the autofill into your tests
No one does (not even the author of this article 🤭). I suspect that the autofill is a blind spot for website developers and designers. We should test it!
How to add autofill for address fields in WordPress
from the suggestions generated in real-time as they are entered. You just need to install a plugin like Address Autocomplete Using Google Place API it will increase your business. You will be asked to enter the Google Places API key. This key allows your website to connect to Google Maps and retrieve suggestions for automatic data entry from their database in real-time.
Go to the Google Developers Console website and create a new project. Generate your key, enter it in the plugin.
Then you just need to retrieve the CSS class from the address field and copy it to the field provided for this purpose in your plugin.