Comment ajouter l’autocomplétion pour les champs d’adresse dans WordPress

L’ajout d’une fonction d’autocomplétion pour les champs d’adresse peut rendre vos formulaires WordPress plus simples/simple d’utilisation. Il permet aux utilisateurs/utilisatrices de choisir rapidement des adresses à partir de suggestions au fur et à mesure qu’ils tapent, ce qui accélère le processus et réduit les erreurs.

Récemment, l’un de nos comptes a souhaité savoir comment configurer cette fonction pour ses formulaires. Grâce à l’autocomplétion, les utilisateurs/utilisatrices peuvent profiter d’une expérience plus fluide et obtenir des entrées d’adresses précises.

Dans cet article, nous allons vous guider à travers les étapes pour ajouter l’autocomplétion d’adresse à votre site WordPress en utilisant l’API Google Places. C’est un moyen facile d’améliorer vos formulaires et de les rendre plus efficaces.

Pourquoi ajouter des champs d’adresse autocomplets dans WordPress ?

L’ajout de champs d’adresse autocomplets dans WordPress peut vous aider à améliorer l’expérience des utilisateurs/utilisatrices de votre site.

Par exemple, si vous possédez une boutique d’e-commerce, vos clients/clientes pourront saisir leur adresse plus rapidement et éviter les fautes de frappe.

Lorsque les acheteurs saisissent leur adresse, les adresses possibles s’affichent sur leur écran en fonction de leur Emplacement actuel, de sorte qu’ils n’ont plus qu’à choisir la bonne. Cela vous aide à réduire les erreurs puisque les facultatifs qui sont affichés à l’utilisateur sont connectés avec Google Places et Google Maps API.

L’autocomplétion dans les champs d’adresse est l’une des fonctionnalités les plus pratiques que vous puissiez offrir à vos utilisateurs/utilisatrices. Si vous pouvez aider rapidement les acheteurs à passer à la Commande, ils sont plus susceptibles de terminer un achat.

Cela peut permettre d’améliorer les ventes et de transformer l’acheteur occasionnel en client/cliente récurrent.

Maintenant que vous comprenez les avantages de l’ajout de champs d’adresse autocomplets dans WordPress, nous allons vous afficher comment le faire étape par étape.

Voici un aperçu rapide de toutes les étapes que nous allons aborder dans cet article :

Vous êtes prêt ? Commençons par un tutoriel vidéo.

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez les instructions écrites, continuez à lire.

Étape par étape : Installer et activer l’autocomplétion de l’adresse Google

La première chose à faire est d’installer et d’activer l’extension Autocomplete Google Address .

Pour plus de détails, vous pouvez consulter notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous dans Réglages  » Autocomplétion depuis votre Tableau de bord WordPress pour définir les paramètres de l’extension.

Il vous sera ensuite demandé de saisir la Clé de l’API Google Adresses. Cette clé API permet à votre site de se connecter à Google Maps et de récupérer les suggestions d’autocomplétion de leur base de données en temps réel.

Étape par étape : Accéder à la clé API de Google Adresses

Pour accéder à votre clé API Google Adresses, vous pouvez vous rendre sur le site de la Google Developer Console et créer un nouveau projet.

Une nouvelle page s’affiche, vous demandant de donner un nom à votre projet. Nous vous recommandons d’utiliser un nom qui vous aidera à identifier facilement le projet.

Vous pouvez ensuite cliquer sur le bouton « Créer ».

Si vous souhaitez vous connecter à une organisation, vous pouvez cliquer sur le lien « Parcourir » pour afficher une liste déroulante d’options.

Attendez quelques secondes, et vous serez automatiquement redirigé vers la page « APIs & Services ».

À partir de là, vous devez naviguer vers le panneau latéral gauche et cliquer sur l’onglet « Bibliothèque ».

Vous verrez maintenant la liste des API Google les plus populaires que vous pouvez activer pour votre projet. Dans le panneau de gauche, allez-y et sélectionnez « Maps » pour filtrer les options liées aux cartes.

À partir de là, il vous suffit de trouver l’option « Places API » et de cliquer dessus.

Vous serez alors dirigé vers la page de présentation de l’API Lieux.

Il suffit de cliquer sur le bouton « Enable » pour autoriser l’API.

Si votre Google Console est correctement définie, une fenêtre contextuelle contenant votre clé API devrait s’afficher.

Toutefois, si vous configurez votre compte Google Console pour la première fois, il se peut que vous deviez saisir vos informations de facturation.

Vous pouvez maintenant retourner sur votre site WordPress.

Ensuite, vous devez coller la clé de l’API à partir de votre Google Console, à l’endroit où il est indiqué « Clé de l’API Google Place ».

Pour vous assurer que l’adresse autocomplétée fonctionne dans WordPress, vous devez activer l’API JavaScript de Google Maps.

Il vous suffit donc de retourner dans l’onglet « APIs & Services » du tableau de bord de la Google Developer Console. Trouvez ensuite l’API JavaScript Maps et cliquez sur « Activer ».

