Comment ajouter la saisie semi-automatique d'adresse à un formulaire WordPress (étape par étape)

Les champs d'adresse sont frustrants. Les utilisateurs épellent mal les noms de rue, oublient les codes postaux, entrent des adresses incomplètes ou abandonnent complètement les formulaires car la saisie d'adresses complètes est fastidieuse.

La saisie semi-automatique de Google Maps résout ce problème en suggérant des adresses complètes et validées au fur et à mesure que les utilisateurs tapent. Après avoir tapé 3-4 caractères, les utilisateurs voient une liste déroulante de vraies adresses à sélectionner.

Vous voulez configurer cela sur votre formulaire pour éliminer les fautes de frappe et accélérer la complétion du formulaire ? Dans ce guide, je vous fournirai des instructions étape par étape sur la façon de créer un formulaire d'adresse avec saisie semi-automatique Google Maps.

Comment créer un formulaire d'adresse avec saisie semi-automatique Google Maps ?

Avec WPForms Pro et le module complémentaire Géolocalisation, vous pouvez ajouter la saisie semi-automatique d'adresses Google à vos formulaires WordPress en quelques minutes. Suivez ces instructions étape par étape pour commencer :

Étape 1 : Installer le plugin WPForms

La première chose que vous devrez faire est d'installer le plugin WPForms, qui est un constructeur de formulaires puissant qui facilite la création de formulaires de contact, de formulaires d'inscription, et plus encore.

Il contient plus de 2 100+ modèles de formulaires WordPress que vous pouvez utiliser et est livré avec des outils de géolocalisation intégrés pour faciliter grandement l'affichage de cartes sur vos formulaires.

Pour ajouter des cartes à vos formulaires de contact, vous aurez besoin de WPForms Pro, qui inclut le module complémentaire Geolocation et toutes les fonctionnalités de carte que nous aborderons dans ce tutoriel.

Si vous êtes nouveau sur WordPress ou si vous rencontrez des difficultés lors du processus d'installation du plugin, vous pouvez consulter le guide étape par étape sur comment installer un plugin WordPress.

Passez à WPForms Pro maintenant ! 🙂

Étape 2 : Activer le module complémentaire Geolocation

Maintenant que WPForms Pro est installé, vous devez activer le module complémentaire Geolocation. C'est ce qui alimente toutes les fonctionnalités de carte dans vos formulaires de contact.

Pour activer le module complémentaire, rendez-vous sur votre tableau de bord WordPress et cliquez sur WPForms » Modules complémentaires.

Dans la barre de recherche, tapez Geolocation. Cliquez ensuite sur le bouton Installer le module complémentaire pour changer son statut en Actif.

Le module complémentaire s'installe automatiquement. Pas besoin de télécharger de fichiers ou de configurer quoi que ce soit pour le moment. Ensuite, vous le connecterez à Google Maps.

Étape 3 : Configurer les paramètres de Geolocation

Une fois que vous avez activé le module complémentaire Geolocation, vous devez configurer ses paramètres. Pour ce faire, cliquez sur WPForms » Paramètres.

Sur la page des paramètres de WPForms, cliquez sur Geolocation dans les onglets en haut pour accéder à ses paramètres.

Ici, vous verrez différentes options pour configurer le module complémentaire Geolocation en fonction de différents besoins et exigences :

• Fournisseur de lieux : Vous avez la possibilité de choisir le fournisseur auprès duquel vous souhaitez recevoir vos informations de géolocalisation. Ici, nous sélectionnerons l'API Google Places comme notre fournisseur de lieux.

• Emplacement actuel : Activez cette option pour permettre à la localisation de votre utilisateur d'être pré-remplie dans le formulaire.

• Google Places API : Pour activer la fonctionnalité d'adresse de complétion automatique et afficher Google Maps dans vos formulaires, vous devrez générer une clé API et la connecter à WPForms.

Cliquez sur le bouton Créer des identifiants en haut et sélectionnez l'option Clé API.

Générer une clé API depuis la console développeur Google

Accédez à la Google Developer Console et sélectionnez le projet dans le menu Sélectionner un projet en haut.

Si vous n'avez aucun projet créé précédemment, cliquez sur Nouveau projet pour en créer un nouveau.

Une fois que vous avez créé avec succès un nouveau projet, cliquez sur Activer les API et les services.

Cela ouvrira une Bibliothèque d'API Google.

À partir d'ici, vous devrez activer 3 API :

1. API Geocoding
2. API Maps JavaScript
3. API Places

Cette bibliothèque d'API offre une option de recherche facile ; tapez le nom de l'API dans la zone de recherche, accédez à votre API et cliquez sur le bouton ACTIVER.

