Utilisation du champ Carte

Souhaitez-vous afficher une carte sur vos formulaires afin d'indiquer des emplacements spécifiques ou d'aider les utilisateurs à sélectionner un emplacement ? Le champ Carte de WPForms vous permet d'intégrer des cartes interactives directement dans vos formulaires, améliorant ainsi l'expérience utilisateur et fournissant des données de localisation précises.

Dans ce tutoriel, nous vous guiderons à travers les étapes d'utilisation du champ Carte dans WPForms.

---

Avant de commencer, assurez-vous d'installer et d'activer le plugin WPForms sur votre site et vérifiez votre licence. Créez ensuite un nouveau formulaire ou ouvrez-en un existant pour le modifier.

Configuration du module complémentaire de géolocalisation

Avant de pouvoir utiliser le champ Carte, installez et configurez l'extension Géolocalisation. Le champ Carte fait partie de l'extension Géolocalisation et nécessite la même configuration que les autres fonctionnalités de géolocalisation.

Une fois ces étapes terminées, vous pouvez commencer à utiliser le champ Carte dans vos formulaires.

1. Ajouter un champ Carte à votre formulaire

Commencez par localiser le champ Carte dans la section Champs avancés du générateur de formulaires. Cliquez sur le champ Carte ou faites-le glisser et déposez-le dans la zone d'aperçu du formulaire pour l'ajouter à votre formulaire.

2. Configuration des emplacements sur la carte

Après avoir ajouté le champ Carte, cliquez dessus dans le générateur de formulaires pour ouvrir le panneau Options de champ. Ensuite, configurez les emplacements qui apparaîtront sur votre carte dans la section Emplacements.

Ajouter des adresses

Commencez par saisir une adresse dans le champ Adresse.

Au fur et à mesure que vous tapez, des suggestions de saisie automatique apparaissent en fonction des données Google Places. Sélectionnez ensuite l'emplacement souhaité dans la liste des suggestions.

Après avoir sélectionné une adresse, vous pouvez ajouter :

• Nom : une étiquette personnalisée pour l'emplacement, telle que « Siège social » ou « Magasin du centre-ville ».
• Description : Informations supplémentaires sur l'emplacement.

Rechercher des lieux à proximité :

Activez l'option « Trouver des lieux à proximité » pour filtrer les suggestions de complétion automatique d'adresse en fonction de votre emplacement géographique actuel.

Une fois activée, votre navigateur demandera l'autorisation d'accéder à votre position. Une fois l'autorisation accordée, les suggestions donneront la priorité aux lieux à proximité, ce qui facilitera la recherche et la sélection d'adresses dans votre voisinage.

Affichage des informations de localisation :

Activez l'option Afficher la liste des emplacements pour afficher les informations d'adresse complètes sous la carte sur l'interface utilisateur. Cela permet aux utilisateurs de voir une liste indiquant le nom et l'adresse de chaque emplacement que vous avez configuré.

3. Personnalisation des marqueurs de carte

Chaque emplacement peut avoir une icône ou une image personnalisée comme marqueur. Dans la section Emplacements, recherchez le menu déroulant Icône pour l'emplacement que vous souhaitez personnaliser.

Sélectionnez Icône pour choisir parmi plus de 2 000 icônes Font Awesome, ou sélectionnez Image pour télécharger une image personnalisée.

Si vous utilisez des icônes, cliquez sur le champ d'icône pour ouvrir le sélecteur d'icônes. Recherchez l'icône souhaitée et sélectionnez-la.

Si vous utilisez des images, cliquez sur Télécharger une image pour ouvrir la bibliothèque multimédia. Téléchargez un nouveau fichier ou sélectionnez une image existante dans votre bibliothèque multimédia.

Personnalisation de l'apparence des marqueurs

Pour modifier la couleur du marqueur, cliquez sur le sélecteur de couleurs situé à côté du champ de l'icône. Vous pouvez soit sélectionner une couleur parmi les couleurs prédéfinies, soit faire glisser le sélecteur de couleurs pour choisir n'importe quelle couleur, soit coller directement une valeur hexadécimale.

Pour rendre les marqueurs plus visibles, utilisez le menu déroulant à côté du champ de l'icône. Les options disponibles sont : Petit, Moyen ou Grand. Les marqueurs plus grands permettent à vos emplacements personnalisés de se démarquer des autres emplacements sur la carte.

Réglage du niveau de zoom

