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

Avez-vous déjà perdu un client parce que votre formulaire WordPress était trop long ou frustrant à remplir ? Cela arrive tout le temps. Un acheteur est prêt à acheter, mais il se retrouve bloqué en tapant une longue adresse, surtout sur un appareil mobile.

Une petite faute de frappe peut entraîner une livraison échouée, et dans de nombreux cas, le client abandonne avant d'avoir terminé.

C'est pourquoi l'autocomplétion d'adresses est si utile. Elle suggère la bonne adresse dès que les utilisateurs commencent à taper, rendant le processus plus rapide, plus facile et moins susceptible de causer des erreurs. Le résultat est des clients plus satisfaits et moins de ventes perdues.

De plus, il est facile à configurer. Dans ce guide, je vais vous montrer comment ajouter l'autocomplétion d'adresses à vos formulaires WordPress étape par étape en utilisant WPForms et son module complémentaire Geolocation.

Pourquoi ajouter des champs d'adresse avec autocomplétion dans WordPress ?

Ajouter l'autocomplétion d'adresses à votre site WordPress est un moyen facile d'améliorer l'expérience utilisateur de votre site web. Dans une boutique e-commerce, par exemple, cela aide les clients à saisir leur adresse plus rapidement et à éviter les fautes de frappe.

Voici comment cela fonctionne : Pendant que les acheteurs tapent, des suggestions d'adresses, tirées de Google Places/Maps, apparaissent. Cela leur permet de simplement choisir la bonne, et le formulaire se remplit automatiquement.

Cela réduit les erreurs et accélère le processus de paiement. Et des paiements plus rapides et plus précis stimulent les ventes et rendent les acheteurs plus susceptibles de revenir.

Au-delà des boutiques en ligne, la saisie semi-automatique d'adresses permet de réduire les erreurs dans les formulaires d'inscription et de réservation. De plus, elle facilite le remplissage de tout type de formulaire, en particulier sur mobile.

Maintenant que vous comprenez les avantages de l'ajout de champs d'adresse avec saisie semi-automatique dans WordPress, je vais vous montrer comment le faire, étape par étape.

Voici un aperçu rapide de toutes les étapes que je vais couvrir dans cet article :

• Étape 1 : Générer une clé API Google Places
• Étape 2 : Installer le plugin WPForms et le module complémentaire Geolocation
• Étape 3 : Activer la saisie semi-automatique d'adresses dans vos formulaires WordPress
• Étape 4 : Créer un formulaire avec saisie semi-automatique d'adresses
• Étape 5 : Intégrer votre formulaire WordPress avec saisie semi-automatique d'adresses
• Astuce bonus : Suivez et réduisez l'abandon de formulaires dans WordPress
• FAQ sur la saisie semi-automatique pour les champs d'adresse dans les formulaires WordPress
• Plus de guides pour utiliser les formulaires WordPress

Prêt ? Commençons.

Étape 1 : Générer une clé API Google Places

Pour connecter WPForms à Google Maps et activer la fonctionnalité de saisie semi-automatique d'adresses, vous aurez besoin d'une clé API Google Places. Passons en revue le processus.

Pour obtenir votre clé, vous devrez vous rendre sur la Plateforme Google Maps, qui est gérée dans la Console Google Cloud. La console peut sembler un peu complexe, mais ne vous inquiétez pas – je vais vous guider à travers les étapes exactes dont vous avez besoin.

Tout d'abord, cliquons sur « Créer un projet ».

Sur l'écran suivant, vous devrez nommer votre nouveau projet. Je recommande d'utiliser un nom qui vous aidera à l'identifier facilement plus tard.

Ensuite, si vous avez une organisation à laquelle vous souhaitez vous connecter, vous pouvez cliquer sur le lien « Parcourir » pour afficher une liste déroulante d'options. Alternativement, vous pouvez sélectionner « Aucune organisation ».

Une fois que tout semble correct, vous pouvez appuyer sur le bouton « Créer ».

Sur l'écran suivant, allez-y et ouvrez l'onglet « Bibliothèque ».

À partir de là, vous devrez activer trois API spécifiques. Pensez-y comme à une équipe qui travaille ensemble :

