Comment afficher une carte avec votre formulaire de contact WordPress

Vous souhaitez ajouter une carte à votre formulaire de contact WordPress afin que les visiteurs puissent facilement trouver 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.

Cela est particulièrement utile si vous disposez d'un magasin physique, d'un bureau ou d'une zone de service 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 grâce à la saisie automatique, ou même afficher plusieurs emplacements si vous disposez de 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. C'est parti !

Créez votre formulaire WordPress maintenant

Pourquoi ajouter une carte dans un formulaire de contact ?

Bien sûr, ce n'est un secret pour personne que la plupart des propriétaires de petites entreprises disposant d'un site web savent pourquoi il est nécessaire d'avoir un formulaire de contact. Mais vous vous demandez peut-être pourquoi ajouter une carte à ce formulaire de contact.

Si vous gérez une entreprise locale, ajouter une carte à votre formulaire de contact permet d'indiquer clairement où vous vous trouvez. Cela peut être une excellente idée pour plusieurs raisons :

• Si les clients doivent se rendre dans votre entreprise en personne, une carte leur évite toute incertitude. Ils peuvent voir exactement où vous vous trouvez avant de vous contacter, ce qui réduit le nombre de questions du type « Où êtes-vous situés ? » dans votre boîte de réception.
• Lorsque vous activez la saisie automatique des adresses, les visiteurs peuvent taper quelques lettres et sélectionner leur adresse complète dans une liste déroulante. Cela accélère le remplissage des formulaires et réduit les fautes de frappe qui pourraient causer des problèmes de communication.
• Vous avez plusieurs bureaux ou magasins ? 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 permet d'acheminer automatiquement les demandes vers la bonne équipe.
• Une carte sur votre page de contact indique que vous êtes une véritable entreprise avec une présence physique. Cela est particulièrement important pour les services locaux, les magasins de détail ou les cabinets professionnels.

Le plus intéressant ? Au lieu d'avoir à coder vous-même une carte dans votre site web ou de 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 l'extension Geolocation, vous pouvez ajouter des fonctionnalités cartographiques à vos formulaires de contact en un clin d'œil. Suivez ces instructions simples, étape par étape, pour commencer :

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

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

Ce que j'apprécie 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 d'assembler 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 comprend l'extension Geolocation et toutes les fonctionnalités cartographiques 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 la façon d'installer un plugin WordPress.

Passez à WPForms Pro dès maintenant ! 🙂 .

Étape 2 : Installer et activer l'extension de géolocalisation

Maintenant que WPForms Pro est installé, vous devez activer l'extension Geolocation. C'est elle qui alimente toutes les fonctionnalités cartographiques de vos formulaires de contact.

Dans votre tableau de bord WordPress, allez dans WPForms » Addons. Utilisez la barre de recherche pour trouver l'addon Geolocation, puis cliquez sur Install Addon. Une fois l'installation terminée (généralement quelques secondes), cliquez sur Activate.

Une fois l'extension activée, vous disposez désormais de trois façons d'utiliser les cartes dans vos formulaires :

• Affichez les emplacements de votre entreprise: indiquez précisément aux visiteurs où se trouve votre entreprise grâce à une carte intégrée à votre formulaire. Cette fonctionnalité est particulièrement utile pour les entreprises locales, les bureaux ou les magasins que les clients visitent en personne.
• Activer la saisie automatique des adresses: les visiteurs peuvent remplir plus rapidement les champs d'adresse grâce aux suggestions de saisie automatique. Au fur et à mesure qu'ils tapent, leur adresse complète apparaît dans une liste déroulante, ce qui réduit les erreurs et accélère le remplissage du formulaire.

Je sais que cela semble technique, mais WPForms propose un guide étape par étape qui rend la procédure beaucoup plus simple qu'il n'y paraît. Pour obtenir des instructions de configuration complètes, consultez la documentation relative à l'extension Geolocation Addon.

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

Étape 3 : Créez votre formulaire de contact

Une fois l'extension Geolocation configurée, vous êtes prêt à créer votre formulaire de contact. Cela prend environ 5 minutes. Allez dans WPForms » Ajouter nouveau dans votre tableau de bord WordPress pour ouvrir le générateur de formulaires.

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