Ajustez le champ Niveau de zoom pour contrôler le niveau de détail de la carte lors de son premier chargement. La valeur par défaut est 15, qui correspond au niveau de zoom standard pour les cartes intégrées.

Lorsque plusieurs emplacements sont configurés, le niveau de zoom s'ajuste automatiquement pour afficher tous les emplacements, et ce paramètre est désactivé.

4. Configuration des paramètres avancés de la carte

Pour davantage de personnalisation, cliquez sur l'onglet Avancé dans le panneau Options de champ. Vous pouvez ici contrôler l'apparence de la carte, les interactions utilisateur et son affichage dans les entrées du formulaire.

Paramètres de présentation

Décidez quels éléments de l'interface utilisateur Google Maps sont visibles sur votre carte :

• Masquer le plein écran : Masque le bouton plein écran qui permet aux utilisateurs d'afficher la carte en mode plein écran.
• Masquer le type de carte : masque le sélecteur de type de carte (satellite, terrain, etc.).
• Masquer les informations de localisation : masque les cartes d'informations de localisation qui apparaissent lorsque vous cliquez sur les marqueurs.
• Masquer Street View : masque le contrôle Street View.

La plupart de ces options sont masquées par défaut afin d'offrir une apparence plus claire à la carte.

Paramètres interactifs

Contrôlez la manière dont les utilisateurs interagissent avec la carte :

• Masquer les commandes de la caméra : masque les boutons de commande de la caméra.
• Masquer le zoom : Masque les boutons de zoom avant et arrière.
• Désactiver le glissement : empêche les utilisateurs de faire glisser la carte pour la déplacer.
• Désactiver le zoom avec la souris : empêche le zoom à l'aide de la molette de la souris.

Autres paramètres

Options supplémentaires concernant le comportement du champ carte :

• Afficher dans l'entrée : affiche les données cartographiques dans les entrées du formulaire.
• Afficher la vignette dans l'entrée : affiche une vignette de la carte dans les entrées du formulaire.
• Masquer l'étiquette : Masque l'étiquette du champ sur l'interface utilisateur.

5. Gestion de plusieurs emplacements

Utilisez plusieurs emplacements lorsque vous devez afficher plusieurs points sur une seule carte, tels que plusieurs emplacements de magasins, points de retrait ou succursales. Cette fonctionnalité permet aux utilisateurs de voir tous les emplacements à la fois et, s'ils le souhaitent, de sélectionner leur emplacement préféré.

Pour ajouter plusieurs emplacements à votre carte, cliquez sur l'icône plus (+) dans la section Emplacements du panneau Options de terrain. Chaque emplacement peut avoir son propre marqueur, sa propre couleur, son propre nom et sa propre description.

Activation de la sélection de l'emplacement

Lorsque vous avez configuré deux emplacements ou plus, activez l'option Autoriser la sélection de l'emplacement. Cette fonctionnalité nécessite :

• Au moins deux emplacements ajoutés à la carte.
• L'option Afficher la liste des emplacements doit être activée.

Avec cette option, des boutons radio apparaissent sous la carte, permettant aux utilisateurs de sélectionner leur emplacement préféré.

Questions fréquemment posées

Voici les réponses à certaines des questions les plus fréquentes que nous recevons concernant l'utilisation du champ Carte dans WPForms.

Puis-je masquer d'autres entreprises et points d'intérêt sur ma carte ?

Oui. Pour masquer les points d'intérêt (POI) tels que les restaurants et les magasins afin que seuls vos marqueurs personnalisés soient visibles, vous devez créer un style de carte personnalisé dans Google Cloud Console, puis l'appliquer à votre champ Carte à l'aide d'un extrait de code. La configuration du style de carte s'effectuant via la fonctionnalité de style basée sur le cloud de Google, elle s'effectue dans votre tableau de bord Google Cloud Console.

Consultez notre documentation pour développeurs sur l'application de styles de carte personnalisés au champ Carte pour obtenir des instructions détaillées.

Et voilà ! Vous savez désormais comment utiliser le champ Maps dans WPForms pour améliorer vos formulaires grâce à des cartes interactives et des données de localisation précises.

Ensuite, souhaitez-vous améliorer facilement la conception de vos formulaires grâce à des thèmes prêts à l'emploi ? N'hésitez pas à consulter notre guided'utilisation des thèmes de formulairepour obtenir tous les détails sur la manière d'appliquer ces thèmes à vos formulaires.