Utilisation du champ Carte

Souhaitez-vous afficher une carte sur vos formulaires pour indiquer des lieux spécifiques ou aider les utilisateurs à sélectionner un lieu ? Le champ Carte dans 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 pour utiliser le champ Carte dans WPForms.

---

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

Configuration du module complémentaire Géolocalisation

Avant de pouvoir utiliser le champ Carte, installez et configurez le module complémentaire Géolocalisation. Le champ Carte fait partie du module complémentaire 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. Ajout d'un champ Carte à votre formulaire

Commencez par localiser le champ Carte dans la section Fancy Fields de l'éditeur de formulaire. 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 de la carte

Après avoir ajouté le champ Carte, cliquez dessus dans l'éditeur de formulaire pour ouvrir le panneau Options du champ. Ensuite, configurez les emplacements qui apparaîtront sur votre carte dans la section Emplacements.

Ajout d'adresses

Commencez par taper une adresse dans le champ Adresse.

Au fur et à mesure que vous tapez, des suggestions de saisie semi-automatique apparaîtront en fonction des données de 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 « Bureau principal » ou « Magasin du centre-ville ».
• Description : Informations supplémentaires sur l'emplacement.

Recherche d'emplacements à proximité :

Activez l'option Rechercher des emplacements à proximité pour filtrer les suggestions de saisie semi-automatique d'adresses en fonction de votre position géographique actuelle.

Lorsqu'elle est activée, votre navigateur demandera l'autorisation d'accéder à votre position. Une fois l'autorisation accordée, les suggestions privilégieront les emplacements proches, 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 complètes de l'adresse sous la carte sur le front-end. 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, trouvez le menu déroulant Icône pour l'emplacement que vous souhaitez personnaliser.

Sélectionnez Icône pour choisir parmi plus de 2000 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 icône pour ouvrir le sélecteur d'icônes. Recherchez l'icône que vous souhaitez et sélectionnez-la.

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

Personnalisation de l'apparence des marqueurs

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

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

Réglage du niveau de zoom

Ajustez le champ Niveau de zoom pour contrôler la proximité de la carte lors de son premier chargement. La valeur par défaut est 15, ce qui est le 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 une personnalisation supplémentaire, cliquez sur l'onglet Avancé dans le panneau Options de champ. Ici, vous pouvez contrôler l'apparence de la carte, les interactions utilisateur et la façon dont elle s'affiche dans les entrées de formulaire.

Paramètres de présentation

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

• Masquer Plein Écran : Masque le bouton plein écran qui permet aux utilisateurs de visualiser la carte en mode plein écran.
• Masquer Type de Carte : Masque le sélecteur de type de carte (satellite, terrain, etc.).
• Masquer Informations sur l'Emplacement : Masque les cartes d'informations sur l'emplacement qui apparaissent lors du clic sur les marqueurs.
• Masquer Street View : Masque le contrôle Street View.

La plupart de ces options sont masquées par défaut pour offrir une apparence de carte plus épurée.

Paramètres interactifs

Contrôlez la façon dont les utilisateurs interagissent avec la carte :

• Masquer Contrôle Caméra : Masque les boutons de contrôle de la caméra.
• Masquer 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 Souris : Empêche le zoom avec la molette de la souris.

Autres paramètres

Options supplémentaires pour le comportement du champ carte :

• Afficher dans l'Entrée : Affiche les données de la carte dans les entrées de formulaire.
• Afficher Miniature dans l'Entrée : Affiche une miniature de la carte dans les entrées de formulaire.
• Masquer Étiquette : Masque l'étiquette du champ sur le frontend.

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 en même temps et de sélectionner éventuellement 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 champ. Chaque emplacement peut avoir sa propre icône de marqueur, couleur, nom et description uniques.

Activation de la sélection d'emplacement

Lorsque vous avez deux emplacements ou plus configurés, activez l'option Autoriser la sélection d'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équemment posées 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 devrez créer un style de carte personnalisé dans la console Google Cloud, puis l'appliquer à votre champ Carte à l'aide d'un extrait de code. Étant donné que la mise en style de la carte est gérée via la fonctionnalité de mise en style basée sur le cloud de Google, cette configuration est effectuée dans votre tableau de bord Google Cloud Console.

Consultez notre documentation pour les développeurs sur l'application de styles de carte personnalisés au champ Carte pour des instructions étape par étape.

C'est tout ! Vous savez maintenant comment utiliser le champ Cartes dans WPForms pour enrichir vos formulaires avec des cartes interactives et des données de localisation précises.

Ensuite, souhaitez-vous améliorer facilement la conception de vos formulaires avec des thèmes prêts à l'emploi ? Assurez-vous de consulter notre guide sur l'utilisation des thèmes de formulaire pour tous les détails sur la façon d'appliquer ces thèmes à vos formulaires.