Comment créer un formulaire de réservation WordPress multi-sites

Gérer les réservations sur plusieurs sites peut être un véritable cauchemar sans les bons outils, surtout lorsque les clients ont besoin de savoir où vous vous trouvez avant de réserver.

Avec WPForms et l'extension Geolocation Addon, vous pouvez créer un formulaire de réservation WordPress multi-sites qui affiche tous vos emplacements sur une carte interactive et permet aux visiteurs de choisir leur emplacement préféré.

Ce guide vous explique comment créer un formulaire de réservation qui affiche plusieurs bureaux, centres de services ou lieux d'événements sur une seule carte, afin que les clients puissent facilement trouver et réserver l'emplacement le plus proche de chez eux.

Créez dès maintenant votre formulaire WordPress multi-sites ! 🙂

Comment créer un formulaire de réservation WordPress multi-sites

Pour créer un formulaire de réservation multi-sites dans WordPress, vous aurez besoin d'un plugin capable d'effectuer les tâches les plus lourdes, et WPForms est celui que je recommande toujours. Suivez les étapes ci-dessous pour commencer :

Étape 1 : Installer le plugin WPForms Pro

WPForms est un excellent outil pour créer des formulaires tels que des formulaires de contact et des formulaires de réservation. 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 de puissantes fonctionnalités de formulaire 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 créer un formulaire de réservation multi-sites dans WordPress, vous aurez besoin de WPForms Pro, qui comprend l'extension Geolocation Addon et le champ Map Field nécessaires pour ce tutoriel.

Pour commencer, achetez la licence Pro. Ensuite, installez WPForms sur votre site web. Si vous avez besoin d'aide, suivez ces instructions pour ajouter un plugin à WordPress.

Passez à WPForms Pro dès maintenant ! 🙂 .

Étape 2 : Activez l'extension de géolocalisation

Avant de pouvoir ajouter une carte interactive à votre formulaire de réservation, vous devez installer l'extension Geolocation. C'est elle qui alimente le champ Carte.

Pour commencer, rendez-vous dans WPForms » Addons dans votre tableau de bord WordPress. Dans la barre de recherche, tapez « Géolocalisation » pour trouver rapidement l'addon.

Une fois qu'il apparaît, cliquez sur « Installer l'extension ». L'installation ne prend généralement que quelques secondes. Ensuite, cliquez sur « Activer » pour l'activer sur votre site.

Maintenant, voici la partie qui pose parfois problème : l'extension Geolocation Addon nécessite une clé API Google Places ou Mapbox pour que le champ Carte puisse fonctionner correctement.

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.

Il vous guide tout au long du processus d'activation des API requises pour Google Places ou Mapbox, puis vous invite à saisir cette clé dans WPForms » Paramètres » Géolocalisation.

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éer un nouveau formulaire de réservation

Maintenant que l'extension Geolocation est active, il est temps de créer le formulaire de réservation proprement dit. Rendez-vous dans WPForms » Ajouter nouveau dans votre tableau de bord WordPress pour ouvrir le générateur de formulaires.

Vous verrez plusieurs options s'afficher ici. Si vous souhaitez gagner du temps, vous pouvez choisir l'un de nos plus de 2 100 modèles de formulaires WordPress, tel que le modèle de formulaire de prise de rendez-vous, puis cliquer sur « Utiliser le modèle ».

Ces modèles comprennent déjà les champs de réservation courants, vous n'avez donc pas à partir de zéro. Cependant, si vous préférez créer votre formulaire à partir de zéro, choisissez plutôt le modèle « Formulaire vierge ».

Si vous ne souhaitez pas configurer manuellement chaque champ mais que vous avez des exigences spécifiques, vous pouvez également laisser le générateur de formulaires IA WPForms s'en charger à votre place.

Il suffit de passer la souris sur le bouton violet « Générer avec l'IA » et de cliquer sur « Générer un formulaire ». Vous arriverez alors sur l'écran du générateur de formulaires IA. C'est là que vous décrivez le type de formulaire que vous souhaitez.

