L’auto-remplissage est une fonction importante pour les utilisateurs. Google a constaté que « les utilisateurs remplissent les formulaires jusqu’à 30 % plus rapidement » lorsqu’ils utilisent la fonction de remplissage automatique. Inutile de vous le dire, mais plus un formulaire est facile à remplir, plus vous avez de chances qu’un utilisateur aille jusqu’à sa validation. C’est donc une bonne façon d’accompagner un visiteur de votre site vers la conversion que vous attendez.
Apprenons donc comment fonctionne la fonction de remplissage automatique, comment créer des formulaires qui prennent en charge le remplissage automatique dans plusieurs navigateurs.
Comment fonctionne la fonction de remplissage automatique ?
Jusqu’à récemment, il n’existait aucune norme en matière de remplissage automatique. Chaque navigateur mettait en œuvre ses fonctions de remplissage automatique différemment et il y avait peu de documentation sur la façon dont un navigateur détermine le contenu d’un champ.
Malgré cette situation chaotique, les navigateurs semblent avoir opté pour deux approches principales :
1. Remplissage automatique de champs prédéterminés
Chrome, Opera et Safari ont tous adopté l’approche consistant à identifier les champs de formulaire et à fournir un moyen de gérer ce que le navigateur va remplir automatiquement pour ces champs.
Par exemple, Opera permet de remplir automatiquement les adresses et les cartes de crédit.
Chrome, Opera et Safari diffèrent tous concernant les champs pour lesquels ils fournissent un remplissage automatique, mais les champs de base, nécessaires pour compléter un processus de commande, sont bien pris en charge.
La plupart des utilisateurs n’ont jamais besoin de modifier ces préférences pour utiliser la fonction de remplissage automatique. Le navigateur surveille la personne qui remplit les formulaires et lorsqu’il reconnaît une adresse ou une carte de crédit, il demande à l’utilisateur s’il veut qu’il enregistre cette information pour la réutiliser plus tard.
2. Remplir automatiquement n’importe quel champ
Si l’approche précédente est comme un coup de scalpel appliqué à des champs soigneusement présélectionnés, cette seconde approche est une tronçonneuse qui coupe tous les champs en vue.
Lorsqu’un formulaire est soumis, Microsoft Edge et Firefox stockent la valeur soumise ainsi que la valeur de l’attribut "name". Si le navigateur voit ensuite un champ avec un attribut de nom correspondant, il fournira des options de remplissage automatique. Firefox semble également regarder l’id en plus de l’attribut de nom.
Comme cette approche pose des problèmes de sécurité et de confidentialité, la désactivation de la saisie automatique est depuis longtemps prise en charge pour empêcher le navigateur de stocker et de remplir automatiquement les informations sensibles.
Construction d’un formulaire à remplissage automatique
Voici un exemple de code pour un champ de formulaire muni du remplissage automatique :
<label for="name">Name</label> <input type="text" id="name" name="name" autocomplete="name">
Compte tenu de ce que nous avons appris, est-il vraiment possible de construire un formulaire qui supporte l’auto-remplissage dans tous les navigateurs ? Je pense que oui. Ou du moins, on peut s’en approcher de très près en suivant ces étapes.
1. Ajouter les attributs d’auto-complétion "autocomplete"
C’est l’avenir de l’auto-remplissage. Les navigateurs qui ne reconnaissent pas les valeurs les ignoreront. Il suffit d’ajouter l’attribut "autocomplete" à chaque champ de votre formulaire. Vous trouverez ici une liste de ces attributs et la manière de les implémenter.
2. Utiliser des valeurs communes pour l’attribut "name"
Pour faire profiter les utilisateurs de Firefox et Edge de l’autofill, vous devez espérer que les valeurs que vous choisissez pour l’attribut "name" correspondent à celles utilisées par les développeurs sur d’autres sites.
3. Intégrez l’autofill à vos tests
Personne ne le fait (pas même l’auteur de cet article 🤭)… Je soupçonne que l’autofill est un angle mort pour les développeurs et les concepteurs de sites Web. Nous devrions le tester !
Comment ajouter une saisie automatique pour les champs d’adresse dans WordPress
Google met à disposition son API Google Places afin de permettre aux utilisateurs de sélectionner rapidement une adresse parmi les suggestions générées en temps réel au fur et à mesure de leur saisie. Il vous suffit d’installer un plugin comme Address Autocomplete Using Google Place Api. Il vous sera demandé d’entrer la clé API de Google Places. Cette clé permet à votre site Web de se connecter à Google Maps et de récupérer en temps réel les suggestions de saisie automatique de leur base de données.
Rendez-vous sur le site de la Google Developers Console et créez un nouveau projet. Générez votre clé, entrez-là dans le plugin.
Il vous suffira ensuite de récupérer la classe CSS du champ d’adresse de le copier dans le champ prévu à cet effet dans votre plugin.
Si vous ne savez pas comment faire tout ça, des tutoriels existent. Si vous voulez un bon travail dans les meilleurs délais, les freelances de Codeur.com seront ravis de vous aider !