Comment intégrer Google Maps dans un formulaire de contact (en utilisant pin Maps)

Voulez – vous voir la carte dans le formulaire de contact du site? Vous pouvez pré – remplir l’adresse de l’utilisateur avec l’emplacement géographique et indiquer son emplacement en plaçant un substituant sur la carte. Cela facilite et accélère le remplissage des formulaires, ce qui augmente le taux d’achèvement. Dans cet article, nous vous montrerons comment intégrer Google Maps dans un formulaire de contact avec des substituants. Pourquoi intégrer Google Maps dans le formulaire de contact? Lorsque vous créez un site WordPress, il est probable que vous avez ajouté un formulaire de contact afin que les visiteurs puissent facilement vous contacter sur vos produits et services.
Si votre entreprise a un emplacement physique, vous pouvez également ajouter une carte Google de l’emplacement pour encourager les gens à visiter votre magasin. Ce que beaucoup d’entrepreneurs ne savent pas, c’est que vous pouvez utiliser l’emplacement géographique pour remplir automatiquement le champ d’adresse dans le formulaire de contact et afficher l’emplacement de l’utilisateur sur la carte. Cela améliore l’expérience utilisateur globale et aide à réduire les abandons de modules. La connaissance de l’emplacement des utilisateurs vous permet également d’utiliser la géolocalisation pour afficher du contenu personnalisé et améliorer les taux de conversion.
C’est – à – dire, voyons comment intégrer Google Maps dans le formulaire de contact. Comment intégrer Google Maps dans les formulaires de contact dans ce tutoriel, nous utiliserons wpforms, le meilleur plugin de formulaires de contact pour WordPress. Il vous permet de créer facilement n’importe quel type de module en utilisant un simple générateur de modules glisser – déposer. La version gratuite de wpforms fournit toutes les fonctionnalités nécessaires pour créer un formulaire de contact de base. Cependant, dans ce tutoriel, nous utiliserons wpforms pro parce qu’il contient des add – ons Google Maps.
La première chose que vous devez faire est d’installer
Cliquez sur accepter et continuer. Ensuite, vous devez sélectionner un élément pour la clé API. Cliquez simplement sur Sélectionner l’élément, puis cliquez sur l’élément que vous souhaitez utiliser dans la liste. Si vous n’avez jamais créé de projet auparavant, ou s’il s’agit d’un nouveau site Web qui n’a pas été ajouté à Google, vous devriez cliquer sur nouveau projet pour en définir un. Remarque: pour utiliser l’API Google places, Google vous demandera d’activer la facturation pour ce projet. Ils offrent gratuitement les 300 premiers dollars, ce qui est suffisant pour payer les cartes intégrées simples que nous avons créées dans ce tutoriel. Les sites moins fréquentés n’auront pas à payer de frais et vous demanderez la permission d’effectuer la mise à niveau avant de facturer des frais.
Vous devriez maintenant être sur la page API et services, où vous pouvez activer l’API nécessaire pour afficher Google Maps sur votre site. Vous devez cliquer sur le bouton \
Après cela, vous devriez faire de même pour l’api javascript de carte et l’API géocodage. Maintenant que vous avez activé les trois API, vous pouvez créer une clé API. Dans le menu de gauche, vous avez besoin de justificatifs d’identité pour accéder aux API et aux services. À partir de là, vous pouvez cliquer sur le bouton \
Voyons comment imposer quelques restrictions à l’utilisation des clés API.
Limiter l’utilisation excessive des clés de l’API Google places peut vous sortir du programme gratuit et vous coûter plus cher que prévu. Nous recommandons de limiter les clés afin d’éviter une utilisation non autorisée ou accidentelle. Pour ce faire, vous devez cliquer sur le lien restreindre les clés au bas de la fenêtre contextuelle de création de clés API dans la capture d’écran ci – dessus. Sur la page suivante, vous pouvez définir un certain nombre de restrictions différentes. Le premier est \
Après cela, vous devriez vous assurer qu’il n’est utilisé que sur votre site Web. Pour ce faire, vous devez faire défiler la section restrictions du site et cliquer sur le bouton Ajouter un élément. Vous devriez maintenant saisir le nom de domaine de votre site Web dans le champ nouveau projet en utilisant le modèle d’échantillon *. Com \/ *. Si vous utilisez Google Maps sur plusieurs sites, vous pouvez ajouter autant de domaines que nécessaire en cliquant sur le bouton Ajouter des éléments. Maintenant que vous avez limité la clé API à votre site Web, vous pouvez également la limiter à l’utilisation avec l’API Google ajoutée ci – dessus. Vous devez faire défiler vers le bas dans la section restrictions de l’API de la page et sélectionner l’option restrictions. Un menu déroulant apparaît où vous devez sélectionner les cases \
Zzo, et déplacez – le à la position on. Ensuite, vous verrez une autre option, voir la carte, que vous devriez également activer. Vous pouvez choisir d’afficher la carte au – dessus ou au – dessous du champ. Ajouter un formulaire de contact à un site la façon la plus simple d’ajouter un formulaire de contact à un site Web est de cliquer sur le bouton intégrer. Vous le trouverez à côté du bouton Enregistrer en haut de l’écran de l’éditeur de formulaires. On vous demandera si vous voulez ajouter un formulaire à un formulaire existant ou créer une nouvelle page. Pour ce tutoriel, nous cliquerons sur le bouton créer une nouvelle page. Ensuite, vous devriez nommer la page et cliquer sur démarrer! Boutons Une nouvelle page avec ce nom est créée et votre formulaire de contact est automatiquement ajouté. Il suffit de cliquer sur le bouton publier pour soumettre le formulaire en temps réel. Lorsque les utilisateurs accèdent à votre formulaire de contact, on leur demande s’ils permettent à votre site Web d’accéder à votre emplacement. S’ils cliquent sur le bouton autoriser, leur emplacement actuel est entré dans le champ Adresse et un substituant pour cet emplacement est ajouté à la carte. Cette fonction de remplissage automatique permet aux visiteurs de saisir les adresses plus facilement et plus rapidement, ce qui leur permet d’économiser du temps. S’ils doivent changer d’adresse, tapez simplement la nouvelle adresse ou faites glisser le substituant à un autre endroit sur la carte. Comment afficher les données de localisation de l’utilisateur sur un formulaire lorsque la géolocalisation est activée, wpforms enregistre également l’emplacement de chaque utilisateur lorsque le formulaire est rempli. Connaître l’emplacement des utilisateurs peut vous aider à trouver de meilleures perspectives. Vous devez accéder au projet wpforms et cliquer sur le formulaire de contact. Vous verrez maintenant une liste des entrées C