Comment créer un formulaire de saisie automatique d'adresse dans Google Maps ?

Les champs d'adresse sont frustrants. Les utilisateurs font des fautes d'orthographe dans les noms de rue, oublient les codes postaux, saisissent des adresses incomplètes ou abandonnent complètement les formulaires parce que la saisie d'adresses complètes est fastidieuse.

La fonction de 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 saisi 3 ou 4 caractères, les utilisateurs voient apparaître une liste déroulante d'adresses réelles parmi lesquelles ils peuvent faire leur choix.

Vous souhaitez configurer cette fonctionnalité dans votre formulaire afin d'éliminer les fautes de frappe et d'accélérer le remplissage du formulaire ? Dans ce guide, je vais vous expliquer étape par étape comment créer un formulaire d'adresse à saisie automatique Google Maps.

Comment créer un formulaire de saisie automatique d'adresse dans Google Maps ?

Avec WPForms Pro et l'extension Geolocation, vous pouvez ajouter des fonctionnalités cartographiques à vos formulaires en un clin d'œil. Suivez ces instructions simples, étape par étape, pour commencer :

Étape 1 : Installer le plugin WPForms

La première chose à faire est d'installer le plugin WPForms, un puissant générateur de formulaires qui facilite la création de formulaires de contact, d'inscription, etc.

Il dispose de plus de 2 100 modèles de formulaires WordPress que vous pouvez utiliser et est équipé d'outils de géolocalisation intégrés qui facilitent considérablement l'affichage de cartes sur vos formulaires.

Pour ajouter des cartes à vos formulaires de contact, vous aurez besoin de WPForms Pro, qui comprend l'extension Geolocation et toutes les fonctionnalités cartographiques que nous aborderons dans ce tutoriel.

Si vous êtes novice en matière de WordPress ou si vous rencontrez des difficultés lors de l'installation d'un plugin, vous pouvez consulter le guide étape par étape sur l'installation d'un plugin WordPress.

Passez à WPForms Pro dès maintenant ! 🙂 .

Étape 2 : Activer le module complémentaire de géolocalisation

Maintenant que WPForms Pro est installé, vous devez activer l'extension Geolocation. C'est elle qui alimente toutes les fonctionnalités cartographiques de vos formulaires de contact.

Pour activer l'addon, rendez-vous dans votre tableau de bord WordPress et cliquez sur WPForms " Addons.

Dans la barre de recherche, tapez « Géolocalisation ». Cliquez ensuite sur le bouton « Installer l'extension » pour activer son statut.

L'extension s'installe automatiquement. Vous n'avez pas besoin de télécharger de fichiers ni de configurer quoi que ce soit pour l'instant. Ensuite, vous allez la connecter à Google Maps.

Étape 3 : Configuration des paramètres de géolocalisation

Une fois que vous avez activé le module complémentaire de géolocalisation, vous devez configurer ses paramètres. Pour ce faire, cliquez sur WPForms " Settings.

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

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

• Fournisseur de lieux: Vous avez la possibilité de choisir le fournisseur qui recevra vos informations de géolocalisation. Ici, nous allons sélectionner l'API Google Places comme fournisseur de lieux.

• Localisation actuelle: Activez cette option pour que la localisation de l'utilisateur soit pré-remplie dans le formulaire.

• API Google Places: Pour activer la fonction d'autocomplétion des adresses et afficher Google Maps dans vos formulaires, vous devez générer une clé API et la connecter à WPForms.

Voyons le processus complet de génération d'une clé API.

Générer une clé API à partir de Google Developer Console

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

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

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

Cela ouvrira une bibliothèque API de Google.

À partir de là, vous devez activer trois API :

1. API de géocodage
2. API JavaScript pour les cartes
3. API Lieux

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

Une fois que vous avez activé toutes vos API, retournez dans votre tableau de bord Google Console et accédez à l'onglet " Credentials".

Cliquez sur le bouton " Create Credentials " en haut et sélectionnez l'option " API key".

Une fenêtre contextuelle contenant une clé API s'ouvre. Cliquez sur l'option RESTRICT KEY dans le coin inférieur droit de la fenêtre pop-up.

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

• Restrictions d'application : À partir de là, vous pouvez sélectionner les sites web, les adresses IP ou les applications pour lesquels vous pouvez utiliser la clé API. Vous devez choisir l'option HTTP Referrers pour permettre à votre clé d'être utilisée sur vos sites web.

• Restrictions concernant les sites web : Une fois que vous avez sélectionné les référents HTTP, une nouvelle option s'affiche, les restrictions de site web. Ici, vous devez ajouter le nom de domaine de votre site web pour restreindre l'utilisation de la clé API aux seuls sites web spécifiés.

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

