Comment afficher une carte avec votre formulaire de contact WordPress

Vous souhaitez ajouter une carte à votre formulaire de contact WordPress pour que les visiteurs puissent trouver facilement l'emplacement de votre entreprise ? L'ajout d'une carte à votre formulaire aide les visiteurs à savoir exactement où vous vous trouvez avant de vous contacter.

C'est particulièrement utile si vous avez une vitrine, un bureau ou une zone de service physique que les clients doivent visiter. Mais les cartes sur les formulaires de contact peuvent faire plus que simplement afficher votre emplacement.

Avec la bonne configuration, vous pouvez également aider les visiteurs à remplir plus rapidement les champs d'adresse avec l'autocomplétion, ou même afficher plusieurs emplacements si vous avez plusieurs bureaux ou magasins.

Dans ce tutoriel, je vais vous montrer deux façons d'ajouter des cartes à vos formulaires de contact dans WordPress. Les deux méthodes utilisent WPForms et son module complémentaire Geolocation. Commençons !

Créez votre formulaire WordPress maintenant

Pourquoi ajouter une carte à un formulaire de contact ?

Bien sûr, ce n'est un secret pour personne que la plupart des propriétaires de petites entreprises ayant des sites Web savent pourquoi vous avez besoin d'un formulaire de contact. Mais vous vous demandez peut-être pourquoi vous ajouteriez une carte à ce formulaire de contact.

Si vous dirigez une entreprise locale, l'ajout d'une carte à votre formulaire de contact indique clairement où vous vous trouvez. Cela peut être une excellente idée pour plusieurs raisons :

• Si les clients doivent visiter votre entreprise en personne, une carte élimine toute incertitude. Ils peuvent voir exactement où vous vous trouvez avant de vous contacter, ce qui réduit les questions « où êtes-vous situé ? » dans votre boîte de réception.
• Lorsque vous activez la saisie semi-automatique de l'adresse, les visiteurs peuvent taper quelques lettres et sélectionner leur adresse complète dans une liste déroulante. Cela accélère le remplissage du formulaire et réduit les fautes de frappe qui pourraient causer des problèmes de communication.
• Vous avez plus d'un bureau ou magasin ? Vous pouvez intégrer une carte interactive qui affiche tous vos emplacements et permet aux visiteurs de sélectionner celui qu'ils souhaitent contacter ou visiter. Cela achemine automatiquement les demandes vers la bonne équipe.
• Une carte sur votre page de contact signale que vous êtes une entreprise réelle avec une présence physique. Ceci est particulièrement important pour les services locaux, les magasins de détail ou les bureaux professionnels.

Le meilleur ? Au lieu d'avoir à coder vous-même une carte dans votre site Web ou à payer un développeur Web, vous pouvez le faire facilement avec WPForms Pro. C'est l'un des meilleurs plugins de carte pour WordPress !

Comment ajouter une carte à votre formulaire de contact WordPress

Avec WPForms Pro et le module complémentaire Geolocation, vous pouvez ajouter des fonctionnalités de carte à vos formulaires de contact en un rien de temps. Suivez ces instructions simples, étape par étape, pour commencer :

Étape 1 : Télécharger le plugin WPForms

WPForms est un puissant constructeur de formulaires qui facilite la création de formulaires de contact, de formulaires d'inscription, et plus encore. Il propose plus de 2 100+ modèles de formulaires WordPress que vous pouvez utiliser.

Ce que j'aime le plus chez WPForms, c'est la façon dont il combine la création de formulaires avec des outils de géolocalisation intégrés. Vous n'avez pas besoin de combiner plusieurs plugins ou d'écrire du code personnalisé pour ajouter des cartes à vos formulaires.

Pour ajouter des cartes à vos formulaires de contact, vous aurez besoin de WPForms Pro, qui inclut le module complémentaire Geolocation et toutes les fonctionnalités de carte que nous aborderons dans ce tutoriel.

Pour commencer, achetez une licence WPForms Pro. Ensuite, installez et activez WPForms sur votre site Web. Si vous avez besoin d'aide pour l'installation, suivez ce guide étape par étape sur comment installer un plugin WordPress.

Passez à WPForms Pro maintenant ! 🙂

Étape 2 : Installer et activer le module complémentaire Geolocation

Maintenant que WPForms Pro est installé, vous devez activer le module complémentaire Geolocation. C'est ce qui alimente toutes les fonctionnalités de carte dans vos formulaires de contact.

Dans votre tableau de bord WordPress, allez dans WPForms » Modules d'extension. Utilisez la barre de recherche pour trouver le module d'extension Géolocalisation, puis cliquez sur Installer le module d'extension. Une fois qu'il est installé (généralement en quelques secondes), cliquez sur Activer.