Une fois que vous avez activé toutes vos API, retournez au tableau de bord de votre console Google et accédez à l'onglet Identifiants.

Cliquez sur le bouton Créer des identifiants en haut et sélectionnez l'option Clé API.

Une fenêtre contextuelle avec une clé API s'ouvrira. Cliquez sur l'option RESTREINDRE LA CLÉ dans le coin inférieur droit de la fenêtre contextuelle.

Une nouvelle page s'ouvrira, où vous devrez configurer les paramètres suivants :

• Restrictions d'application : À partir d'ici, vous pouvez sélectionner les sites Web, les adresses IP ou les applications qui peuvent utiliser la clé API. Ici, vous devrez choisir l'option Référents HTTP pour permettre à votre clé d'être utilisée sur vos sites Web.

• Restrictions de site Web : Une fois que vous avez sélectionné les Référents HTTP, une nouvelle option s'affichera, restrictions de site Web. Ici, vous devez ajouter le nom de domaine de votre site Web pour restreindre la clé API à être utilisée uniquement par les sites Web spécifiés.

• Restrictions d'API : Après avoir restreint votre clé par application et par site Web, vous devrez restreindre votre clé par API. Pour ce faire, cliquez sur l'option Restreindre la clé.

Cela ouvrira un menu déroulant avec une option d'API multiples. Sélectionnez les API suivantes dans le menu déroulant :

• API Places
• API Maps JavaScript
• API Geocoding

Une fois que vous avez terminé de sélectionner les API, cliquez sur le bouton Enregistrer pour sauvegarder vos paramètres, ce qui vous redirigera vers la page Identifiants. Copiez votre clé depuis la page et retournez aux paramètres de votre WPForms.

Dans vos paramètres WPForms, collez ceci dans le champ Clé API sous l'API Google Places et cliquez sur le bouton Enregistrer les paramètres.

Vos paramètres de géolocalisation sont maintenant configurés. Ensuite, vous allez créer un formulaire avec la complétion automatique d'adresse activée.

Étape 4 : Créer votre formulaire d'adresse avec saisie semi-automatique

Avec le module complémentaire de géolocalisation configuré, vous êtes prêt à créer votre formulaire de contact. Cela prend environ 5 minutes. Accédez à WPForms » Ajouter nouveau dans votre tableau de bord WordPress pour ouvrir le constructeur de formulaires.

Donnez un nom à votre formulaire dans le champ Nommez votre formulaire. Quelque chose comme « Contactez-nous » fonctionne bien. Vous verrez ici quelques options. Si vous souhaitez gagner du temps, vous pouvez choisir parmi nos 2 100+ modèles de formulaires WordPress.

Je recommande de choisir le modèle de formulaire de contact simple. Cela vous donne un formulaire de contact prêt à l'emploi avec les champs essentiels déjà ajoutés.

Le modèle comprend un champ Nom, un champ E-mail et un champ Commentaire ou Message. Vous pouvez personnaliser ces champs, en ajouter de nouveaux ou supprimer ceux dont vous n’avez pas besoin.

Maintenant, il y a probablement quelques autres paramètres de formulaire que vous pourriez vouloir configurer, comme les notifications et les confirmations. Si c’est le cas (et je le recommande vivement), consultez notre guide détaillé sur la création de votre premier formulaire.

Essayez le générateur IA de WPForms ! 🙂

Étape 5 : Ajouter le champ d'adresse à votre formulaire

Maintenant que notre formulaire est prêt, nous devons juste ajouter le Champ d’adresse. Sur la gauche, faites glisser le Champ d’adresse de la section Fancy Fields et placez-le sur votre formulaire.

Le champ d’adresse comprend déjà un libellé et un sous-libellé pour votre commodité. Vous avez la flexibilité de personnaliser le texte du libellé, de sélectionner le schéma d’adresse, de personnaliser la taille du champ et de masquer le libellé et les sous-libellés.

Vous allez maintenant activer la fonctionnalité d’autocomplétion pour votre champ d’adresse. Il s’agit d’un simple interrupteur qui connecte le champ à votre API Google Places.

Cliquez sur le champ Adresse dans votre formulaire, puis cliquez sur l’onglet Avancé dans les paramètres du champ sur la gauche.

Faites défiler vers le bas jusqu’à ce que vous voyiez l’option Activer l’autocomplétion d’adresse. Activez ce paramètre pour activer l’autocomplétion d’adresse dans votre formulaire.

L’activation de cette option ouvrira une fonctionnalité supplémentaire : Afficher la carte. Si vous souhaitez afficher une carte dans votre formulaire de contact, activez également cette option.