Je vous recommande de choisir le modèle de formulaire de contact simple. Vous disposerez ainsi d'un formulaire de contact prêt à l'emploi contenant déjà les champs essentiels.

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 supprimer ceux dont vous n'avez pas besoin. Le générateur de formulaires utilise le glisser-déposer, ce qui facilite le réagencement des champs.

Il y a probablement quelques autres paramètres du formulaire que vous souhaiterez peut-être configurer, comme les notifications et les confirmations. Si c'est le cas (et je vous le recommande vivement), consultez notre guide détaillé sur la création de votre premier formulaire.

Essayez WPForms AI Builder ! 🙂

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

Voici maintenant la partie importante qui consiste à ajouter une carte à votre formulaire de contact. WPForms vous propose deux façons de procéder, en fonction de ce que vous souhaitez accomplir :

• Option 1 : Afficher l'emplacement de votre entreprise (champ Carte)
• Option 2 : Ajouter la saisie automatique d'adresse pour les visiteurs (champ de texte à ligne unique ou champ d'adresse)

Passons en revue les deux options afin que vous puissiez choisir celle qui correspond le mieux à vos besoins.

Option 1 : afficher votre emplacement à l'aide du champ Carte

Utilisez cette option si vous souhaitez indiquer aux visiteurs où se trouve votre entreprise. Cela permet d'intégrer une carte interactive directement dans votre formulaire de contact.

Dans le générateur de formulaires, faites défiler le panneau de gauche jusqu'à Fancy Fields et vous verrez le champ Map ( Carte) apparaître dans la liste. Faites-le glisser dans l'aperçu de votre formulaire à droite.

Son emplacement dépend de vos préférences. Certaines personnes aiment le placer en haut afin qu'il soit immédiatement visible. D'autres préfèrent le placer plus bas. Choisissez ce qui vous semble le plus 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 à gauche. Recherchez la section Emplacements, car c'est là que vous entrerez les adresses de votre entreprise.

Cliquez dans le champ Adresse et commencez à saisir votre emplacement. Vous verrez apparaître des suggestions de saisie automatique au fur et à mesure que vous tapez. Choisissez la bonne correspondance pour verrouiller les coordonnées cartographiques précises.

Ajoutez maintenant un nom à cet endroit. Utilisez un nom descriptif tel que « West Branch » ou « Siège social ». Les visiteurs verront cette étiquette lorsqu'ils interagiront avec le marqueur, il est donc important qu'elle soit claire.

Il existe également un champ Description si vous souhaitez ajouter des informations supplémentaires telles que les heures d'ouverture, des coordonnées spécifiques ou des remarques relatives à l'emplacement.

Option 2 : Ajouter la saisie automatique d'adresse pour les visiteurs

Utilisez cette option si vous souhaitez que les visiteurs remplissent un champ d'adresse dans votre formulaire de contact (par exemple pour des demandes de devis, des réservations de services ou des demandes d'expédition). La carte les aide à saisir leur adresse avec précision.

Dans le générateur de formulaires, ajoutez un champ Texte à ligne unique 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. Modifiez le libellé 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 l'option « Activer la saisie automatique de l'adresse ». Cela permet aux visiteurs de commencer à saisir leur adresse et de la sélectionner dans une liste déroulante.

Ensuite, activez l'option Afficher la carte. Vous pouvez choisir d'afficher la carte au-dessus ou en dessous du champ de saisie à l'aide du menu déroulant.

Désormais, lorsque les visiteurs remplissent ce champ, ils voient apparaître une carte qui se met à jour au fur et à mesure qu'ils tapent. Ils peuvent également faire glisser l'épingle de la carte pour affiner leur emplacement exact.

Cette option est idéale 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 à l'aide de l'une ou l'autre de ces options, cliquez sur Enregistrer dans le coin supérieur droit.

Étape 5 : Publiez votre carte de formulaire de contact