Avec le module d'extension activé, vous avez maintenant accès à trois façons d'utiliser des cartes dans vos formulaires :

• Afficher les emplacements de votre entreprise : Montrez à vos visiteurs exactement où se trouve votre entreprise avec une carte intégrée sur votre formulaire. Cela fonctionne très bien pour les entreprises locales, les bureaux ou les magasins où les clients se rendent en personne.
• Activer la saisie semi-automatique des adresses : Les visiteurs peuvent remplir les champs d'adresse plus rapidement avec des suggestions de saisie semi-automatique. Pendant qu'ils tapent, leur adresse complète apparaît dans une liste déroulante, réduisant les erreurs et accélérant la complétion du formulaire.

Je sais que cela semble technique, mais WPForms propose un guide étape par étape qui le rend beaucoup plus facile que cela n'y paraît. Pour des instructions de configuration complètes, consultez la documentation du module d'extension Géolocalisation.

Une fois que vous avez ajouté votre clé API et enregistré les paramètres, vous êtes prêt. Le module d'extension Géolocalisation est maintenant prêt à être utilisé, et vous pouvez commencer à ajouter des cartes interactives à vos formulaires.

Étape 3 : Créer votre formulaire de contact

Avec le module complémentaire de géolocalisation configuré, vous êtes prêt à créer votre formulaire de contact. Cela prend environ 5 minutes. Accédez à WPForms » Ajouter nouveau dans votre tableau de bord WordPress pour ouvrir le constructeur de formulaires.

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

Je recommande de choisir le modèle de formulaire de contact simple. Cela vous donne un formulaire de contact prêt à l'emploi avec les champs essentiels déjà ajoutés.

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 en supprimer ceux dont vous n'avez pas besoin. Le constructeur de formulaires utilise le glisser-déposer, donc réorganiser les champs est simple.

Maintenant, il y a probablement quelques autres paramètres de formulaire que vous pourriez vouloir configurer, comme les notifications et les confirmations. Si c’est le cas (et je le recommande vivement), consultez notre guide détaillé sur la création de votre premier formulaire.

Essayez le générateur IA de WPForms ! 🙂

Étape 4 : Ajouter une carte à votre formulaire de contact

Vient maintenant la partie importante de l'ajout d'une carte à votre formulaire de contact. WPForms vous offre deux façons de le faire, en fonction de ce que vous souhaitez accomplir :

