Comment ajouter un sélecteur de lieu interactif à n'importe quel formulaire WordPress

Imaginez la situation suivante : un donateur se rend sur le site web d'une association pour faire don de quelques manteaux d'hiver. Il est prêt à les déposer, mais le formulaire ne propose qu'un menu déroulant avec trois adresses. Aucune carte ni aucune indication n'est fournie. Il ouvre Google Maps dans un nouvel onglet, saisit chaque adresse une par une, détermine laquelle est la plus proche, puis revient sur le site pour remplir le formulaire.

Certains le feront. La plupart ne le feront pas…

Imaginez maintenant une carte interactive intégrée directement au formulaire. Les trois points de dépôt sont signalés par des icônes personnalisées, intitulées « Centre communautaire Nord », « Bibliothèque du centre-ville » et « Église de l'Est ». L'utilisateur appuie sur celui qui se trouve le plus près de lui, le repère rebondit pour confirmer, et sa sélection est enregistrée sans problème dans votre formulaire. Tout cela se fait en quelques secondes, sans jamais quitter la page.

Voici le champ « Carte » de WPForms en action ! Et même si un formulaire de réservation avec sélection de lieu est sans doute le premier cas d'utilisation qui vient à l'esprit, c'est loin d'être le seul. Retrait en magasin, retours de produits, enregistrement à un événement, sélection d'une zone de service, inscriptions de bénévoles… tout formulaire impliquant le choix d'un lieu physique gagne en efficacité grâce à cette fonctionnalité.

Je vais vous montrer comment le configurer, ainsi que plusieurs façons de l'utiliser.

Comment ajouter un sélecteur de lieu interactif à n'importe quel formulaire WordPress

Ce dont vous avez besoin

• WPForms Pro — le champ « Carte » fait partie du module complémentaire de géolocalisation, inclus dans toutes les formules Pro
• Une clé API Google Places — gratuite à créer ; elle permet l'affichage de la carte et la saisie semi-automatique 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 à l'extension de géolocalisation. Si vous découvrez WPForms, la version Pro est le meilleur point de départ.

Créez votre formulaire WordPress maintenant

Étape 1 : Installez l'extension de géolocalisation

Depuis votre tableau de bord WordPress, rendez-vous dans WPForms » Extensions, recherchez « Géolocalisation », puis cliquez sur Installer l'extension.

Une fois l'extension activée, rendez-vous dans WPForms » Paramètres » Géolocalisation et saisissez votre clé API Google Places pour vous connecter à Google Maps.

Pour obtenir des instructions détaillées sur la configuration de la clé API, consultez la documentation du module complémentaire de géolocalisation.

Étape 2 : Ajouter le champ « Carte » à votre formulaire

Ouvrez n'importe quel formulaire dans le générateur WPForms, qu'il soit nouveau ou existant. Recherchez le champ « Carte » dans la section « Champs personnalisés » du panneau de gauche, puis faites-le glisser dans le formulaire.

Cela fonctionne avec tous les types de formulaires : formulaires de contact, de prise de rendez-vous, d'inscription, de don, etc.

Étape 3 : Ajoutez vos emplacements

Cliquez sur le champ « Carte » pour ouvrir les paramètres des options du champ. Dans l'onglet « Général », sous « Emplacements », commencez à saisir une adresse : la fonction de saisie semi-automatique de Google Places vous proposera des suggestions.