Prêt à publier votre formulaire de contact avec une carte ? Grâce à votre plugin WPForms Pro, il est très facile d'intégrer votre formulaire à votre site. Le formulaire étant toujours ouvert dans le générateur, cliquez sur le bouton « Embed » (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 « Contactez-nous » ou « Nous joindre », selon vos préférences et 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 au-dessus du formulaire, ajuster la mise en page ou modifier légèrement le style de votre formulaire.

Pour modifier 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 une mise en forme rapide, choisissez un modèle prédéfini dans le menu déroulant Thème du formulaire. Des options telles que Moderne, Classique ou Minimaliste donnent instantanément à votre formulaire un aspect professionnel qui s'harmonise avec le design de votre site.

Si vous souhaitez davantage de contrôle, le panneau vous permet également de personnaliser des é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 correctement votre emplacement, cliquez sur Publier. Votre formulaire de contact avec carte est désormais en ligne. Voici à quoi il ressemblera :

FAQ sur l'ajout d'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 recevons :

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

Oui, vous avez besoin d'une clé API Google Maps ou d'une clé API Mapbox pour utiliser les fonctionnalités cartographiques dans WPForms. L'extension Geolocation nécessite l'une de ces clés 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 de l'add-on Géolocalisation. La configuration prend généralement environ 10 minutes.

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

• Le champ Carte affiche l'emplacement de votre entreprise aux visiteurs. Il leur indique où vous vous trouvez. 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 automatique de l'adresse avec une carte aide les visiteurs à remplir leur adresse plus rapidement. Au fur et à mesure qu'ils tapent, leur adresse leur est suggérée et s'affiche sur une carte. Utilisez cette fonctionnalité lorsque vous avez besoin de connaître la localisation du visiteur.

Puis-je afficher plusieurs emplacements commerciaux sur une seule carte ?

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

Chaque emplacement dispose de 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 obtenir des instructions détaillées, consultez la documentation relative au 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 saisie automatique des adresses fonctionne également de manière transparente sur les appareils mobiles.

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

Non. WPForms charge les cartes de manière efficace 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 garantir la rapidité de votre site, même avec des fonctionnalités interactives telles que les cartes.

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

Oui. Grâce au champ Carte, vous pouvez personnaliser les icônes et les couleurs des marqueurs afin qu'elles correspondent à votre marque.

Vous pouvez également contrôler les commandes qui s'affichent sur la carte (zoom, plein écran, type de carte, etc.) et régler le niveau de zoom initial.

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

Vais-je voir sur une carte d'où proviennent les soumissions de formulaires ?

Oui. Lorsque l'extension Geolocation est activée, WPForms capture automatiquement les données de localisation (avec l'autorisation du visiteur) pour chaque soumission de formulaire.

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

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

Procurez-vous WPForms Pro dès aujourd'hui pour accéder à l'extension Geolocation qui vous permet d'ajouter ces superbes cartes.

Vous aurez également accès à une multitude 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 - Recueillez des données par le biais d'enquêtes et de sondages et visualisez-les dans de superbes rapports. Vous pouvez également ajouter une fonction "Enregistrer et continuer" aux enquêtes de longue durée, afin que les utilisateurs puissent faire une pause et compléter leurs formulaires plus tard.
• Pages de formulaire - Incitez davantage de personnes à remplir vos formulaires en créant des pages de formulaire sans distraction en un seul clic.
• Formulaires de commande - Intégrez Stripe (tous les plans), Square (Pro) et PayPal (Pro) directement sur vos formulaires et acceptez de l'argent en ligne.
• Rapports sur le parcours de l'utilisateur - Voyez où se trouvaient les internautes sur votre site avant de remplir votre formulaire.
• Formulaires sécurisés - Protégez les formulaires avec des options anti-spam comme le captcha personnalisé, le hCaptcha ou le Google reCAPTCHA v2 ou v3.
• Formulaires conversationnels - Regardez les taux de conversion monter en flèche grâce à des formulaires très attrayants et modernes.
• Plus de 2 100 modèles – Ne créez plus jamais de formulaire à partir de zéro grâce à des modèles prédéfinis des types de formulaires les plus courants.
• Support Premium - Accédez à une équipe amicale et compétente qui vous guidera dans la bonne direction si vous avez besoin d'aide avec les formulaires de votre site web.
• ...et bien d'autres choses 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 construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.