Vous pouvez saisir votre propre invite ou choisir parmi les suggestions à gauche. Une fois que vous avez cliqué sur « Générer », l'IA prend quelques secondes pour créer votre formulaire.

À partir de là, vous pouvez modifier la mise en page du formulaire, ajouter/supprimer de nouveaux champs et effectuer d'autres personnalisations. Une fois que vous êtes satisfait de votre formulaire, cliquez simplement sur le bouton Enregistrer.

Étape 4 : Ajoutez le champ Carte à votre formulaire

Voici maintenant la partie amusante : ajouter la carte interactive afin que les visiteurs puissent voir tous vos emplacements en un coup d'œil et choisir celui qui leur convient le mieux.

Dans le générateur de formulaires, faites défiler vers le bas jusqu'à la section Champs avancés située à gauche. Vous y trouverez le champ Carte. Faites-le glisser dans l'aperçu de votre formulaire à droite.

Je place généralement la carte en haut du formulaire afin que les gens puissent voir immédiatement les options qui s'offrent à eux, mais vous pouvez la positionner où bon vous semble, selon votre flux.

Une fois le champ Carte en place, cliquez dessus pour ouvrir le panneau Options de champ à gauche. Faites défiler vers le bas jusqu'à ce que vous voyiez la section Emplacements. C'est là que vous ajouterez tous vos bureaux, centres de service ou lieux de rendez-vous.

Dans le champ Adresse, commencez à saisir l'adresse de votre premier emplacement. Au fur et à mesure que vous tapez, des suggestions de saisie automatique s'affichent. Cliquez sur celle qui convient pour la sélectionner. Cela garantit que l'emplacement est correctement épinglé sur la carte.

Ensuite, donnez un nom personnalisé à cet emplacement. Quelque chose comme « Bureau du centre-ville » ou « Centre de services principal » convient parfaitement. Ce nom apparaîtra lorsque les visiteurs cliqueront sur le marqueur de la carte, alors veillez à ce qu'il soit clair et reconnaissable.

Vous pouvez également ajouter une description si vous souhaitez inclure des informations supplémentaires telles que les heures d'ouverture, les coordonnées ou des remarques particulières. J'ai trouvé cela utile lorsque les sites proposent des services ou des horaires différents.

Pour ajouter d'autres emplacements, cliquez sur l'icône plus (+) située juste en dessous de votre premier emplacement. Un nouvel ensemble de champs apparaîtra. Répétez le même processus : saisissez l'adresse, sélectionnez-la dans la liste de saisie semi-automatique, ajoutez un nom et remplissez la description si nécessaire.

Continuez à ajouter des emplacements jusqu'à ce que tous les bureaux ou centres de services que vous souhaitez figurer sur la carte y soient inclus. Il n'y a pas de limite stricte, donc que vous ayez cinq ou quinze emplacements, vous pouvez tous les ajouter.

Une fois que vous avez terminé, votre carte affichera automatiquement tous les emplacements avec des marqueurs individuels. Les visiteurs pourront cliquer sur chacun d'eux pour voir le nom et la description que vous avez ajoutés.

Personnalisez les marqueurs cartographiques pour chaque emplacement

Maintenant que vous avez ajouté vos emplacements, vous pouvez mettre chacun d'entre eux en valeur en personnalisant les marqueurs de carte. C'est là que vous pouvez ajouter une touche personnelle à votre carte et aider les visiteurs à distinguer vos emplacements en un coup d'œil.

Dans la section Emplacements sous Options de terrain, vous remarquerez un menu déroulant Icône à côté de chaque emplacement que vous avez ajouté. Cliquez sur le menu déroulant et vous verrez deux choix : Icône ou Image.

Si vous sélectionnez « Icône », vous pouvez choisir parmi des centaines d'icônes Font Awesome. J'opte généralement pour des marqueurs simples, tels que des épingles de carte ou des icônes de bâtiments, mais vous disposez également d'options telles que des tasses à café, des hôpitaux ou des mallettes si vous recherchez quelque chose de plus spécifique.

