Addon Géolocalisation

Souhaitez-vous en savoir plus sur les emplacements des utilisateurs qui remplissent vos formulaires ? Avec le module de géolocalisation WPForms, vous pouvez facilement collecter des données géographiques pour chacun de vos prospects.

Ce tutoriel vous montrera comment installer et utiliser le module de géolocalisation pour WPForms.

---

Configuration du module complémentaire Géolocalisation

Avant de commencer, vous devez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress.

Une fois que vous avez installé WPForms et que votre licence est vérifiée, vous pourrez rapidement installer et activer le module de géolocalisation.

Après avoir activé le module, vous pouvez configurer ses paramètres en allant dans WPForms » Paramètres et en sélectionnant l'onglet Géolocalisation.

À partir d'ici, vous aurez la possibilité de choisir le fournisseur auprès duquel vous souhaitez recevoir vos informations de géolocalisation.

Dans les sections suivantes, nous expliquerons comment configurer les API Google Places et Mapbox Search.

API Google Places

Tout d'abord, sélectionnez Google Places dans la liste des options de la section Géolocalisation.

Une fois que vous sélectionnez l'option Google Places, des paramètres supplémentaires apparaîtront. Vous devrez récupérer votre clé d'API Google Places afin de pouvoir la saisir dans le champ prévu à cet effet. Pour ce faire, ouvrez la console Google Cloud dans un nouvel onglet ou une nouvelle fenêtre de navigateur.

Générer votre clé d'API Google Places

En haut de votre tableau de bord Google Cloud, sélectionnez le projet pour lequel vous souhaitez activer cette clé d'API dans le menu Sélectionner un projet.

Si vous n'avez pas encore créé de projet, cliquez sur NOUVEAU PROJET pour en configurer un.

Une fois que vous avez ouvert votre projet, vous devriez être redirigé vers son tableau de bord APIs et services. Sinon, ouvrez le menu hamburger dans le coin supérieur gauche de l'écran et allez dans APIs et services » APIs et services activés.

Cliquez ensuite sur + ACTIVER LES APIS ET SERVICES.

Cela ouvrira la bibliothèque d'API. Recherchez et activez les API suivantes :

• API Places
• API Maps JavaScript
• API Geocoding

Pour activer une API pour votre projet, il vous suffit de cliquer sur le bouton bleu ACTIVER sous son nom.

Après avoir activé les trois API, accédez aux paramètres des identifiants en allant dans API et services » Identifiants depuis le menu de gauche. À partir de là, cliquez sur + CRÉER DES IDENTIFIANTS et sélectionnez l'option Clé API pour générer une clé API.

Dans la fenêtre contextuelle avec votre nouvelle clé API, cliquez sur Modifier la clé API.

Sur l'écran suivant, vous devrez configurer les options suivantes :

Définir une restriction d'application

Pour autoriser l'utilisation de votre clé API avec WPForms, vous devrez sélectionner l'option Sites web.

Restrictions de site web

Une fois que vous avez autorisé l'utilisation de votre clé sur des sites web, il est recommandé de restreindre les domaines qui peuvent l'utiliser pour des raisons de sécurité. Pour ce faire, cliquez sur + AJOUTER dans la section Restrictions de site web.

Entrez ensuite le domaine de votre site web dans le champ fourni. Si vous souhaitez autoriser l'utilisation de votre clé sur un domaine entier, entrez-le avec une barre oblique (/) suivie d'un astérisque (*) à la fin.

Vous pouvez ajouter autant d'éléments que nécessaire pour activer votre clé pour l'ensemble de votre site ou pour plusieurs sites.

Restrictions d'API

Une fois que vous avez restreint votre clé par application et par site web, vous devrez la restreindre par API. Pour ce faire, sélectionnez l'option Restreindre la clé.

Cela révélera un menu déroulant, à partir duquel vous devrez sélectionner les API spécifiques auxquelles vous souhaitez restreindre votre clé.

Dans ce menu déroulant, sélectionnez les API suivantes :

• API Places
• API Maps JavaScript
• API Geocoding

Une fois que vous avez sélectionné ces API, cliquez sur le bouton Enregistrer pour sauvegarder vos paramètres.

Copie de votre clé API Google Places

Après avoir enregistré vos paramètres, vous serez redirigé vers un aperçu de toutes vos clés API disponibles. Pour afficher votre clé, cliquez sur l'option AFFICHER LA CLÉ sous la rubrique Actions.

Une fenêtre contextuelle apparaîtra affichant la clé API. À partir de là, copiez la clé en cliquant sur l'icône de copie et revenez à vos paramètres WPForms.

De retour dans vos paramètres WPForms, collez la clé API que vous venez de copier dans le champ Clé API et enregistrez vos paramètres.

Si vous souhaitez pré-remplir vos formulaires avec la localisation des utilisateurs, basculez l'option Emplacement actuel sur la position ACTIVÉ.

C'est tout ce que vous devez savoir pour configurer l'API Google Places. Dans la section suivante, nous aborderons l'utilisation du fournisseur Mapbox, une autre excellente option pour fournir des données de géolocalisation.

API de recherche Mapbox

Pour commencer la configuration de l'API Mapbox Search, sélectionnez Mapbox Search dans la liste des options sous la section Géolocalisation.

Une fois que vous aurez sélectionné l'option API Mapbox Search, des paramètres supplémentaires apparaîtront. Vous devrez créer un jeton d'accès Mapbox Search. Pour ce faire, vous devrez d'abord vous connecter au tableau de bord de votre compte Mapbox.

Une fois que vous avez accédé au tableau de bord de votre compte, localisez la barre de navigation et cliquez sur Tokens.