Cela ouvrira une liste déroulante avec une option d'API multiples. Sélectionnez les API suivantes dans la liste déroulante :

• API Lieux
• API JavaScript pour les cartes
• Géocodage AP

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

Dans les paramètres de votre WPForms, collez cette clé dans le champ API Key sous Google Places API et cliquez sur le bouton Save Settings.

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

Étape 4 : Créez votre formulaire d'adresse à saisie semi-automatique

Une fois l'extension Geolocation configurée, vous êtes prêt à créer votre formulaire de contact. Cela prend environ 5 minutes. Allez dans WPForms » Ajouter nouveau dans votre tableau de bord WordPress pour ouvrir le générateur de formulaires.

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

Je vous recommande de choisir le modèle de formulaire de contact simple. Vous disposerez ainsi d'un formulaire de contact prêt à l'emploi contenant déjà les champs essentiels.

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.

Il y a probablement quelques autres paramètres du formulaire que vous souhaiterez peut-être configurer, comme les notifications et les confirmations. Si c'est le cas (et je vous le recommande vivement), consultez notre guide détaillé sur la création de votre premier formulaire.

Essayez WPForms AI Builder ! 🙂

Étape 5 : Ajoutez le champ Adresse à votre formulaire

Maintenant que notre formulaire est prêt, il ne nous reste plus qu'à ajouter le champ Adresse. Sur la gauche, faites glisser le champ Adresse depuis la section Champs fantaisie et placez-le dans votre formulaire.

Le champ Adresse comprend déjà un libellé et un sous-libellé pour vous faciliter la tâche. Vous pouvez personnaliser le libellé, sélectionner le format de l'adresse, personnaliser la taille du champ et masquer le libellé et les sous-libellés.

Vous allez maintenant activer la fonctionnalité de saisie automatique pour votre champ Adresse. Il s'agit d'un simple bouton 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 à gauche.

Faites défiler vers le bas jusqu'à ce que vous voyiez l'option Enable Address Autocomplete (Activer l'autocomplétion d'adresse). Activez cette option pour activer la saisie automatique des adresses dans votre formulaire.

L'activation de cette fonction permet d'ouvrir une autre fonctionnalité : Afficher une carte. Si vous souhaitez afficher une carte dans votre formulaire de contact, activez également cette option.

Utilisez la liste déroulante pour indiquer si vous souhaitez que la carte apparaisse au-dessus ou au-dessous des sous-champs d'adresse.

Cliquez sur le bouton Enregistrer en haut de la page. Maintenant que votre formulaire d'adresse autocomplete est prêt, il est temps de l'ajouter à votre site web.

Étape 7 : Publiez votre formulaire d'adresse à saisie semi-automatique Google Maps

WPForms vous permet d'ajouter votre formulaire à plusieurs endroits, y compris dans les pages, les articles de blog, et même les widgets de la barre latérale de votre site web.

Avant d'intégrer votre formulaire à une page, vous pouvez, si vous le souhaitez, vérifier l'aspect de votre formulaire sur la page en ligne. Pour prévisualiser votre formulaire, cliquez sur le bouton Aperçu en haut de la page.

Si vous êtes satisfait de votre formulaire d'adresse à saisie semi-automatique Google Maps, vous êtes prêt à l'ajouter à votre page. Cliquez sur l'icône « + » et ajoutez le bloc WPForms à partir de l'éditeur de blocs.

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

Il ne vous reste plus qu'à publier la page pour que votre formulaire soit mis en ligne et prêt à recevoir des soumissions. Voici à quoi ressemble le champ Adresse avec la carte interactive sur une page publiée. N'est-ce pas formidable ?

Excellent travail ! Vous avez réussi à créer un formulaire de saisie automatique d'adresse dans Google Maps. Consultez ce guide pour plus de détails sur les lignes d'adresse 1 et 2.

FAQ sur la création d'un formulaire d'auto-complétion d'adresse dans Google Maps

L'autocomplétion du formulaire d'adresse est un sujet d'intérêt populaire parmi nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :

Qu'est-ce que l'adresse autocomplète dans un formulaire ?

La saisie automatique d'adresse est une fonctionnalité qui suggère des adresses complètes et validées lorsque les utilisateurs saisissent du texte dans un champ de formulaire. Après avoir saisi 3 ou 4 caractères, une liste déroulante apparaît avec les adresses correspondantes issues de la base de données de Google.

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

Comment ajouter une adresse à remplir automatiquement à mon formulaire WordPress ?

Installez WPForms Pro ou une version supérieure, activez l'extension Geolocation, générez une clé API Google Places gratuite à partir de Google Cloud Console, collez la clé API dans WPForms » Paramètres » Géolocalisation.