• Option 1 : Afficher l'emplacement de votre entreprise (champ Carte)
• Option 2 : Ajouter la saisie semi-automatique des adresses pour les visiteurs (champ Texte d'une seule ligne ou Adresse)

Examinons les deux options afin que vous puissiez choisir celle qui correspond à vos besoins.

Option 1 : Afficher votre emplacement avec le champ Carte

Utilisez cette option si vous souhaitez montrer aux visiteurs où se trouve votre entreprise. Cela intègre une carte interactive directement sur votre formulaire de contact.

Dans le constructeur de formulaires, faites défiler le panneau de gauche jusqu'à Champs fantaisistes et vous verrez le champ Carte y figurer. Faites-le glisser dans l'aperçu de votre formulaire sur la droite.

Où vous le placez dépend de vos préférences. Certaines personnes aiment le mettre en haut pour qu'il soit immédiatement visible. D'autres le préfèrent plus bas. Choisissez ce qui vous semble naturel pour la mise en page de votre formulaire.

Après avoir ajouté le champ Carte, sélectionnez-le pour afficher ses options de configuration sur la gauche. Trouvez la section Emplacements, car c'est là que vous entrerez les adresses de votre entreprise.

Cliquez dans la boîte Adresse et commencez à saisir votre emplacement. Vous remarquerez des suggestions de saisie semi-automatique apparaître pendant que vous tapez. Choisissez la bonne correspondance pour verrouiller les coordonnées précises de la carte.

Ajoutez maintenant un Nom pour cet endroit. Utilisez quelque chose de descriptif comme « Succursale Ouest » ou « Siège social ». Les visiteurs verront cette étiquette lorsqu’ils interagiront avec le marqueur, donc la clarté est importante.

Il y a aussi un champ Description si vous souhaitez ajouter des informations supplémentaires telles que les heures d’ouverture, les détails de contact spécifiques ou des notes relatives à l’emplacement.

Option 2 : Ajouter l’autocomplétion d’adresse pour les visiteurs

Utilisez cette option si vous avez besoin que les visiteurs remplissent un champ d’adresse sur votre formulaire de contact (comme pour les demandes de devis, les réservations de services ou les demandes de renseignements sur la livraison). La carte les aide à saisir leur adresse avec précision.

Dans le générateur de formulaires, ajoutez un champ Texte sur une seule ligne ou un champ Adresse à votre formulaire. Vous pouvez cliquer sur le nom du champ ou le faire glisser sur votre formulaire.

Cliquez sur le champ que vous venez d’ajouter pour ouvrir ses paramètres. Changez l’étiquette en « Votre adresse » ou quelque chose de similaire. Cliquez ensuite sur l’onglet Avancé dans les paramètres du champ.

Faites défiler vers le bas et activez Activer l’autocomplétion d’adresse. Cela permet aux visiteurs de commencer à taper leur adresse et de la sélectionner dans une liste déroulante.

Ensuite, activez Afficher la carte. Vous pouvez choisir si la carte apparaît au-dessus ou en dessous du champ de saisie à l’aide du menu déroulant.

Maintenant, lorsque les visiteurs remplissent ce champ, ils verront une carte qui se met à jour au fur et à mesure qu’ils tapent. Ils peuvent également faire glisser la punaise de la carte pour affiner leur emplacement exact.

Cette option fonctionne très bien pour les entreprises de services, les formulaires de livraison ou toute situation où vous avez besoin de l’adresse du visiteur. Une fois que vous avez ajouté votre carte en utilisant l’une ou l’autre option, cliquez sur Enregistrer dans le coin supérieur droit.

Étape 5 : Publier la carte de votre formulaire de contact

Prêt à publier votre formulaire de contact avec une carte ? Avec votre plugin WPForms Pro, il est très facile d’intégrer votre formulaire sur votre site. Avec le formulaire toujours ouvert dans le générateur, cliquez sur le bouton Intégrer dans le coin supérieur droit.

Ici, vous pouvez sélectionner n'importe quelle page WordPress de votre choix, qu'il s'agisse d'une page existante ou d'une nouvelle page. Dans ce tutoriel, je vais cliquer sur Créer une nouvelle page.

Donnez un titre à votre page. Quelque chose comme « Nous contacter » ou « Entrez en contact », ce que vous voulez et qui correspond à vos besoins, puis cliquez sur le bouton C'est parti !.

WPForms insère automatiquement votre formulaire dans la page. Vous verrez votre formulaire de contact avec la carte déjà en place. À partir de là, vous pouvez ajouter un texte d'introduction avant le formulaire, ajuster la mise en page de la page ou styliser un peu votre formulaire.

Pour ajuster l'apparence de votre formulaire de contact, cliquez n'importe où autour du formulaire dans l'éditeur de page. Cela ouvre le panneau de style sur le côté droit où vous pouvez personnaliser l'apparence du formulaire.

Pour un style rapide, choisissez un design prédéfini dans le menu déroulant Thème du formulaire. Des options comme Moderne, Classique ou Minimal donnent à votre formulaire un aspect professionnel instantané qui correspond au design de votre site.

Si vous souhaitez plus de contrôle, le panneau vous permet également de personnaliser les éléments individuels tels que les couleurs, les polices, l'espacement et les styles de boutons.

Une fois que tout semble correct et que la carte affiche votre emplacement correctement, cliquez sur Publier. Votre formulaire de contact avec carte est maintenant en ligne. Voici une idée de son apparence :

FAQ sur la façon d'ajouter un formulaire de contact avec carte dans WordPress

Vous avez des questions sur l'ajout de cartes à vos formulaires de contact WordPress ? Voici les réponses aux questions les plus fréquentes que nous entendons :

Ai-je besoin d'une clé API Google Maps pour utiliser des cartes dans WPForms ?

Oui, vous avez besoin d'une clé API Google Maps ou d'une clé API Mapbox pour utiliser les fonctionnalités de carte dans WPForms. Le module complémentaire Géolocalisation en nécessite une pour se connecter au service de cartographie.

Ne vous inquiétez pas ! WPForms fournit des instructions étape par étape pour obtenir votre clé API dans la documentation du module complémentaire Géolocalisation. La configuration prend généralement environ 10 minutes.

Quelle est la différence entre le champ Carte et la saisie semi-automatique d'adresse avec carte ?

• Le champ Carte affiche vos emplacements professionnels à vos visiteurs. Il leur indique où vous êtes. Utilisez-le lorsque vous souhaitez que les gens voient votre bureau, votre magasin ou votre zone de service sur votre formulaire de contact.
• La saisie semi-automatique d'adresse avec carte aide les visiteurs à remplir leur propre adresse plus rapidement. Pendant qu'ils tapent, elle suggère leur adresse et l'affiche sur une carte. Utilisez-la lorsque vous devez collecter l'emplacement du visiteur.

Puis-je afficher plusieurs emplacements d'entreprise sur une seule carte ?

Oui. Le champ Carte vous permet d'ajouter autant d'emplacements que nécessaire, comme plusieurs bureaux, magasins, succursales ou centres de service.

Chaque emplacement obtient son propre marqueur sur la carte, et vous pouvez personnaliser les icônes et les couleurs des marqueurs. Les visiteurs peuvent cliquer sur chaque marqueur pour voir le nom et les détails de l'emplacement.

Pour des instructions étape par étape, consultez la documentation du champ Carte.

La carte fonctionnera-t-elle sur les appareils mobiles ?

Absolument. Les cartes créées avec WPForms sont entièrement réactives et fonctionnent parfaitement sur les smartphones et les tablettes.

Les visiteurs peuvent zoomer, faire un panoramique et interagir avec la carte comme ils le feraient sur un ordinateur de bureau. La fonction de complétion automatique d'adresses fonctionne également de manière transparente sur mobile.

L'ajout d'une carte ralentit-il mon formulaire de contact ?

Non. WPForms charge les cartes efficacement afin qu'elles ne ralentissent pas votre page. La carte ne se charge que lorsque cela est nécessaire et n'a aucun impact sur les performances de votre formulaire.

WPForms est optimisé pour maintenir la rapidité de votre site, même avec des fonctionnalités interactives comme les cartes.

Puis-je personnaliser l'apparence de la carte sur mon formulaire ?

Oui. Avec le champ Carte, vous pouvez personnaliser les icônes et les couleurs des marqueurs pour qu'ils correspondent à votre marque.

Vous pouvez également contrôler les contrôles de carte qui apparaissent (zoom, plein écran, type de carte, etc.) et ajuster le niveau de zoom initial.

Pour les cartes de complétion automatique d'adresses, vous pouvez choisir si la carte apparaît au-dessus ou en dessous du champ de saisie.

Verrat-on d'où proviennent les soumissions de formulaires sur une carte ?

Oui. Lorsque le module complémentaire Géolocalisation est actif, WPForms capture automatiquement les données de localisation (avec la permission du visiteur) pour chaque soumission de formulaire.

Vous pouvez visualiser ces données sur une carte dans votre tableau de bord WordPress lorsque vous examinez les entrées individuelles du formulaire. Cela vous aide à comprendre d'où viennent géographiquement vos prospects et clients.

Ensuite, découvrez les autres fonctionnalités de WPForms Pro

Obtenez WPForms Pro dès aujourd'hui pour accéder au module complémentaire Géolocalisation qui vous permet d'ajouter ces superbes cartes.

Vous aurez également accès à une tonne d'autres fonctionnalités utiles.

• Un constructeur facile à utiliser – Créez vos propres formulaires en quelques minutes sans écrire une seule ligne de code.
• Enquêtes – Collectez des données via des enquêtes et des sondages et visualisez-les dans de magnifiques rapports. Vous pouvez également ajouter une fonctionnalité Enregistrer et continuer aux longues enquêtes afin que les utilisateurs puissent mettre en pause et terminer leurs formulaires plus tard.
• Pages de formulaire – Incitez davantage de personnes à remplir vos formulaires en créant des pages de formulaire sans distractions en un seul clic.
• Formulaires de commande – Intégrez Stripe (tous les plans), Square (Pro) et PayPal (Pro) directement sur vos formulaires et acceptez des paiements en ligne.
• Rapports de parcours utilisateur – Voyez où se trouvaient les gens sur votre site avant de remplir votre formulaire.
• Formulaires sécurisés – Protégez vos formulaires avec des options anti-spam telles que le captcha personnalisé, hCaptcha ou Google reCAPTCHA v2 ou v3.
• Formulaires conversationnels – Voyez vos taux de conversion monter en flèche avec des formulaires modernes et très engageants.
• Plus de 2 100 modèles – Ne créez plus jamais un formulaire à partir de zéro avec des modèles pré-faits des types de formulaires les plus populaires.
• Support premium – Accédez à une équipe sympathique et compétente qui vous guidera dans la bonne direction si vous avez besoin d'aide avec vos formulaires de site Web.
• ...et bien plus encore.

En fait, si vous regardez WPForms Lite vs Pro, vous verrez qu'il y a une tonne de raisons pour lesquelles Pro est si populaire.

Créez votre formulaire WordPress maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.