Comment intégrer une carte Google dans les formulaires de contact (avec épingle de carte)

Nous avons rempli notre juste part de formulaires en ligne et nous nous retrouvons souvent à retaper la même adresse.

Imaginez ceci à la place : un visiteur arrive sur votre page de contact, voit son adresse pré-remplie, et une épingle déjà placée sur la carte. C'est rapide, personnel et leur fait gagner du temps.

Ajouter une carte Google avec une épingle de localisation à votre formulaire de contact WordPress peut sembler un petit détail, mais cela peut avoir un impact important. D'après notre expérience avec WPForms, cela peut aider à augmenter les taux de complétion des formulaires et à offrir aux utilisateurs une expérience plus fluide et plus satisfaisante.

Dans ce guide étape par étape, nous vous montrerons comment intégrer une carte Google interactive directement dans votre formulaire de contact WordPress – sans code requis. 🗺️

Pourquoi intégrer une carte Google dans votre formulaire de contact ?

Lorsque vous avez configuré votre site WordPress, vous avez probablement ajouté un formulaire de contact pour que les visiteurs puissent vous contacter au sujet de vos produits ou services. Et si vous avez un magasin physique, vous avez probablement ajouté une carte Google pour aider les gens à trouver facilement votre emplacement.

Ce que de nombreux propriétaires d'entreprise ignorent, c'est que vous pouvez utiliser la géolocalisation pour remplir automatiquement le champ d'adresse de votre formulaire de contact et afficher la localisation du visiteur sur une carte. Ensuite, ils peuvent facilement vérifier que leur adresse est correcte ou faire glisser l'épingle pour la modifier si nécessaire.

Cela améliore l'expérience utilisateur globale et peut aider à réduire l'abandon de formulaire.

Connaître l'emplacement de vos utilisateurs vous permet également d'utiliser le ciblage géolocalisé pour afficher du contenu personnalisé et augmenter les taux de conversion.

Maintenant, regardons comment intégrer une carte Google dans vos formulaires de contact. Voici un aperçu de tous les sujets que nous aborderons dans cet article :

• How to Embed a Google Map in a Contact Form
  • Génération d'une clé API Google Places
  • Restriction de votre clé d'API Google Places
  • Ajout de la clé API Google aux paramètres WPForms
  • Création d'un formulaire de contact avec une carte Google intégrée dans WordPress
  • Ajouter le formulaire de contact à votre site web
  • Affichage de la carte Google dans le formulaire de contact
• Comment afficher les données de localisation des utilisateurs sur un formulaire
• Tutoriel vidéo : Intégrer une carte Google dans les formulaires de contact
• Ressources bonus 🔗 : Meilleurs guides sur l'utilisation des cartes sur WordPress

Commençons !

Comment intégrer une carte Google dans un formulaire de contact

Pour ce tutoriel, nous utiliserons WPForms, le meilleur plugin de formulaire de contact pour WordPress. Il vous permet de créer facilement tout type de formulaire avec un simple constructeur de formulaire par glisser-déposer.

Il existe une version gratuite de WPForms disponible avec toutes les fonctionnalités dont vous avez besoin pour créer un formulaire de contact de base. Pour ce tutoriel, cependant, nous utiliserons WPForms Pro car il inclut le module complémentaire Google Map.

ℹ️ Le saviez-vous ? Chez WPBeginner, nous utilisons WPForms pour de nombreuses choses. Par exemple, il alimente notre formulaire de contact et nos enquêtes annuelles de satisfaction des lecteurs. Nous en avons eu une excellente expérience, et vous pouvez en savoir plus dans notre revue approfondie de WPForms.

La première chose à faire est de créer un compte WPForms. Sur le site Web WPForms, cliquez sur ‘Get WPForms Now’ puis terminez le processus d'inscription.

Une fois cela fait, vous arriverez sur le tableau de bord de votre compte WPForms, où vous pourrez accéder à votre fichier ZIP WPForms Pro et à votre clé de licence.

Ensuite, vous pouvez installer et activer le plugin WPForms.

Depuis votre zone d'administration WordPress, vous pouvez aller dans Plugins » Ajouter un nouveau plugin.

Ensuite, utilisez la barre de recherche pour trouver rapidement le plugin WPForms.