Sélectionnez celui qui convient, puis attribuez-lui un nom (par exemple « Emplacement rue principale ») et, si vous le souhaitez, une description (horaires d'ouverture, informations sur le stationnement, toute autre information utile pour le visiteur).

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

Activez l'option « Afficher la liste des lieux » pour afficher les noms et adresses des lieux sous forme de liste claire sous la carte.

Cela permet aux visiteurs de disposer d'une référence textuelle en plus de la carte visuelle, ce qui est particulièrement utile sur mobile, où il peut être difficile de cliquer sur de petites épingles.

Étape 4 : Activer la sélection de la localisation

Une fois que vous avez ajouté au moins deux lieux, activez l'option « Autoriser la sélection du lieu », située sous le bouton bascule « Liste des lieux ». Cela ajoute des boutons radio sous la carte, transformant ainsi le champ d'affichage en un champ de saisie interactif.

Lorsqu'un visiteur clique sur une épingle ou fait un choix dans la liste, le marqueur rebondit pour confirmer l'action. La soumission enregistre le nom, l'adresse et les coordonnées du lieu — ainsi qu'un lien « Voir sur la carte » — directement dans les données de votre formulaire.

Remarque : pour pouvoir sélectionner un lieu, il faut à la fois que l'option « Afficher la liste des lieux » soit activée et qu'au moins deux lieux aient été configurés.

Étape 5 : Personnalisez vos marqueurs

C'est là que le champ « Carte » se distingue d'une simple intégration de Google Maps. À côté de chaque lieu que vous avez ajouté, vous trouverez un menu déroulant « Icône ».

En cliquant sur « Sélectionner une icône », vous accédez à une vaste bibliothèque d'icônes Font Awesome. Des choix simples, comme les repères de carte ou les icônes de bâtiments, conviennent généralement bien comme marqueurs, mais des options plus spécifiques sont également disponibles, comme des calendriers, des cœurs, etc.

Chaque broche est entièrement personnalisable :

• Icône — faites votre choix parmi plus de 2 000 icônes Font Awesome. Un sac de courses pour un magasin, un cœur pour un site de dons, un symbole de recyclage pour un point de collecte.
• Image — téléchargez votre propre logo ou votre marque distinctive depuis votre bibliothèque multimédia.
• Couleur — utilisez le sélecteur de couleurs ou collez une valeur hexadécimale pour reproduire exactement les couleurs de votre marque.
• Taille — réglez les repères sur « Petit », « Moyen » ou « Grand ». Les repères plus grands permettent à vos emplacements de se démarquer immédiatement des points d'intérêt par défaut de Google Maps.

Chaque repère peut également afficher une fenêtre contextuelle contenant un nom et une description lorsque l'on clique dessus, ce qui permet aux visiteurs d'avoir toutes les informations nécessaires sans quitter le formulaire.

Étape 6 : Réglage fin de l'affichage

Dans l'onglet « Avancé », vous pouvez alléger l'interface de la carte en masquant les éléments dont les visiteurs n'ont pas besoin : le bouton de passage en plein écran, le sélecteur de type de carte (satellite/terrain), la commande Street View et les fiches d'informations sur l'emplacement des autres entreprises.

Vous pouvez également désactiver le glisser-déposer ou le zoom à l'aide de la molette de défilement afin de rester concentré sur vos lieux épinglés.

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

Étape 7 : Configurer les notifications basées sur la localisation

Avant de publier votre formulaire de réservation multi-sites, prenez le temps de configurer les notifications et les confirmations. Dans le générateur de formulaires, rendez-vous dans Paramètres » Notifications.

WPForms envoie automatiquement une notification à l'adresse e-mail de votre compte d'administration WordPress chaque fois qu'un formulaire est soumis. Depuis cet écran, vous pouvez modifier les paramètres par défaut, tels que l'objet du message ou les adresses e-mail des destinataires.

Grâce aux balises intelligentes, vous pouvez également configurer une notification qui sera envoyée directement à la personne ayant rempli le formulaire, afin d'accuser réception et de l'informer qu'un suivi sera effectué. Cette fonctionnalité est particulièrement utile pour les formulaires multi-sites sous WordPress. Pour obtenir des instructions plus détaillées, consultez la documentation sur la configuration des notifications de formulaire dans WordPress.

Une fois cette étape terminée, rendez-vous dans la section « Confirmations » du menu « Paramètres » pour définir ce qui se passe après un envoi réussi.

Il existe trois options :

• Message : affiche un message de remerciement sur la même page — une solution idéale lorsque la simplicité est la priorité.
• Afficher la page : redirige le visiteur vers une autre page de votre site, par exemple une page présentant les étapes suivantes ou fournissant des coordonnées supplémentaires.
• Aller à l'URL (redirection) : redirige le visiteur vers une URL externe, ce qui est particulièrement utile lorsqu'il s'agit d'un système de réservation tiers ou d'une page d'accueil personnalisée.

Choisissez l'option qui correspond le mieux à votre configuration. Si vous optez pour l'option « Message », vous pouvez personnaliser le texte par défaut, par exemple : « Merci d'avoir réservé chez nous ! Nous vous enverrons sous peu un e-mail de confirmation à l'adresse que vous avez indiquée. »

Pour plus d'informations sur les autres types de confirmation, consultez la documentation relative à la configuration des confirmations de formulaire.

Champ cartographique ou saisie semi-automatique d'adresse : quelle est la différence ?

Il s'agit de deux fonctionnalités distinctes de l'extension de géolocalisation qui ont des effets opposés et qu'il est facile de confondre :

	Champ Carte	Compléments d'adresse
Ce que cela montre	Vos lieux prédéfinis	Suggestions de saisie pour toute adresse
Ce qu'il capture	Le lieu choisi par le visiteur	L'adresse qu'un visiteur saisit
Meilleur pour	Choisir parmi vos agences, sites ou lieux	Saisir 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 repas peut par exemple utiliser le champ « Carte » pour permettre au client de choisir une succursale du restaurant, et un champ « Adresse » avec la fonction de saisie semi-automatique pour recueillir son adresse de livraison.

Pour activer la saisie semi-automatique des adresses, ouvrez n'importe quel champ « Adresse », accédez à l'onglet « Avancé », puis cochez la case « Activer la saisie semi-automatique des adresses ». Pour un guide détaillé, consultez l'article « Comment créer un formulaire de saisie d'adresse avec saisie semi-automatique sur Google Maps ».

Afficher les 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 et l'adresse du lieu sélectionné, ainsi qu'un lien « Afficher sur la carte ». Si vous avez activé l'aperçu de la carte dans les paramètres avancés, vous verrez un aperçu visuel directement sur la page de l'entrée.

Si vous exportez vers Google Sheets, associez les champs de localisation sélectionnés à l'aide du module complémentaire Google Sheets — cela s'avère utile pour créer des listes de distribution classées par point de retrait ou pour suivre le nombre d'inscriptions de bénévoles par site.

Prêt à vous lancer ? Le champ « Carte » est disponible dans le générateur de formulaires WPForms pour tous les utilisateurs Pro. Si l'extension « Géolocalisation » est déjà installée, vous la trouverez dans la section « Champs avancés ».

Créez votre formulaire WordPress maintenant

Foire aux questions 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 adapté aux appareils mobiles. La liste des lieux avec des boutons radio située sous la carte facilite la sélection sur les téléphones : plus besoin de cliquer avec précision sur une petite épingle.

Dois-je payer un supplément pour l'extension de géolocalisation ?

Non. Cette fonctionnalité est incluse dans toutes les formules WPForms Pro sans frais supplémentaires, tout comme 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 ?

Lorsqu'il n'y a qu'un seul emplacement, le champ « Carte » sert uniquement d'affichage : votre repère personnalisé apparaît sur la carte, sans qu'il soit nécessaire de sélectionner quoi que ce soit. La sélection d'emplacements ne s'active que lorsqu'il y a au moins deux emplacements et que l'option « Afficher la liste des emplacements » est activée.

Puis-je utiliser une logique conditionnelle en fonction de l'emplacement choisi par le visiteur ?

Oui. Grâce à 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 de la localisation sélectionnée.

Puis-je télécharger mon propre logo pour l'utiliser comme repère sur la carte ?

Oui. Dans la section « Emplacements » des options de terrain, sélectionnez « Image » dans le menu déroulant des icônes et téléchargez n'importe quelle image de votre bibliothèque multimédia pour l'utiliser comme repère.

Approfondissez vos connaissances grâce à ces cas d'utilisation

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

• Comment créer un formulaire de réservation WordPress pour plusieurs sites — guide complet destiné aux entreprises de services et à la gestion des rendez-vous
• Comment créer un formulaire de commande en ligne pour un restaurant — intégrer la sélection du lieu dans un processus complet de commande et de paiement
• Comment créer un formulaire en plusieurs étapes dans WordPress — diviser les formulaires complexes en plusieurs pages, en commençant par la sélection de la localisation
• Comment créer un formulaire d'adresse avec saisie semi-automatique via Google Maps — compléter le champ « Carte » avec la saisie semi-automatique de l'adresse du visiteur

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.