• API Places : C'est le joueur vedette qui fournit les suggestions d'autocomplétion d'adresses au fur et à mesure que vous tapez.
• API JavaScript Maps : Cela vous permet d'afficher une vue cartographique de l'adresse sélectionnée directement sur votre formulaire (ce qui est une fonctionnalité intéressante et facultative).
• API de géocodage : Celle-ci fonctionne en coulisses pour convertir les adresses en coordonnées cartographiques.

La façon la plus simple de les trouver est d'utiliser la barre de recherche – recherchez, sélectionnez l'API, puis cliquez sur « Activer ». Répétez cette opération jusqu'à ce que les trois API soient actives.

Une fois cela fait, vous générerez une clé unique que votre site utilisera pour communiquer avec les API de Google.

Ainsi, même si vous avez activé trois API différentes, vous n'avez pas besoin de trois clés distinctes. Une seule clé API peut donner à votre site accès à toutes ces API, à condition que vous définissiez les bonnes restrictions.

Pour ce faire, vous pouvez passer à l'onglet « Identifiants ». Ensuite, vous pouvez cliquer sur Créer des identifiants » Clé API.

Cela ouvrira un panneau de configuration de la clé API.

Sous « Restrictions d'application », sélectionnez « Sites web » afin que la clé ne fonctionne que sur votre site web.

Cela ouvrira l'option de configuration des « Restrictions du site web ».

Ici, vous pouvez simplement entrer votre nom de domaine et cliquer sur « Terminé ».

Après cela, vous pouvez passer à la section « Restrictions API ».

Commençons par activer l'option « Restreindre la clé ».

Ensuite, dans le menu déroulant « Sélectionner les API », vous devrez sélectionner les trois API que vous venez d'activer et cliquer sur « Ok ».

Cela limitera l'accès de la clé aux seules API sélectionnées.

Après avoir enregistré vos modifications, vous verrez votre clé API unique.

Copiez-la – vous en aurez besoin à l'étape suivante pour la connecter à WPForms.

Étape 2 : Installer le plugin WPForms et le module complémentaire Geolocation

Pour ce tutoriel, nous utiliserons WPForms, qui est le meilleur constructeur de formulaires de contact pour WordPress. Il est livré avec un puissant module complémentaire de géolocalisation qui rend l'ajout d'autocomplétion d'adresses incroyablement simple.

Chez WPBeginner, nous utilisons WPForms pour afficher notre formulaire de contact et mener nos enquêtes annuelles auprès des lecteurs. Consultez notre avis complet sur WPForms pour en savoir plus sur le plugin.

La première chose à faire est de créer un compte WPForms. Sur leur site Web, cliquez simplement sur « Obtenir WPForms maintenant » pour commencer.

Vous pouvez ensuite sélectionner un plan et procéder au processus de paiement.

Une fois que vous vous êtes inscrit, vous devrez installer et activer le plugin WPForms.

Depuis votre zone d'administration WordPress, naviguez simplement vers Plugins » Ajouter un nouveau plugin.

Après cela, vous pouvez utiliser la fonction de recherche pour trouver le plugin WPForms.

Dans les résultats de recherche, cliquez sur « Installer maintenant », puis cliquez sur le bouton « Activer » lorsqu'il apparaît.

Si vous avez besoin d'aide, vous pouvez suivre notre guide sur comment installer un plugin WordPress.

Après activation, vous devrez vérifier votre clé de licence.

Pour commencer, allez dans WPForms » Paramètres, entrez votre clé de licence dans le champ prévu à cet effet, et cliquez sur le bouton « Vérifier la clé ». Vous pouvez trouver votre clé de licence dans votre compte WPForms.

Une fois cela fait, vous pouvez aller dans WPForms » Extensions depuis le tableau de bord d'administration WordPress pour installer l'extension Géolocalisation.

Sur l'écran suivant, parcourez les options (ou utilisez la barre de recherche) et cliquez sur « Installer l'extension » pour l'extension Géolocalisation.

WPForms installera et activera automatiquement l'extension en quelques instants.

Étape 3 : Activer la saisie semi-automatique d'adresses dans vos formulaires WordPress

Maintenant que vous avez votre clé API unique et votre module complémentaire de géolocalisation, il est temps d'activer la saisie semi-automatique des adresses dans votre formulaire WordPress.

Accédez à WPForms » Paramètres depuis votre tableau de bord WordPress. Ensuite, basculez vers l'onglet « Géolocalisation » en haut.

Ici, vous trouverez quelques options que vous pouvez ajuster :