Vous êtes maintenant prêt à ajouter l’ID du formulaire.

Pour l’étape suivante, vous aurez besoin de l’ID du formulaire du champ d’adresse dans lequel vous souhaitez ajouter la fonctionnalité d’autocomplétion d’adresse.

Étape par étape : Activer l’autocomplétion dans les champs de formulaires WordPress

Vous pouvez ajouter une fonctionnalité d’autocomplétion d’adresse à n’importe quel champ de formulaire créé par n’importe quel plugin de construction de formulaires WordPress.

Nous utiliserons WPForms dans ce tutoriel car c’est le meilleur Constructeur de formulaires par glisser-déposer et le plus facile pour les débutants. Cependant, ces instructions fonctionneront quelle que soit l’extension de formulaire de contact que vous utilisez.

Tout d’abord, vous devrez créer un formulaire avec un champ d’adresse ou un ensemble de champs d’adresse. Une fois que vous avez terminé, vous pouvez ajouter ce formulaire à votre site WordPress comme vous le feriez normalement. Si vous avez besoin d’aide, alors vous pouvez lire notre guide sur la création d’un formulaire de contact.

Ensuite, ouvrez la publication ou la page où vous avez ajouté votre formulaire, cliquez avec le bouton droit de la souris sur le champ d’adresse et sélectionnez « Inspecter » dans le menu du navigateur.

Consultez cette page, vous verrez une section en surbrillance avec la valeur de l’ID du formulaire pour le champ de saisie.

Par exemple, dans cette capture d’écran, l’ID de notre formulaire est wpforms-567-field_4.

Vous devez copier cette valeur et la coller dans la page des Réglages de l’extension.

Cependant, vous devrez ajouter la fonctionnalité de saisie automatique à l’ensemble de votre formulaire d’adresse. Par exemple, si vous voulez que les utilisateurs/utilisatrices puissent remplir automatiquement l’intégralité d’une adresse de Livraison, ils devront remplir automatiquement la ville, le début et le code postal.

Dans ce cas, vous devez suivre le même processus en cliquant sur « Inspecter » et en trouvant l’ID du formulaire pour chaque champ.

Une fois que vous avez obtenu tous vos ID, vous devez les copier dans la page « Autocomplete », à l’endroit où il est indiqué « Form ID ».

Lorsque vous ajoutez plusieurs ID, vous devez séparer chaque ID par une virgule et des guillemets, comme affiché ci-dessous.

Une fois que vous avez terminé, n’oubliez pas d’appuyer sur « Enregistrer les modifications ».

C’est tout ; vous pouvez maintenant visiter votre page de formulaire et essayer de saisir une adresse. Le champ du formulaire affichera automatiquement des suggestions utilisant Google Adresses et Google Maps.

Maintenant, vous avez bien ajouté la fonctionnalité d’autocomplétion d’adresse de Google à vos formulaires. Les utilisateurs/utilisatrices pourront remplir automatiquement votre formulaire, qu’ils passent à la caisse depuis votre magasin WooCommerce ou qu’ils terminent une inscription d’utilisateur/utilisatrice.

Astuce bonus : Suivre et réduire l’abandon des formulaires dans WordPress

L’abandon de formulaire se produit lorsque les utilisateurs/utilisatrices quittent un formulaire sans l’envoyer, souvent en raison d’une mauvaise expérience utilisateur ou d’autres raisons.

Réduire l’abandon de formulaire est important car cela affecte la croissance de votre liste d’e-mails, vos ventes e-commerce et le succès global de votre entreprise. Des études affichent que plus de 77% des acheteurs en ligne ne terminent pas leurs formulaires de paiement, ce qui signifie perdre beaucoup d’argent en raison de ventes incomplètes.

En suivant et en améliorant les formulaires que les gens abandonnent souvent, vous pouvez réduire ces pertes de revenus. Si l’auto-complétion peut être une aide, d’autres facteurs peuvent contribuer à l’abandon des formulaires :

• Champs facultatifs rendus obligatoires: Il peut être très ennuyeux d’obliger les gens à remplir des informations non essentielles.
• Instructions peu claires: Les champs de formulaire confus ou vagues peuvent inciter les gens à abandonner.
• Inconvénients pour les mobiles: Les formulaires qui sont difficiles à utiliser sur les appareils mobiles peuvent être très rebutants.
• Problèmes techniques: Des problèmes tels que le mauvais fonctionnement du formulaire ou la lenteur du chargement peuvent empêcher les gens de le terminer.

Pour plus de détails, vous pouvez consulter notre guide sur la façon de suivre et de réduire l’abandon de formulaire dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter l’autocomplétion pour les champs d’adresse sur WordPress. Vous pouvez également consulter nos astuces d’experts pour créer des formulaires plus interactifs et augmenter les conversions ou notre guide sur la façon de personnaliser et de styliser vos formulaires WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.