Comment ajouter un sélecteur d'emplacement interactif à n'importe quel formulaire WordPress

Imaginez : un donateur visite le site web d’une association pour faire un don de manteaux d’hiver. Il est prêt à les déposer, mais le formulaire n’affiche qu’une liste déroulante avec trois adresses. Aucune carte ni aucun contexte n’est inclus. Il ouvre Google Maps dans un nouvel onglet, colle chaque adresse une par une, détermine laquelle est la plus proche, puis revient pour terminer le formulaire.

Certains le feront. La plupart ne le feront pas…

Maintenant, imaginez une carte interactive directement dans le formulaire. Les trois points de dépôt sont épinglés avec des icônes personnalisées, intitulés « Centre communautaire Nord », « Bibliothèque du centre-ville » et « Église de l’Est ». L’utilisateur touche celui qui est le plus proche de lui, l’épingle rebondit pour confirmer, et sa sélection est capturée proprement dans votre entrée. C’est fait en quelques secondes et sans jamais quitter la page.

C’est le champ Carte de WPForms en action ! Et bien qu’un formulaire de réservation avec sélection de lieu soit probablement le premier cas d’utilisation qui vient à l’esprit, ce n’est de loin pas le seul. Retrait en magasin, retours de produits, enregistrement d’événements, sélection de zone de service, inscriptions de bénévoles… tout formulaire impliquant le choix d’un lieu physique est amélioré avec lui.

Laissez-moi vous montrer comment le configurer, ainsi que plusieurs façons de le mettre au travail.

Comment ajouter un sélecteur d'emplacement interactif à n'importe quel formulaire WordPress

Ce dont vous aurez besoin

• WPForms Pro — le champ Carte fait partie du module complémentaire Géolocalisation, inclus dans tous les plans Pro
• Une clé API Google Places — gratuite à configurer ; elle alimente la carte et l’autocomplétion des adresses
• La dernière version de WPForms installée sur votre site WordPress

Si vous utilisez WPForms Lite, vous devrez passer à la version Pro pour accéder au module complémentaire Géolocalisation. Si vous êtes nouveau sur WPForms, la version Pro est le bon point de départ.

Créez votre formulaire WordPress maintenant

Étape 1 : Installer le module complémentaire Géolocalisation

Depuis votre tableau de bord WordPress, allez dans WPForms » Modules complémentaires, recherchez « Géolocalisation », et cliquez sur Installer le module complémentaire.

Une fois actif, allez dans WPForms » Paramètres » Géolocalisation et entrez votre clé API Google Places pour vous connecter à Google Maps.

Pour un guide complet de configuration de la clé API, consultez la documentation du module complémentaire Géolocalisation.

Étape 2 : Ajouter le champ Carte à votre formulaire

Ouvrez n’importe quel formulaire dans le constructeur WPForms — nouveau ou existant. Trouvez le champ Carte sous Champs fantaisie dans le panneau de gauche et faites-le glisser.

Il fonctionne dans tous les types de formulaires : formulaires de contact, formulaires de rendez-vous, formulaires d’inscription, formulaires de don, etc.

Étape 3 : Ajouter vos lieux

Cliquez sur le champ Carte pour ouvrir les paramètres des options du champ. Dans l’onglet Général sous Lieux, commencez à taper une adresse — l’autocomplétion Google Places suggérera des correspondances.

Sélectionnez la bonne, puis donnez-lui un Nom (comme « Lieu rue Principale ») et une Description facultative (heures d’ouverture, notes sur le stationnement, tout ce qui est utile au visiteur).

Cliquez sur + pour ajouter d’autres lieux. Il n’y a pas de limite.

Activez Afficher la liste des emplacements pour afficher les noms et adresses des emplacements dans une liste claire sous la carte.

Cela donne aux visiteurs une référence textuelle à côté de la carte visuelle, ce qui est particulièrement utile sur mobile où appuyer sur de petites épingles peut être délicat.

Étape 4 : Activer la sélection de lieu

Avec deux emplacements ou plus ajoutés, activez Autoriser la sélection d'emplacements, sous le bouton Afficher la liste des emplacements. Cela ajoute des boutons radio sous la carte, transformant le champ d'un affichage visuel en une saisie de formulaire active.