Cela vous mènera à la page des jetons d'accès où vous pourrez ajouter et gérer vos jetons.

Mapbox vous fournit un jeton d'accès par défaut, cependant, nous vous recommandons de créer un nouveau jeton que vous pourrez utiliser spécifiquement pour WPForms. Pour ce faire, cliquez sur le bouton Create a token.

En cliquant sur ce bouton, vous accéderez à une nouvelle page où vous pourrez créer un nouveau jeton d'accès. Sous la section Token name, localisez le champ Name et tapez une étiquette pour vous aider à l'associer à un projet.

Ensuite, faites défiler jusqu'à la section Token scopes. Ici, vous verrez divers scopes publics sélectionnés par défaut. Laissez cette section telle quelle.

Ensuite, faites défiler jusqu'à la section Token restrictions et entrez l'URL de votre site dans le champ URL.

Après avoir tapé votre URL, cliquez sur le bouton Add URL pour ajouter l'URL.

Une fois que vous avez rempli les champs nécessaires, cliquez sur le bouton Create token.

Vous verrez alors apparaître une fenêtre modale vous demandant de confirmer le mot de passe de votre compte. Entrez votre mot de passe et cliquez sur Submit.

Vous serez maintenant redirigé vers la page des jetons d'accès où vous verrez le nouveau jeton que vous venez de créer. Cliquez sur l'icône de copie pour copier le jeton.

Une fois que vous avez copié votre jeton d'accès, retournez à vos paramètres WPForms et collez le jeton dans le champ Access Token.

Si vous souhaitez pré-remplir vos formulaires avec la localisation des utilisateurs, activez l'option Current Location.

Lorsque vous avez terminé, n'oubliez pas de sauvegarder vos paramètres.

Ensuite, vous verrez un aperçu de la carte. Si vous avez décidé de partager votre localisation, vous verrez votre localisation actuelle représentée sur la carte.

Dans la section suivante, nous verrons comment ajouter la saisie semi-automatique d'adresses à vos formulaires.

Ajouter la complétion automatique d'adresses à vos formulaires

Une fois que vous avez configuré vos paramètres de géolocalisation, vous pouvez activer la fonctionnalité de saisie semi-automatique du module complémentaire Géolocalisation dans vos formulaires.

Pour ce faire, vous devrez d'abord créer un nouveau formulaire ou modifier un formulaire existant. Ensuite, dans le générateur de formulaires, ajoutez un champ Adresse ou un champ Texte sur une seule ligne.

Si vous souhaitez afficher l'adresse sur plusieurs lignes, sélectionnez le champ Adresse.

Si vous préférez afficher l'adresse sur une seule ligne, choisissez le champ Texte sur une seule ligne.

Ouvrez ensuite le panneau Options du champ pour votre champ Adresse ou Texte sur une seule ligne et cliquez sur l'onglet Avancé pour ouvrir des paramètres supplémentaires. À partir de là, vous pouvez activer la fonctionnalité de saisie semi-automatique d'adresses en sélectionnant l'option Activer la saisie semi-automatique d'adresses.

Si vous le souhaitez, vous pouvez également afficher une carte interactive sur le frontend de votre site en sélectionnant l'option Afficher la carte. Cela révélera une liste déroulante où vous pourrez choisir d'afficher la carte au-dessus ou en dessous du champ de votre formulaire.

Une fois que vous avez tout configuré, n'oubliez pas de sauvegarder votre formulaire.

Voici un exemple de l'apparence de votre formulaire sur le frontend avec les options de carte et de saisie semi-automatique d'adresses activées :

Utilisation du champ Carte

Le champ Carte dans WPForms vous permet d'afficher des emplacements spécifiques sur une carte interactive dans vos formulaires. Contrairement au champ Adresse, qui collecte l'emplacement des utilisateurs soumettant votre formulaire, le champ Carte affiche les emplacements que vous configurez, tels que les adresses de bureaux, les emplacements de magasins ou les points de retrait. Cette fonctionnalité est idéale pour présenter plusieurs emplacements d'entreprise ou aider les utilisateurs à identifier des zones de service spécifiques.

Pour des instructions détaillées étape par étape sur l'ajout d'emplacements, la personnalisation des marqueurs, la configuration des paramètres avancés et la gestion de plusieurs emplacements, consultez notre guide complet sur l'utilisation du champ Carte dans WPForms.

Afficher les données de localisation des entrées

Pour afficher les données de géolocalisation d'une entrée, accédez à WPForms » Entrées et choisissez le formulaire pour lequel vous souhaitez voir les détails de géolocalisation. Cliquez ensuite sur Afficher pour ouvrir la page d'une entrée individuelle.

En plus d'une carte interactive, vous verrez des détails tels que la ville, l'état, le pays et le code postal de l'utilisateur, ainsi que des coordonnées approximatives de latitude et de longitude pour la ville de l'utilisateur.

Inclure les données de géolocalisation dans les e-mails de notification de formulaire

Si vous le souhaitez, vous pouvez également inclure des données de géolocalisation dans les e-mails de notification automatiques pour vos formulaires.

Pour configurer cela, ouvrez le générateur de formulaires et accédez à Paramètres » Notifications. Faites ensuite défiler jusqu'à la section Message de l'e-mail et ajoutez la balise intelligente {entry_geolocation}.

Lorsque l'e-mail de notification est envoyé, il inclura les données de localisation de l'utilisateur.

C'est tout ! Vous savez maintenant comment collecter des données de géolocalisation pour en savoir plus sur vos utilisateurs.

Souhaitez-vous maintenant envoyer différents e-mails de notification en fonction des sélections de l'utilisateur dans le formulaire ? Pour savoir comment faire, consultez notre tutoriel sur les notifications conditionnelles de formulaire.