Ensuite, il vous suffit de créer un formulaire, d'ajouter un champ Adresse et d'activer l'option « Activer la saisie automatique de l'adresse » dans les paramètres avancés du champ.

La configuration complète prend entre 20 et 30 minutes et est décrite étape par étape dans ce guide. Une fois configurée, la saisie automatique fonctionne sur tous les formulaires comportant un champ Adresse.

WPForms prend-il en charge la saisie automatique avec Google Maps ?

Oui, WPForms utilise l'API Google Places pour la saisie automatique des adresses, qui est la même technologie que celle utilisée par Google Maps pour la recherche d'adresses.

Vous devez activer trois API Google (API Places, API JavaScript Maps et API Geocoding) pour bénéficier de toutes les fonctionnalités.

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

La saisie automatique d'adresses dans Google Maps est-elle gratuite ?

Google fournit 28 000 requêtes gratuites par mois pour la saisie semi-automatique d'adresses. Au-delà, vous payez 2,83 $ pour 1 000 requêtes. La plupart des sites web de petite et moyenne taille restent dans la limite du forfait gratuit.

Une « requête » est comptabilisée chaque fois qu'un utilisateur saisit une adresse dans votre champ d'adresse et que des suggestions apparaissent (non pas par frappe, mais par session de recherche). Surveillez l'utilisation dans votre console Google Cloud.

Si vous dépassez fréquemment les limites, envisagez de passer à un forfait Google Cloud supérieur ou de limiter la saisie 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 mondiale plus complète (plus de 200 pays) et une meilleure validation des adresses, mais son forfait gratuit est limité à 28 000 requêtes par mois.

Mapbox offre un nombre illimité de requêtes de saisie semi-automatique gratuites, mais les données d'adresses sont moins détaillées dans les zones rurales et certaines régions internationales.

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

Puis-je utiliser la saisie automatique d'adresse dans les formulaires de paiement WooCommerce ?

La fonction de saisie automatique d'adresse de WPForms fonctionne uniquement sur les formulaires créés avec WPForms, et non sur le processus de paiement natif de WooCommerce. Cependant, vous pouvez créer un formulaire de paiement personnalisé à l'aide de WPForms avec intégration du paiement et saisie automatique d'adresse.

Vous pouvez également installer un plugin d'autocomplétion d'adresse spécifique à WooCommerce qui s'intègre directement aux champs de paiement WooCommerce.

Si vous avez spécifiquement besoin d'une intégration WooCommerce, consultez le répertoire des plugins WooCommerce pour trouver des plugins « address autocomplete » (saisie automatique d'adresse) 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 inclut un puissant addon de géolocalisation qui est livré avec une fonction d'autocomplétion d'adresse pré-construite qui fonctionne avec Google Maps ou Mapbox.

Cette fonction permet de localiser et de suggérer automatiquement les lieux où se trouvent vos utilisateurs lorsqu'ils remplissent et saisissent leur adresse.

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 lieu en ajustant l'épingle sur la carte.

Que devient mon formulaire si je dépasse le quota gratuit de Google ?

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

Votre formulaire continue de fonctionner et le champ Adresse devient simplement un champ de saisie de texte standard sans suggestions. Les utilisateurs peuvent toujours saisir les adresses manuellement.

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

Ensuite, améliorez vos formulaires grâce à des cartes interactives.

Excellent travail ! Vous avez créé avec succès un formulaire d'adresse à saisie automatique Google Maps qui améliore l'expérience utilisateur et garantit l'exactitude des données d'adresse. Maintenant que la saisie automatique d'adresse fonctionne, passez à la vitesse supérieure avec le champ Carte de WPForms.

Cette fonctionnalité vous permet d'intégrer des cartes interactives directement dans vos formulaires. Les utilisateurs peuvent alors cliquer pour sélectionner des emplacements, afficher plusieurs sites commerciaux à l'aide de marqueurs personnalisés ou choisir leur zone de service préférée à partir d'une carte visuelle. Le champ Carte est idéal pour :

• Formulaires de réservation multi-sites : permettez aux clients de voir tous les sites sur une seule carte et de sélectionner leur succursale préférée.
• Sélection de la zone de service : affichez visuellement vos zones de couverture afin que les clients sachent si vous desservez leur région.
• Formulaires de contact avec emplacement des bureaux : aidez les visiteurs à trouver le bureau le plus proche avant même qu'ils n'envoient leur formulaire.
• Inscription à l'événement : affichez les lieux des événements avec les itinéraires intégrés au formulaire.

Consultez ces guides pour découvrir toutes les possibilités :

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

Vous souhaitez savoir quels formulaires convertissent le mieux ? Découvrez comment suivre une source de prospects dans WordPress afin d'identifier les sources de trafic qui génèrent 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 construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.