Juste à côté du champ icône, vous verrez un sélecteur de couleurs. Cliquez dessus pour modifier la couleur du marqueur. Je trouve cela particulièrement utile lorsque vous avez différents types d'emplacements. Par exemple, vous pouvez utiliser le bleu pour les bureaux, le vert pour les magasins de détail et le rouge pour les lieux d'événements.

Si vous préférez utiliser votre propre graphique, sélectionnez Image et téléchargez un marqueur personnalisé. Cela fonctionne très bien si vous souhaitez mettre en avant votre marque ou utiliser un élément qui représente vraiment votre entreprise.

Vous pouvez également régler la taille des marqueurs à l'aide du menu déroulant Taille. Je règle généralement les miens sur Moyen ou Grand afin qu'ils soient faciles à repérer sur la carte, surtout si vous affichez plusieurs emplacements à la fois.

Une fois tous vos marqueurs personnalisés, votre carte aura un aspect soigné et sera facile à parcourir. Les visiteurs pourront voir exactement où se trouve chaque lieu et quel type de service ou d'installation il représente.

Activer la sélection de l'emplacement pour les réservations

Maintenant que vous avez configuré votre carte avec plusieurs emplacements, il est temps de rendre ces emplacements sélectionnables afin que les visiteurs puissent choisir où ils souhaitent réserver.

Dans le panneau d'options du champ Carte, recherchez le bouton Afficher la liste des emplacements et activez-le. Cela affiche toutes vos adresses d'emplacement dans une liste claire juste en dessous de la carte.

Vous remarquerez immédiatement qu'une option utile apparaît en dessous : l'option Autoriser la sélection de l'emplacement. (Cette option n'apparaît qu'une fois que vous avez ajouté au moins deux emplacements à votre carte.) Activez-la également.

Une fois ces modifications effectuées, voici ce qui se passe sur l'interface utilisateur. Des boutons radio apparaissent désormais à côté de chaque emplacement dans la liste située sous votre carte.

Les visiteurs peuvent cliquer sur n'importe quel endroit pour le sélectionner comme lieu de réservation préféré. La carte se met à jour pour mettre en évidence leur choix, indiquant ainsi clairement où ils se rendront.

Désormais, lorsqu'une personne soumet le formulaire, le lieu sélectionné est enregistré avec toutes les autres informations relatives à la réservation. Vous verrez exactement quel bureau, centre de services ou lieu a été choisi.

Configurer les paramètres d'affichage de la carte

Maintenant, affinons l'apparence et le comportement de votre carte. Cette étape vous permet de contrôler les commandes qui apparaissent sur la carte et la manière dont les visiteurs peuvent interagir avec elle.

Pour commencer, cliquez sur l'onglet Avancé dans les options du champ Carte. C'est là que vous pouvez vraiment personnaliser l'expérience. Sous Paramètres de présentation, vous verrez des boutons pour différentes commandes de carte.

Si vous souhaitez une interface plus épurée, vous pouvez masquer des éléments tels que les commandes Plein écran, Type de carte ou Street View. Ensuite, faites défiler vers le bas jusqu'à Paramètres interactifs. C'est ici que vous décidez du niveau de contrôle dont disposent les visiteurs sur la carte elle-même.

Si vous souhaitez simplifier les choses et éviter tout défilement ou glissement accidentel, vous pouvez désactiver les options « Draggable » (Glissable) ou « Scroll to Zoom » (Défilement pour zoomer). J'ai trouvé cela utile pour les formulaires où vous ne voulez pas que les utilisateurs soient distraits par le défilement.

Avant de continuer, veillez à activer l'option « Afficher les vignettes dans les entrées ». Cela ajoute un petit aperçu cartographique à vos entrées de formulaire dans le tableau de bord WordPress, ce qui permet de voir très facilement l'emplacement sélectionné par une personne sans avoir à ouvrir l'entrée complète.

Étape 5 : Configurer les notifications et les confirmations

Une fois votre formulaire de réservation multi-sites prêt, prenez quelques minutes pour configurer les notifications et les confirmations avant de le mettre en ligne. Commencez par vous rendre dans Paramètres » Notifications dans le générateur de formulaires.