Lorsqu'un visiteur clique sur une épingle ou sélectionne dans la liste, le marqueur rebondit pour confirmer. Leur soumission capture le nom, l'adresse et les coordonnées de l'emplacement — plus un lien Afficher sur la carte — directement dans votre entrée de formulaire.

Remarque : La sélection d'emplacements nécessite à la fois l'option Afficher la liste des emplacements et au moins deux emplacements configurés.

Étape 5 : Personnaliser vos marqueurs

C'est ici que le champ Carte se distingue d'un simple embed Google Maps. À côté de chaque emplacement que vous avez ajouté, il y a un menu déroulant Icône.

Sélectionner Icône vous donne accès à une grande bibliothèque d'icônes Font Awesome. Des choix simples comme des épingles de carte ou des icônes de bâtiment fonctionnent bien comme marqueurs, mais des options plus spécifiques sont également disponibles, comme des calendriers, des cœurs, etc.

Chaque épingle est entièrement personnalisable :

• Icône — choisissez parmi plus de 2 000 icônes Font Awesome. Un sac de courses pour un emplacement de vente au détail, un cœur pour un site de dons, un symbole de recyclage pour un point de retour.
• Image — téléchargez votre propre logo ou marqueur personnalisé depuis votre médiathèque.
• Couleur — utilisez le sélecteur de couleur ou collez une valeur hexadécimale pour correspondre exactement à votre marque.
• Taille — définissez les épingles sur Petite, Moyenne ou Grande. Les marqueurs plus grands font ressortir immédiatement vos emplacements par rapport aux points d'intérêt par défaut de Google Maps.

Chaque épingle peut également afficher une popup de nom et de description lorsqu'elle est cliquée, afin que les visiteurs obtiennent le contexte complet sans quitter le formulaire.

Étape 6 : Affiner l’affichage

Sous l'onglet Avancé, vous pouvez nettoyer l'interface de la carte en masquant les éléments dont les visiteurs n'ont pas besoin — le bouton plein écran, le sélecteur de type de carte (satellite/terrain), le contrôle Street View et les cartes d'information des autres entreprises.

Vous pouvez également désactiver le glissement ou le zoom de la molette de la souris pour maintenir l'attention sur vos emplacements épinglés.

Pour les entrées, activez Afficher la miniature dans l'entrée pour voir un aperçu de la carte directement sur la page de soumission dans WPForms » Entrées.

Étape 7 : Configurer les notifications conscientes du lieu

Avant de publier votre formulaire de réservation multi-emplacements, il est utile de prendre un moment pour configurer les notifications et les confirmations. Dans le constructeur de formulaire, allez dans Paramètres » Notifications.

WPForms envoie automatiquement une notification à votre e-mail d'administrateur WordPress chaque fois que le formulaire est soumis. À partir de cet écran, vous pouvez ajuster les paramètres par défaut — des éléments tels que la ligne d'objet ou les adresses e-mail des destinataires.

Avec les balises intelligentes, vous pouvez également configurer une notification qui est envoyée directement à la personne qui a rempli le formulaire, accusant réception et l'informant que quelqu'un fera un suivi. C'est une étape particulièrement utile pour les formulaires multi-sites dans WordPress. Pour des instructions plus détaillées, consultez la documentation sur comment configurer les notifications de formulaire dans WordPress.

Une fois cela fait, allez dans Confirmations sous le menu Paramètres pour décider de ce qui se passe après une soumission réussie.

Il existe trois options :

• Message : Affiche un message de remerciement sur la même page — une bonne option lorsque la simplicité est la priorité.
• Afficher la page : Redirige le visiteur vers une autre page de votre site, telle qu'une page décrivant les prochaines étapes ou fournissant des informations de contact supplémentaires.
• Accéder à l'URL (Redirection) : Envoie le visiteur vers une URL externe, ce qui fonctionne bien lorsqu'un système de réservation tiers ou une page de destination personnalisée est impliqué.

Choisissez l'option qui convient à votre configuration. Si vous optez pour l'option Message, le texte par défaut peut être personnalisé, par exemple : « Merci d'avoir réservé chez nous ! Nous vous enverrons bientôt un e-mail de confirmation à l'adresse que vous avez fournie. »

Pour obtenir des instructions sur les autres types de confirmation, consultez la documentation sur la configuration des confirmations de formulaire.

Champ Carte vs. Autocomplétion d'adresse : Quelle est la différence ?