• Fournisseur de lieux – Pour ce guide, nous sélectionnerons « Google Places ».
• Clé API – Copiez et collez la clé API unique que vous avez générée à l'étape 1. Cela activera la saisie semi-automatique des adresses et affichera Google Maps dans vos formulaires.
• Emplacement actuel – Activez cette option pour remplir automatiquement la localisation des utilisateurs dans vos formulaires.

N'oubliez pas de cliquer sur « Enregistrer les paramètres » en bas de ce panneau.

Ensuite, il vous suffit d'activer la saisie semi-automatique sur le formulaire où vous souhaitez l'utiliser. Vous pouvez modifier un formulaire existant ou en créer un nouveau.

Étape 4 : Créer un formulaire avec saisie semi-automatique d'adresses

À présent, vous avez connecté WPForms à Google Maps. Dans cette étape, nous allons créer un formulaire avec un champ d'adresse.

Pour commencer, accédez à WPForms » Ajouter nouveau depuis votre zone d'administration WordPress.

Sur l'écran suivant, vous pouvez donner un nom à votre formulaire.

Vous voudrez utiliser un nom clair et descriptif afin qu'il soit plus facile à organiser à mesure que vous créez plus de formulaires.

Après cela, vous choisirez comment vous souhaitez construire votre formulaire : en utilisant une toile vierge, un modèle prédéfini ou un générateur de formulaires IA.

Si vous souhaitez utiliser le générateur de formulaires basé sur l'IA, il vous suffit d'entrer une simple invite. WPForms AI générera alors le formulaire pour vous en quelques secondes.

Pour ce tutoriel, cependant, j'utiliserai un modèle prêt à l'emploi.

WPForms est livré avec plus de 2 000 modèles de formulaires, ce qui permet de trouver facilement celui qui correspond presque parfaitement à votre objectif.

Une fois que vous avez trouvé un bon modèle à utiliser comme base, survolez-le et cliquez sur le bouton « Utiliser le modèle ». Ici, j'utiliserai le modèle Formulaire de contact simple.

Cela ouvrira le générateur de formulaires par glisser-déposer.

Ensuite, faites glisser le champ « Adresse » du panneau de gauche et déposez-le dans votre formulaire (s'il n'y est pas déjà).

Une fois le champ « Adresse » en place, vous pouvez cliquer dessus pour ouvrir le panneau « Options du champ ».

Ici, vous pouvez ajuster l'étiquette du champ, ajouter une description de champ ou choisir un schéma d'adresse différent – US ou international.

Une fois que vous avez personnalisé les paramètres généraux, vous pouvez passer à l'onglet « Avancé ».

Ensuite, faites défiler le panneau jusqu'à ce que vous trouviez l'option « Activer l'autocomplétion d'adresse ». Activez-la.

Cela permettra aux utilisateurs de remplir automatiquement leur adresse complète, y compris la ville, l'état et le code postal, directement dans votre formulaire WordPress.

L'activation de cette fonctionnalité ouvrira les options « Afficher la carte ». Activez-la simplement pour ajouter la carte à votre champ « Adresse ».

Ensuite, vous pouvez choisir d'afficher la carte au-dessus ou en dessous du champ dans votre formulaire.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer » en haut pour appliquer vos modifications.

À partir d'ici, vous pouvez personnaliser vos notifications et confirmations. Pour plus de détails, consultez notre guide sur comment créer un formulaire de contact.

Étape 5 : Intégrer votre formulaire WordPress avec saisie semi-automatique d'adresses

Maintenant, vous êtes prêt à ajouter votre formulaire à votre site WordPress.

Pour commencer, cliquez sur le bouton « Intégrer » en haut du générateur de formulaires.

Une fenêtre contextuelle apparaîtra où vous pourrez ajouter le formulaire à une page existante ou en créer une nouvelle.

Pour ce tutoriel, je vais choisir « Sélectionner une page existante ».

Dans la fenêtre contextuelle suivante, vous pouvez choisir une page dans la liste déroulante.

Ensuite, cliquez sur « C’est parti ! » pour continuer.

WPForms vous redirigera vers l'éditeur de blocs WordPress.

Ici, cliquez sur l'icône « + » et ajoutez le bloc WPForms.

Ensuite, sélectionnez votre formulaire dans le menu déroulant.

WPForms le chargera automatiquement dans l'éditeur de contenu.

Dans le panneau de droite, vous pouvez ajuster les « Paramètres du formulaire ».