Utilisez le menu déroulant pour spécifier si vous souhaitez que la carte apparaisse au-dessus ou en dessous des sous-champs d’adresse.

Cliquez sur le bouton Enregistrer en haut. Maintenant que votre formulaire d’adresse avec autocomplétion est prêt, il est temps de l’ajouter à votre site Web.

Étape 6 : Publiez votre formulaire d'adresse avec saisie semi-automatique Google Maps

WPForms vous permet d’ajouter votre formulaire à plusieurs emplacements, y compris les pages, les articles de blog et même les widgets de barre latérale de votre site Web.

Avant d’intégrer votre formulaire à une page, si vous le souhaitez, vous pouvez vérifier à quoi ressemblera votre formulaire sur la page en direct. Pour prévisualiser votre formulaire, cliquez sur le bouton Aperçu en haut.

Si vous êtes satisfait de votre formulaire d'adresse avec saisie semi-automatique de Google Maps, vous pouvez l'ajouter à votre page. Cliquez sur l'icône “+” et ajoutez le bloc WPForms depuis l'éditeur de blocs.

Ensuite, sélectionnez votre formulaire dans le menu déroulant du bloc. Dans ce cas, je sélectionnerai le formulaire d'adresse avec saisie semi-automatique que je viens de créer en suivant les étapes ci-dessus.

Après cela, tout ce que vous avez à faire est de publier la page et votre formulaire sera en ligne et prêt à accepter des soumissions. Voici à quoi ressemble le champ d'adresse avec la carte interactive sur une page publiée. N'est-ce pas incroyable ?

Excellent travail ! Vous avez créé avec succès un formulaire d'adresse avec saisie semi-automatique de Google Maps. Consultez ce guide pour plus de détails sur les lignes d'adresse 1 et 2.

FAQ sur la façon de créer un formulaire d'adresse avec saisie semi-automatique de Google Maps

Le formulaire d'adresse avec saisie semi-automatique est un sujet d'intérêt populaire parmi nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :

Qu'est-ce que la saisie semi-automatique d'adresse dans un formulaire ?

La saisie semi-automatique d'adresse est une fonctionnalité qui suggère des adresses complètes et validées au fur et à mesure que les utilisateurs tapent dans un champ de formulaire. Après avoir saisi 3-4 caractères, une liste déroulante apparaît avec les adresses correspondantes de la base de données de Google.

Les utilisateurs sélectionnent leur adresse au lieu de taper chaque champ manuellement. Cela élimine les fautes de frappe, accélère la complétion (surtout sur mobile) et garantit que les adresses sont exactes et livrables.

Comment ajouter une adresse avec saisie semi-automatique à mon formulaire WordPress ?

Installez WPForms Pro ou une version supérieure, activez le module complémentaire Geolocation, générez une clé API Google Places gratuite depuis la console Google Cloud, collez la clé API dans WPForms » Paramètres » Géolocalisation.

Après cela, tout ce que vous avez à faire est de créer un formulaire, d'ajouter un champ d'adresse et d'activer « Activer la saisie semi-automatique d'adresse » dans les paramètres avancés du champ.

La configuration complète prend 20 à 30 minutes et est expliquée étape par étape dans ce guide. Une fois configurée, la saisie semi-automatique fonctionne sur n'importe quel formulaire avec un champ d'adresse.

La saisie semi-automatique d'adresse de WPForms fonctionne-t-elle avec Google Maps ?

Oui, WPForms utilise l'API Google Places pour la saisie semi-automatique d'adresse, qui est la même technologie qui alimente la recherche d'adresses de Google Maps.

Vous devez activer trois API Google (API Places, API JavaScript Maps et API Geocoding) pour une fonctionnalité complète.

WPForms peut également afficher une carte Google interactive sur votre formulaire montrant l'emplacement de l'adresse sélectionnée, activez cette option dans les paramètres avancés du champ d'adresse sous « Afficher la carte ».

La saisie semi-automatique d'adresse de Google Maps est-elle gratuite ?

Google offre 28 000 requêtes gratuites de saisie semi-automatique d'adresse par mois. Après cela, vous payez 2,83 $ par 1 000 requêtes. La plupart des petits et moyens sites Web restent dans la tranche gratuite.

Une « requête » compte chaque fois qu'un utilisateur tape dans votre champ d'adresse et que des suggestions apparaissent (pas par frappe, mais par session de recherche). Surveillez votre utilisation dans votre console Google Cloud.