Par défaut, WPForms envoie une notification à votre adresse e-mail d'administrateur WordPress chaque fois que quelqu'un soumet le formulaire. Vous pouvez modifier les paramètres de notification par défaut, tels que l'objet, ou changer les adresses e-mail des destinataires si nécessaire à partir d'ici.

Si vousutilisez les balises intelligentes, vous pouvez également envoyer un e-mail à l'adresse de l'utilisateur lorsqu'il soumet un formulaire, afin de lui faire savoir que vous l'avez bien reçu et que vous le contacterez rapidement.

Cela vaut particulièrement pour les formulaires multi-emplacements dans WordPress. Pour obtenir de l'aide concernant cette étape, consultez notre documentation surla configuration des notifications de formulaire dans WordPress.

Une fois cela fait, il suffit de vous rendre dansla section Confirmationsdu menuParamètrespour configurer les réponses aux soumissions de formulaires réussies. Vous avez ici trois options :

• Message : affiche un simple message de remerciement directement sur la même page. J'utilise cette option lorsque je souhaite que les choses restent rapides et simples.
• Afficher la page : redirige les visiteurs vers une page spécifique de votre site, telle qu'une page de confirmation détaillée indiquant les étapes suivantes ou les coordonnées.
• Aller à l'URL (redirection) : redirige les utilisateurs vers une URL externe, ce qui est utile si vous utilisez un système de réservation tiers ou une page d'accueil personnalisée.

Choisissez celui qui correspond le mieux à votre flux de travail. Si vous optez pour l'option « message », vous pouvez modifier le texte par défaut pour le rendre plus spécifique, par exemple : « Merci d'avoir réservé chez nous ! Nous vous enverrons sous peu un e-mail de confirmation à l'adresse que vous nous avez fournie. »

Pour obtenir de l'aide concernant d'autres types de confirmation, consultez notre documentation surla configuration des confirmations de formulaire.

Étape 6 : Publiez votre formulaire de réservation multi-sites

Une fois votre formulaire de réservation multi-sites prêt, il est temps de le mettre en ligne sur votre site afin que les visiteurs puissent l'utiliser. WPForms vous permet d'ajouter vos formulaires à plusieurs endroits de votre site web, notamment sur vos pages, vos articles de blog etvos widgets de barre latérale.

Cliquez sur le bouton « Intégrer » en haut du générateur de formulaire. Une fenêtre contextuelle apparaîtra avec deux options : vous pouvez soit créer une nouvelle page, soit ajouter le formulaire à une page existante.

Si vous créez une page dédiée aux réservations, cliquez sur Créer une nouvelle page. Donnez un titre à votre page, par exemple « Prendre rendez-vous » ou « Planifier une visite », puis cliquez sur C'est parti !

WPForms ouvrira l'éditeur de blocs WordPress avec votre formulaire déjà intégré. À 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.

Il suffit de cliquer sur la zone autour du formulaire intégré dans l'éditeur de page pour ouvrir un nouveau panneau à droite. Vous y trouverez toutes les options de style de base et avancées pour WPForms.

