Comment intégrer une carte Google dans les formulaires de contact

Publié: 2022-06-28

Si vous gérez un site Web performant, il y a de fortes chances que vous recherchiez des moyens d'améliorer votre expérience utilisateur et d'attirer plus de visiteurs. Chez WP Full Care, nous comprenons parfaitement à quel point ces éléments sont essentiels pour votre entreprise et c'est pourquoi nous vous montrerons comment intégrer une carte Google Maps dans vos formulaires de contact. Cela peut sembler peu, mais des détails comme celui-ci peuvent faire des merveilles pour attirer plus de visiteurs sur votre site Web. Maintenant, mettons-nous au travail !

Raisons pour lesquelles vous devriez intégrer une carte Google Maps dans vos formulaires de contact

Il y a de fortes chances que, lorsque vous configurez votre site Web sur WordPress, vous ayez inclus un formulaire de contact que les visiteurs du site peuvent utiliser pour entrer en contact. Vous vouliez permettre à vos clients potentiels de poser plus facilement des questions sur les biens et services que vous proposez . De plus, si votre entreprise a une présence physique, vous avez très probablement inclus une carte Google Map de cette zone sur votre site Web afin d'inciter les clients à faire leurs achats dans votre établissement.

Personne tenant un téléphone intelligent dans une main et tapant sur un ordinateur portable à l'aide de l'autre
Si vous intégrez une carte Google dans vos formulaires de contact, vous améliorerez l'expérience utilisateur.

Cependant, vous pouvez et devez également intégrer une carte Google Maps dans vos formulaires de contact. Voici les deux principales raisons pour lesquelles :

  • Vous pouvez utiliser la géolocalisation pour remplir automatiquement le champ d'adresse de votre formulaire de contact, et vous pouvez même afficher la position de l'utilisateur sur une carte à l'aide de cette fonctionnalité. Cependant, de nombreux propriétaires de sites Web d'entreprises ne connaissent pas cette fonctionnalité. Cela améliore l'expérience globale de l'utilisateur et aide à réduire le nombre de personnes qui quittent leurs soumissions de formulaire .
  • Si vous savez où se trouvent vos utilisateurs, vous pouvez utiliser le ciblage par géolocalisation pour leur fournir un contenu plus personnalisé . Cela peut vraiment vous aider à augmenter les taux de conversion.

Ajouter une carte Google Maps à vos formulaires de contact est assez simple et plus loin dans cet article, nous vous expliquerons comment procéder. Bien sûr, vous pouvez toujours choisir le moyen le plus simple et le faire dans le cadre de votre support personnalisé pour votre site Web.

Un moyen simple d'intégrer une carte Google Maps dans vos formulaires de contact

Le moyen le plus simple d'intégrer une carte Google Maps dans vos formulaires de contact consiste à utiliser le plug-in de formulaires WP, largement considéré comme le premier plug-in de formulaire de contact pour WordPress. À l'aide d'une interface intuitive par glisser-déposer, le générateur de formulaires permet de concevoir rapidement et facilement tout type de formulaire .

Il existe une version gratuite de WPForms qui peut être téléchargée, et elle est équipée de toutes les fonctionnalités nécessaires pour créer un formulaire de contact simple. Cependant, étant donné que WPForms Pro est déjà fourni avec l'extension Google Maps, nous l'utiliserons à la place pour cette leçon.

L'installation et l'activation du plugin WPForms est la première chose sur votre liste de choses à accomplir. Ensuite, localisez le module complémentaire de géolocalisation en accédant à l'option de menu WPForms »Addons . Vous avez le choix d'utiliser la barre de recherche qui apparaît en haut de l'écran. Après l'avoir localisé, vous devez cliquer sur l'option " Installer le module complémentaire " afin de commencer le processus d'installation du module complémentaire.

Ajouter une page de plugins dans WordPress
Le moyen le plus simple d'intégrer une carte Google Maps dans vos formulaires de contact consiste à utiliser le plug-in WP Forms.

Ensuite, vous serez chargé de configurer les paramètres de l'addon. Pour ce faire, accédez à WPForms »Paramètres , puis sélectionnez l' onglet Géolocalisation dans le menu déroulant. Vous serez invité à choisir un fournisseur de géolocalisation sur la page suivante. Compte tenu de l'objectif de cet article, nous avons décidé d'utiliser l' API Google Places .

L'étape suivante consiste à localiser les paramètres de l'API Google Places en faisant défiler la page. Là, vous devrez fournir votre clé API Google . Vous pouvez recevoir votre clé de Google, puis la copier et la coller dans le champ. Découvrons maintenant comment améliorer vos formulaires de contact avec Google Maps.

Comment créer des formulaires de contact avec Google Map intégré dans WordPress ?

Une fois que vous avez configuré WPForms et Google Places, il est temps de créer un formulaire de contact et d'y intégrer une carte Google. Après avoir créé un formulaire de base, vous devrez inclure un champ pour l'adresse. Vous avez la possibilité d'utiliser soit un champ de texte sur une seule ligne, soit un bloc d'adresse . Nous utiliserons un champ Texte sur une seule ligne pour les besoins de ce didacticiel .

Dans l'étape suivante, nous allons configurer les paramètres du champ. Pour ce faire, vous devrez cliquer sur le champ pour voir les paramètres du format Texte sur une seule ligne. Pour commencer, vous devez modifier l'étiquette du champ afin qu'il se lise " Adresse ". Vos utilisateurs n'auront aucun mal à comprendre ce qui devrait aller sur le terrain si vous faites cela.

Après cela, vous devrez ajuster les paramètres du champ pour qu'il affiche une carte et pour ce faire, vous devrez sélectionner l'onglet Avancé. Lorsque vous y arrivez, allez tout en bas des paramètres et recherchez une option appelée "Activer la saisie semi-automatique de l'adresse" . Basculez cette option pour qu'elle soit définie sur "Activé". Après cela, vous verrez une nouvelle option qui dit "Afficher la carte" qui est une autre fonctionnalité que vous devez activer. Vous avez la possibilité d' afficher la carte au-dessus ou au-dessous du champ .

Comment ajouter un formulaire de contact à votre site Web ?

Cliquer sur le bouton intitulé "Intégrer" est le moyen le plus rapide et le plus simple d'intégrer le formulaire de contact dans votre site Web. Vous pouvez le localiser en haut de l'écran de l'éditeur de formulaire, juste à côté du bouton intitulé "Enregistrer" . Vous aurez la possibilité d'ajouter le formulaire à une page déjà existante ou d'en créer une nouvelle .

Personne avec un casque jaune programmant devant une grande fenêtre
La meilleure partie d'avoir un site Web WordPress est qu'il est complètement adapté aux débutants.

Sélectionnez simplement "Créer une nouvelle page", donnez un nom à la page et cliquez sur le bouton qui dit "Allons-y!" - c'est aussi simple que ça! De cette façon, vous créerez une nouvelle page avec un nom de votre choix à laquelle votre formulaire de contact sera instantanément attaché. N'oubliez pas de cliquer sur « Publier » et vous avez officiellement terminé !

La ligne du bas

Comme vous pouvez le constater, il est très simple d'intégrer une carte Google Maps dans les formulaires de contact. Le plugin WP Forms est très simple et simplifie toutes les tâches liées aux formulaires, même pour les débutants. Bien sûr, vous n'avez rien à faire par vous-même si vous contactez des experts WordPress. Ils s'assureront que votre site Web fonctionne correctement et que le nombre de vos visiteurs ne fait qu'augmenter !