Ce sont deux fonctionnalités distinctes du module complémentaire Géolocalisation qui font des choses opposées et sont faciles à confondre :

	Champ Carte	Autocomplétion d'adresse
Ce qu'il montre	Vos emplacements prédéfinis	Suggestions de saisie pour n'importe quelle adresse
Ce qu'il capture	L'emplacement qu'un visiteur sélectionne	L'adresse qu'un visiteur saisit
Meilleur pour	Choisir parmi vos succursales, sites ou lieux	Collecter une adresse de livraison, de facturation ou de service

Vous pouvez utiliser les deux dans le même formulaire. Un formulaire de commande de livraison de nourriture pourrait utiliser le champ Carte pour permettre au client de choisir une succursale de restaurant, et un champ Adresse avec autocomplétion pour collecter son adresse de livraison.

Pour activer l'autocomplétion d'adresse, ouvrez n'importe quel champ Adresse, allez dans l'onglet Avancé et activez Activer l'autocomplétion d'adresse. Pour un guide complet, consultez comment créer un formulaire d'adresse avec autocomplétion Google Maps.

Affichage des données de localisation dans vos entrées

Toutes les données de localisation se trouvent dans WPForms » Entrées.

Ouvrez n'importe quelle soumission pour voir le nom, l'adresse de l'emplacement sélectionné et un lien Afficher sur la carte. Si vous avez activé la miniature de la carte dans les paramètres avancés, vous verrez un aperçu visuel directement sur la page d'entrée.

Si vous exportez vers Google Sheets, mappez les champs d'emplacement sélectionnés à l'aide du module complémentaire Google Sheets — utile pour créer des listes de traitement organisées par lieu de retrait, ou pour suivre le nombre d'inscriptions de bénévoles par site.

Prêt à commencer ? Le champ Carte est disponible dans le constructeur de formulaires WPForms pour tous les utilisateurs Pro. Si le module complémentaire Géolocalisation est déjà installé, vous le trouverez dans la section Champs fantaisistes.

Créez votre formulaire WordPress maintenant

FAQ sur l'ajout d'un sélecteur de lieu interactif à n'importe quel formulaire WordPress

Le champ Carte fonctionne-t-il sur mobile ?

Oui. Le champ Carte est entièrement réactif. La liste des lieux avec des boutons radio sous la carte facilite la sélection sur les téléphones — pas besoin de toucher précisément une petite épingle.

Dois-je payer un supplément pour le module complémentaire Géolocalisation ?

Non. Il est inclus dans tous les plans WPForms Pro sans frais supplémentaires, ainsi que plus de 2 000 modèles de formulaires et tous les autres modules complémentaires pro.

Que se passe-t-il si je n'ajoute qu'un seul lieu ?

Avec un seul lieu, le champ Carte fonctionne comme un affichage — votre épingle de marque sur la carte, aucune sélection requise. La sélection de lieu ne s'active qu'avec deux lieux ou plus et la liste des lieux activée.

Puis-je utiliser la logique conditionnelle en fonction du lieu qu'un visiteur sélectionne ?

Oui. En utilisant la logique conditionnelle de WPForms, vous pouvez afficher ou masquer des champs, acheminer les notifications vers différents destinataires ou déclencher différents messages de confirmation en fonction du lieu sélectionné.

Puis-je télécharger mon propre logo comme marqueur de carte ?

Oui. Dans la section Lieux des options de champ, choisissez Image dans le menu déroulant des icônes et téléchargez n'importe quelle image de votre médiathèque comme marqueur d'épingle.

Plongez plus profondément avec ces cas d'utilisation

Vous souhaitez en savoir plus sur un cas d'utilisation spécifique ? Je pense que vous trouverez ces guides utiles :

• Comment créer un formulaire de réservation WordPress multi-lieux — présentation complète pour les entreprises de services et la planification sur rendez-vous
• Comment créer un formulaire de commande en ligne pour restaurant — ajoutez la sélection de lieu à un flux de commande et de paiement complet
• Comment créer un formulaire multi-étapes dans WordPress — divisez les formulaires complexes en pages avec la sélection de lieu comme première étape
• Comment créer un formulaire d'adresse avec autocomplétion Google Maps — complétez le champ Carte avec l'autocomplétion d'adresse du visiteur

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.