Par exemple, vous voudrez peut-être afficher le titre ou la description du formulaire pour fournir plus de contexte aux visiteurs.

Vous pouvez également styliser votre formulaire pour qu'il corresponde mieux au thème de votre site. Et une fois que vous êtes satisfait du design, appuyez simplement sur le bouton « Enregistrer ».

C'est tout ! Vous pouvez maintenant visiter votre page de formulaire et essayer de taper une adresse.

Le champ d'adresse affichera automatiquement des suggestions de Google Maps, permettant aux utilisateurs de remplir leur adresse en un seul clic.

Vous avez ajouté avec succès la fonctionnalité d'autocomplétion d'adresses Google à vos formulaires.

Les utilisateurs pourront remplir automatiquement votre formulaire, qu'ils effectuent un paiement dans votre boutique WooCommerce ou qu'ils s'inscrivent à une inscription d'utilisateur.

Voici à quoi cela pourrait ressembler une fois que les utilisateurs sélectionnent une suggestion d'adresse autocomplétée :

Astuce bonus : Suivez et réduisez l'abandon de formulaires dans WordPress

L'abandon de formulaire se produit lorsque les gens quittent un formulaire sans le soumettre, ce qui est souvent dû à une mauvaise expérience utilisateur.

La réduction de l'abandon de formulaires est importante car elle peut nuire à la croissance de votre liste d'e-mails, à vos ventes de commerce électronique et au succès général de votre entreprise.

Des études montrent que plus de 77 % des acheteurs en ligne ne terminent pas leurs formulaires de paiement, ce qui signifie perdre beaucoup d'argent à cause 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.

Bien que l'auto-complétion puisse aider, d'autres facteurs peuvent encore contribuer à l'abandon de formulaires :

• Champs facultatifs rendus obligatoires : Obliger les gens à remplir des informations non essentielles peut être très agaçant.
• Instructions peu claires : Des champs de formulaire confus ou vagues peuvent décourager les gens.
• Non-optimisation pour mobile : Les formulaires difficiles à utiliser sur les appareils mobiles peuvent être un grand frein.
• Problèmes techniques : Des problèmes tels que le mauvais fonctionnement du formulaire ou des temps de chargement lents peuvent empêcher les gens de le compléter.

Pour plus de détails, vous pouvez lire notre guide sur comment suivre et réduire l'abandon de formulaire dans WordPress.

FAQ sur la saisie semi-automatique pour les champs d'adresse dans les formulaires WordPress

Comment fonctionne l'auto-complétion d'adresses ?

Votre formulaire se connecte à un service de localisation comme Google Places ou Mapbox. Pendant que les utilisateurs tapent, il affiche des suggestions d'adresses correspondantes. Lorsqu'ils en choisissent une, les champs (rue, ville, code postal, etc.) se remplissent automatiquement.

Fonctionnera-t-il avec mon thème WordPress ?

Généralement, oui. L'auto-complétion fonctionne avec la plupart des thèmes WordPress modernes, mais parfois, des scripts personnalisés ou des thèmes fortement modifiés peuvent causer des conflits.

Quels plugins WordPress prennent en charge l'auto-complétion d'adresses ?

Plusieurs plugins de formulaires offrent cela, généralement via des modules complémentaires ou des intégrations. WPForms avec le module complémentaire Géolocalisation est l'une des meilleures options.

Que faire si les suggestions ne s'affichent pas ?

Quelques causes courantes incluent une clé API manquante ou incorrecte, des erreurs JavaScript ou des conflits de thème, et des restrictions API (telles que des paramètres de domaine incorrects).

Plus de guides pour utiliser les formulaires WordPress

J'espère que cet article vous a aidé à apprendre comment ajouter l'auto-complétion pour les champs d'adresse dans WordPress.

Si vous avez trouvé cela utile, vous pourriez également consulter nos autres guides utiles sur :

• Comment créer des formulaires WordPress avec des champs déroulants
• Comment créer des formulaires multilingues dans WordPress
• Comment suivre le parcours utilisateur sur les formulaires de prospects WordPress
• Conseils d'experts pour créer des formulaires plus interactifs et augmenter les conversions
• Façons d'utiliser la logique conditionnelle dans les formulaires WordPress (Cas d'utilisation principaux)
• Comment créer un formulaire Airtable personnalisé dans WordPress
• Guide ultime pour l'utilisation des formulaires WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.