Pour styliser rapidement votre formulaire, vous pouvez sélectionner un thème prêt à l'emploi dans la section Thème du formulaire. Dans cet exemple, j'utilise le thème Tranquil (qui est l'un de mes préférés).

N'hésitez pas à essayer d'autres thèmes ; vous avez beaucoup d'options. Si vous aimez expérimenter directement, vous pouvez également personnaliser manuellement les différents éléments du formulaire de manière plus précise.

Si la carte vous convient et que les champs du formulaire fonctionnent comme prévu, publiez la page. Votre formulaire de réservation multi-sites est désormais en ligne et prêt à recevoir des rendez-vous.

FAQ sur la création d'un formulaire de réservation WordPress multi-sites

Si vous configurez un formulaire de réservation multi-sites dans WordPress, vous vous posez probablement quelques questions. J'ai répondu ci-dessous aux questions les plus courantes afin de vous aider à tout faire fonctionner correctement.

Qu'est-ce qu'un formulaire de réservation multi-sites dans WordPress ?

Un formulaire de réservation multi-sites permet aux visiteurs de choisir parmi plusieurs emplacements physiques lorsqu'ils prennent rendez-vous ou effectuent une réservation. Au lieu de créer des formulaires distincts pour chaque bureau ou site, vous pouvez utiliser un seul formulaire avec une carte interactive qui affiche tous vos emplacements à la fois.

Cela est particulièrement utile si vous gérez une entreprise disposant de plusieurs centres de services, espaces événementiels ou lieux de rendez-vous. Les visiteurs peuvent voir où se trouve chaque lieu, choisir celui qui leur convient le mieux et réserver immédiatement.

En quoi le champ Carte facilite-t-il les formulaires de réservation ?

Le champ WPForms Map affiche tous vos emplacements sur une carte interactive à l'intérieur de votre formulaire. Les visiteurs peuvent zoomer, faire un panoramique et cliquer sur les marqueurs pour voir les détails de chaque emplacement.

Une fois qu'ils ont sélectionné un emplacement, ce choix est enregistré dans le formulaire soumis. Vous pouvez l'utiliser pour acheminer les réservations vers la bonne équipe, envoyer des e-mails de confirmation spécifiques à l'emplacement ou simplement organiser vos dossiers.

Puis-je personnaliser les marqueurs de carte pour chaque emplacement ?

Oui, c'est possible. Lorsque vous ajoutez des emplacements à votre champ Carte, chacun d'entre eux est représenté par un marqueur distinct sur la carte.

Vous pouvez personnaliser le titre, l'adresse et la description de chaque marqueur. Cela aide les visiteurs à comprendre ce qui différencie chaque emplacement (comme la disponibilité du stationnement, les horaires d'ouverture ou les services proposés).

Puis-je envoyer différentes notifications en fonction de l'emplacement sélectionné ?

Tout à fait. Vous pouvez configurer une logique conditionnelle dans les paramètres de notification de votre formulaire afin d'envoyer différents e-mails en fonction de l'emplacement sélectionné par le visiteur.

Par exemple, si quelqu'un réserve dans votre bureau du centre-ville, la notification est envoyée à votre équipe du centre-ville. S'il choisit le site du nord de la ville, elle est transmise à cette équipe.

Les clients peuvent-ils sélectionner plusieurs lieux dans une seule réservation ?

Pas avec un seul champ Carte. Le champ Carte est conçu pour permettre aux visiteurs de choisir un seul emplacement par soumission. Si votre modèle commercial nécessite la réservation de plusieurs emplacements à la fois, vous devrez utiliser des champs Dropdown ou Radio Button distincts pour chaque sélection.

Le champ Carte fonctionne-t-il sur les appareils mobiles ?

Oui, cela fonctionne très bien sur mobile. La carte est entièrement réactive, les visiteurs peuvent donc cliquer, zoomer et interagir avec elle comme ils le feraient sur un ordinateur de bureau.

J'ai testé cette fonctionnalité sur des téléphones et des tablettes, et l'expérience reste fluide. Vos visiteurs n'auront aucun mal à choisir un emplacement, quel que soit l'appareil qu'ils utilisent.

Puis-je utiliser le champ Carte avec les formulaires de paiement ?

Oui, c'est possible. Le champ Carte fonctionne avec les champs de paiement tels que Stripe ou PayPal Commerce.

Si vous facturez des montants différents en fonction du lieu, vous pouvez utiliser la logique conditionnelle pour ajuster le total.

Par exemple, les rendez-vous dans un certain endroit peuvent coûter plus cher à cause des installations haut de gamme ou des temps de service plus longs.

Ensuite, les fonctionnalités cachées de WPForms que vous ne connaissiez pas

WPForms est rempli d'outils et d'options qui ne sont pas immédiatement évidents mais qui peuvent améliorer de manière significative votre flux de travail et les formulaires que vous créez.

Consultez notre guide pour découvrir certaines de ces fonctionnalités cachées qui ont peut-être échappé à votre attention, mais qui pourraient vous aider à améliorer considérablement vos formulaires WordPress.

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.