Dans les résultats de recherche, cliquez simplement sur le bouton ‘Installer maintenant’ puis sur ‘Activer’ pour commencer à l'utiliser sur votre site WordPress.

Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez visiter la page WPForms » Paramètres pour saisir votre clé de licence. Vous trouverez ces informations dans votre espace client WPForms. Assurez-vous de cliquer sur le bouton « Vérifier la clé » pour activer votre licence.

Ensuite, vous devez accéder à WPForms » Extensions et trouver l'extension Géolocalisation.

Vous pouvez utiliser l'option de recherche en haut de l'écran ou simplement faire défiler les extensions disponibles.

Une fois que vous l'avez trouvé, cliquez sur le bouton ‘Installer le module complémentaire’.

Maintenant que l'extension Géolocalisation est activée, vous devrez configurer ses paramètres. Pour ce faire, accédez à WPForms » Paramètres et cliquez sur l'onglet « Géolocalisation ».

Sur cette page, vous devez sélectionner un fournisseur de géolocalisation.

Pour ce tutoriel, nous choisirons l'‘API Google Places’.

Vous devriez également cocher la case ‘Emplacement actuel’. Cela demande au navigateur de l'utilisateur sa localisation pour pré-remplir automatiquement le champ d'adresse. Cela permet de gagner du temps et d'améliorer la précision.

Ensuite, vous devez faire défiler jusqu'aux paramètres de l'API Google Places.

Ici, WPForms vous demandera d'entrer votre clé API Google. Vous pouvez obtenir votre clé auprès de Google, puis la coller dans le champ de saisie. Nous vous montrerons comment faire cela dans la section suivante.

Génération d'une clé API Google Places

Vous pouvez obtenir une clé API pour Google Places en vous rendant sur le site web de la Google Cloud Console.

Tout d'abord, sélectionnez simplement votre pays dans un menu déroulant et acceptez les conditions d'utilisation. Dans certains pays, il peut également vous être proposé de vous inscrire à une liste de diffusion.

Lorsque vous êtes prêt à passer à l'étape suivante, cliquez sur « Accepter et continuer ».

Ensuite, vous devrez sélectionner un projet pour la clé API. Cliquez simplement sur « Sélectionner un projet » et cliquez sur le projet 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 que vous n'avez pas encore ajouté à Google, vous devriez cliquer sur « Nouveau projet » pour en configurer un.

Vous devriez maintenant vous trouver sur la page « APIs et services », où vous pouvez activer les APIs nécessaires pour afficher Google Maps sur votre site WordPress.

Vous devrez cliquer sur le bouton « + Activer les APIs et services » en haut de la page.

Cela vous mènera à la bibliothèque d'API de Google, où vous devrez activer trois API de cartographie :

• API Google Places – permet à votre formulaire de récupérer des adresses suggérées au fur et à mesure que les utilisateurs tapent.
• API JavaScript Maps – affiche la carte interactive sur votre site.
• API de géocodage – transforme une adresse en coordonnées exactes pour que la carte puisse placer l'épingle correctement.

Vous pouvez les trouver en utilisant la barre de recherche en haut ou en cliquant sur le bouton « Afficher tout » dans la section Cartes.

À partir d'ici, trouvons et activons l'API Places. Une fois que vous l'avez localisée, vous devrez cliquer dessus.

Sur la page suivante, cliquez sur le bouton « Activer ».

Après cela, vous devriez faire la même chose pour l'API JavaScript Maps et l'API Geocoding.

Et une fois que vous avez activé les trois API, vous pouvez créer une clé d'API.

Dans le menu de gauche, vous devez naviguer vers API et services » Identifiants.

À partir de là, vous pourrez cliquer sur le bouton « + Créer des identifiants » en haut de l'écran, puis sélectionner l'option « Clé d'API ».

Votre clé d'API sera créée et affichée dans une fenêtre contextuelle.

Plus tard dans ce tutoriel, vous devrez copier cette clé dans les paramètres de WPForms. Pour l'instant, examinons comment placer des restrictions sur l'utilisation de la clé d'API.

Restriction de votre clé d'API Google Places

Une utilisation excessive de la clé d'API peut vous faire sortir du niveau gratuit et coûter plus cher que prévu. Nous vous recommandons de restreindre la clé pour éviter une utilisation non autorisée ou inattendue.

Pour ce faire, vous devez cliquer sur le lien « Restreindre la clé » en bas de la fenêtre contextuelle « Clé d'API créée » dans la capture d'écran ci-dessus.