Si vous dépassez fréquemment les limites, envisagez de mettre à niveau votre plan Google Cloud ou de restreindre la saisie semi-automatique aux formulaires essentiels uniquement.

Quelle est la différence entre l'API Google Places et Mapbox pour la saisie semi-automatique ?

L'API Google Places offre une couverture d'adresses mondiale plus complète (plus de 200 pays) et une meilleure validation des adresses, mais dispose d'un niveau gratuit de 28 000 requêtes par mois.

Mapbox propose des requêtes d'autocomplétion gratuites illimitées, mais des données d'adresse moins détaillées dans les zones rurales et certaines régions internationales.

WPForms prend en charge les deux. Choisissez Google Places pour la précision ou Mapbox pour une utilisation illimitée. Vous pouvez changer de fournisseur dans WPForms » Paramètres » Géolocalisation sans reconstruire vos formulaires.

Puis-je utiliser l'autocomplétion d'adresses sur les formulaires de paiement WooCommerce ?

L'autocomplétion d'adresses de WPForms fonctionne uniquement sur les formulaires créés avec WPForms, pas sur le paiement natif de WooCommerce. Cependant, vous pouvez créer un formulaire de paiement personnalisé avec WPForms avec intégration de paiement et autocomplétion d'adresses.

Alternativement, installez un plugin d'autocomplétion d'adresses spécifique à WooCommerce qui s'intègre directement aux champs de paiement de WooCommerce.

Si vous avez spécifiquement besoin d'une intégration WooCommerce, consultez le répertoire de plugins de WooCommerce pour des plugins « autocomplétion d'adresses » ou « Google Places » conçus pour le paiement.

Quel est le meilleur plugin Google Maps pour WordPress ?

WPForms Pro est l'un des meilleurs plugins de cartes pour WordPress. Il comprend un puissant module complémentaire de géolocalisation qui offre une fonctionnalité d'autocomplétion d'adresses pré-construite qui fonctionne avec Google Maps ou Mapbox.

Cette fonctionnalité localise automatiquement et suggère automatiquement les emplacements de vos utilisateurs lorsqu'ils remplissent et tapent leurs adresses.

De plus, avec le module complémentaire de géolocalisation, vous pouvez ajouter une carte à votre formulaire de contact WordPress et permettre à vos utilisateurs d'ajouter un emplacement en ajustant la punaise sur la carte.

Que se passe-t-il pour mon formulaire si je dépasse le niveau gratuit de Google ?

Si vous dépassez 28 000 requêtes d'autocomplétion par mois, Google facture votre compte Cloud (si la facturation est activée) ou cesse de fournir des suggestions d'autocomplétion (si la facturation n'est pas activée).

Votre formulaire continue de fonctionner et le champ Adresse devient simplement une entrée de texte normale sans suggestions. Les utilisateurs peuvent toujours taper les adresses manuellement.

Surveillez votre utilisation dans Google Cloud Console et définissez des alertes de facturation pour éviter les surprises. La plupart des sites restent bien en deçà de la limite gratuite, sauf s'ils ont un trafic très élevé.

Ensuite, améliorez vos formulaires avec des cartes interactives

Excellent travail ! Vous avez créé avec succès un formulaire d'adresse avec autocomplétion Google Maps qui améliore l'expérience utilisateur et garantit des données d'adresse précises. Maintenant que l'autocomplétion d'adresses fonctionne, faites passer vos formulaires au niveau supérieur avec le champ de carte de WPForms.

Cette fonctionnalité vous permet d'intégrer des cartes interactives directement dans vos formulaires où les utilisateurs peuvent cliquer pour sélectionner des emplacements, afficher plusieurs lieux d'affaires avec des marqueurs personnalisés, ou choisir leur zone de service préférée à partir d'une carte visuelle. Le champ de carte est parfait pour :

• Formulaires de réservation multi-sites : Permettez aux clients de voir tous les emplacements sur une seule carte et de sélectionner leur succursale préférée.
• Sélection de zone de service : Affichez vos zones de couverture visuellement afin que les clients sachent si vous desservez leur région.
• Formulaires de contact avec les emplacements des bureaux : Aidez les visiteurs à trouver le bureau le plus proche avant même de soumettre.
• Enregistrement d'événement : Affichez les lieux avec des indications intégrées au formulaire.

Découvrez ces guides pour explorer ce qui est possible :

• Comment afficher une carte avec votre formulaire de contact WordPress
• Comment créer un formulaire de réservation WordPress multi-sites

Vous voulez savoir quels formulaires convertissent le mieux ? Apprenez comment suivre une source de prospects dans WordPress pour voir quelles sources de trafic vous apportent le plus de soumissions de formulaires.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.