Sur la page suivante, vous pouvez configurer plusieurs restrictions différentes. La première d'entre elles est « Restrictions d'application ».

Dans cette section, vous devriez cliquer sur l'option « Référents HTTP (sites Web) ». Ensuite, la clé ne sera utilisée que sur les sites Web.

Ensuite, vous devez vous assurer qu'elle n'est utilisée que sur votre propre site Web. Pour ce faire, vous devez faire défiler jusqu'à la section « Restrictions de site Web », puis cliquer sur le bouton « Ajouter un élément ».

Maintenant, vous devriez taper le nom de domaine de votre site web dans le champ « Nouvel élément » en utilisant le modèle *example.com/*.

Si vous utiliserez Google Maps sur plus d'un site web, vous pouvez cliquer sur le bouton « Ajouter un élément » et ajouter autant de domaines que nécessaire.

Maintenant que vous avez restreint la clé API à vos propres sites Web, vous pouvez également la restreindre pour qu'elle fonctionne uniquement avec les API Google que vous avez ajoutées ci-dessus.

Vous devez faire défiler vers le bas jusqu'à la section « Restrictions d'API » de la page et sélectionner l'option « Restreindre la clé ». Cela révélera une liste déroulante où vous devrez cocher les cases « API de géocodage », « API JavaScript Maps » et « API Places ».

Une fois que vous avez fait cela, vous devriez cliquer sur le lien « OK » pour enregistrer vos paramètres.

Enfin, assurez-vous de cliquer sur le bouton « Enregistrer » en bas de la page pour activer toutes les restrictions que vous avez choisies.

Notez qu'il peut falloir jusqu'à 5 minutes pour que les paramètres prennent effet.

Ajout de la clé API Google aux paramètres WPForms

Vous verrez maintenant la clé d'API répertoriée aux côtés de toutes les autres que vous avez disponibles. Vous devriez cliquer sur l'icône « Copier » afin de pouvoir ajouter la clé à la page des paramètres de géolocalisation de WPForms.

Notez que si vous avez besoin de modifier les paramètres ou les restrictions de l'une des API, vous pouvez cliquer sur l'icône Modifier à droite.

Vous devez maintenant retourner sur votre site Web, qui devrait toujours être sur la page WPForms » Paramètres » Géolocalisation.

Une fois sur place, collez la clé dans le champ « API Google Places » dans les paramètres de WPForms. Et assurez-vous de cliquer sur le bouton « Enregistrer les paramètres ».

Création d'un formulaire de contact avec une carte Google intégrée dans WordPress

Maintenant que vous avez configuré WPForms et Google Places, vous êtes prêt à créer un formulaire de contact dans WordPress.

Il existe plusieurs façons de créer vos formulaires WordPress avec WPForms.

Premièrement, vous pouvez commencer avec une toile vierge. Cela vous donne un contrôle total pour ajouter et organiser les champs de formulaire à partir de zéro, ce qui le rend parfait pour les conceptions entièrement personnalisées.

Deuxièmement, vous pouvez utiliser le générateur de formulaires IA pour générer un formulaire complet basé sur une simple invite textuelle. C'est un excellent moyen de gagner du temps si vous ne savez pas par où commencer.

Enfin, vous pouvez choisir parmi plus de 2 000 modèles de formulaires préconçus. Que vous ayez besoin d'un formulaire de contact, d'une enquête, d'un formulaire de réservation ou de quelque chose de plus complexe, il existe probablement un modèle qui répond à vos besoins !

Vous pouvez commencer en suivant notre guide sur comment créer un formulaire de contact dans WordPress.

Une fois que vous avez créé un formulaire de base, vous devez ajouter un champ d'adresse. Vous pouvez utiliser un bloc d'adresse ou un champ de texte sur une seule ligne.

Pour ce tutoriel, nous utiliserons un champ « Texte sur une seule ligne ». Alors, faisons simplement glisser le bloc « Texte sur une seule ligne » sur le formulaire.

Ensuite, nous personnaliserons les paramètres du champ.

Pour ce faire, vous devez cliquer sur le champ pour afficher les paramètres du texte sur une seule ligne.

Premièrement, vous devriez changer l'étiquette du champ en « Adresse ». Cela indiquera clairement à vos utilisateurs ce qu'ils doivent taper dans le champ.

Après cela, vous devez modifier les paramètres du champ afin qu'il affiche une carte sur le formulaire WordPress. Pour ce faire, vous devrez cliquer sur l'onglet Avancé.

Une fois sur place, recherchez l'option « Activer la saisie semi-automatique des adresses » en bas des paramètres et activez-la.

Vous verrez alors une autre option, « Afficher la carte », que vous devriez également activer. Vous pouvez choisir d'afficher la carte au-dessus ou en dessous du champ.

Ajouter le formulaire de contact à votre site web

La façon la plus simple d'ajouter le formulaire de contact à votre 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 formulaire.

Il vous sera demandé si vous souhaitez ajouter le formulaire à une page existante ou en créer une nouvelle.

Pour ce tutoriel, nous cliquerons sur le bouton « Créer une nouvelle page ».

Ensuite, vous devriez donner un nom à la page, puis cliquer sur le bouton « C'est parti ! ».

Une nouvelle page portant ce nom sera créée et votre formulaire de contact y sera ajouté automatiquement.

Tout ce que vous avez à faire est de cliquer sur le bouton « Publier » pour mettre la page en ligne.

Affichage de la carte Google dans le formulaire de contact

Lorsqu'un utilisateur visite votre formulaire de contact, il lui sera demandé s'il souhaite autoriser votre site Web à accéder à sa localisation.

S'il clique sur le bouton « Autoriser », sa localisation actuelle sera saisie dans le champ d'adresse et une épingle de cette localisation sera ajoutée à la carte.

Cette fonctionnalité de saisie semi-automatique fera gagner du temps à vos visiteurs en rendant la saisie de leurs adresses plus rapide et plus facile.

S'ils ont besoin de modifier l'adresse, ils peuvent simplement en saisir une nouvelle ou faire glisser l'épingle vers un autre emplacement sur la carte.

Comment afficher les données de localisation des utilisateurs sur un formulaire

Une fois que vous activez la géolocalisation, WPForms enregistrera également la localisation de chaque utilisateur lorsqu'il soumettra votre formulaire. Connaître la localisation de vos utilisateurs peut vous aider à trouver de meilleurs prospects.

Vous devrez naviguer vers WPForms » Entrées, puis cliquer sur votre formulaire de contact.

Vous verrez maintenant une liste des entrées remplies par vos utilisateurs pour ce formulaire.

Pour afficher une soumission de formulaire particulière, cliquez simplement sur le lien « Afficher » à droite.

Vous verrez maintenant les données du formulaire soumises par l'utilisateur, telles que son nom, son e-mail professionnel et son numéro de téléphone professionnel, ainsi que des données de localisation.

Cela comprend une épingle sur Google Maps, la localisation de l'utilisateur, le code postal et le pays. Notez que la précision dépend de l'appareil de l'utilisateur ; les données GPS des téléphones mobiles sont généralement très précises, tandis que la localisation basée sur IP des ordinateurs de bureau peut être approximative.

Bien sûr, si l'utilisateur n'a pas accordé la permission au formulaire de connaître sa localisation, aucune donnée de localisation ne sera affichée.

C'est tout. Vous avez ajouté avec succès une carte Google à votre formulaire de contact dans WordPress. Vous pouvez également utiliser WPForms pour créer des enquêtes dans WordPress, créer un formulaire de paiement pour accepter les paiements en ligne, et plus encore.

Tutoriel vidéo : Intégrer une carte Google dans les formulaires de contact

Vous voulez voir comment ça marche ? Cliquez simplement sur le bouton Play ▶️ du tutoriel vidéo ci-dessous pour apprendre comment intégrer une carte Google dans votre formulaire de contact.

S'abonner à WPBeginner

Ressources bonus 🔗 : Meilleurs guides sur l'utilisation des cartes sur WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment intégrer une carte Google dans les formulaires de contact. Ensuite, vous voudrez peut-être aussi consulter certains de nos autres guides sur l'utilisation des cartes sur votre site web :

• Comment ajouter Google Maps dans WordPress (La BONNE méthode)
• Comment ajouter un localisateur de magasin Google Maps dans WordPress
• Comment intégrer Bing Maps dans WordPress (étape par étape)
• Comment ajouter une carte interactive dans WordPress
• Meilleurs plugins Google Maps pour WordPress (la plupart sont gratuits)
• Meilleurs plugins Mapbox pour WordPress
• Meilleurs plugins de géolocalisation et GeoIP pour WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.