Créez un système de réservation sur Webflow avec Jotform pour votre restaurant

Si vous cherchez un nouveau système de réservation simple pour votre restaurant et que vous n’êtes pas très agile avec le digital, vous êtes au bon endroit !

Dans cet article nous nous souhaitons partager avec vous un outil qui vous permettra de mettre en place simplement et rapidement un système de réservation pour votre restaurant.

Jotform est un outil no-noce qui permet de créer des formulaires web personnalisés. Cet outil dispose de nombreuses fonctionnalités pour créer et gérer des formulaires simples comme complexes :

• Formulaire en page ou en carte
• Multiple formats de champs (email, téléphone, etc.)
• Multiple types de champs (listes, textes, chiffres, etc.)
• Personnalisation (couleurs, formes, images, etc.)
• Gestion des formulaires (tableur, statistiques, générateur pdf, etc.)
• Workflows (envois de mails, relances, notifications, etc.)
• Fonctionnalités avancées (système d’approbation, règles et conditions des forms, etc.)

Parmi toutes ces fonctionnalités, une nous intéresse en particulier pour créer un système de réservation pour restaurant : le calendrier

1. Créer un nouveau formulaire Jotform

Commencez par créer un formulaire à partir de zéro depuis votre interface principale Jotform.

• Cliquez sur “Créer un formulaire” en haut à gauche
• Choisissez de “Partir de zéro”
• Sélectionnez le “Formulaire classique”. Un formulaire en carte divisera votre système de système de réservation en plusieurs étapes, hors nous préférons rester sur une page unique pour simplifier et accélérer la réservation.

Vous arrivez à présent dans l’espace de création de formulaire de Jotform, qui va vous permettre de commencer à construire votre système de réservation personnalisé.

2. Paramétrer votre système de réservation

2.1 Ajouter des champs à renseigner pour la réservation

Plusieurs types de paramétrages vont être nécessaires pour construire ce système de réservation. Cela dépendra notamment de la manière dont vous travaillez pour la prise de réservation dans votre restaurant.

Commencez par ajouter de nouveau champ en cliquant sur le bouton “+ Ajouter un élément” à gauche de votre écran. L’ajout de champs se fait en drag and drop, ou glisser déposer, depuis les éléments vers le formulaire :

• Champs “Nom complet” pour récolter le nom de la réservation
• Éléments “Téléphone” ou “Texte court” pour récupérer le numéro de téléphone
• Ajouter un élément “Liste déroulante” pour récolter le nombre de couverts
• Enfin vous pourrez récupérer l’adresse mail avec l’élément “Email”

Pour rendre ces différents champs obligatoires vous devrez accéder aux paramètres de chaque champs en cliquant sur l’icone “⚙️ Propriétés” du champs. Activez ensuite le bouton “Obligatoire” des paramètres généraux.

2.2 Paramétrer le calendrier de réservation en ligne

C’est maintenant que vous pouvez ajouter le champs de réservation qui permettra a vos clients de choisir leur date de réservation ainsi que l’horaire. Pour cela, commencez par ajouter un élément “Rendez-vous” à votre formulaire. Accédez directement aux paramètres des rendez-vous pour paramétrer le système de réservation selon vos besoins :

Général‍

Ajoutez un titre, par exemple “Demande de réservation” et rendez ce champs obligatoire.

Disponibilité‍

Choisissez les intervalles horaires que vous souhaitez afficher. Par exemple toutes les heures, les demi-heures, les 15 minutes, etc. Vous pouvez personnalisez cette plage horaire. Vous pouvez ensuite paramétrer des plages de réservations. Par exemple de 12h00 à 14h30 puis de 19h00 à 21h30.

Limites

‍Vous avez la possibilité de programmer des jours glissants, par exemple pour n’afficher des possibilités de réservation que sur les 60 prochains jours. C’est d’ailleurs un moyen de limiter le no-show. Ajoutez également des plages de fermeture du restaurant pour ne pas proposer de réservations sur ces dates.

Avancés ‍

Pour que votre système de réservation fonctionne, vous devrez obligatoirement paramétrer votre “Type de rendez-vous” en “Groupe” et non en “Individuel” comme c’est le cas par défaut. Cela permettra à plusieurs clients de réserver sur le même horaire. Vous pouvez limiter le nombre de réservations sur chaque plage horaire. Par exemple pas plus de 20 réservations en ligne à la fois, sur le créneau de 12h00.

Définissez également :

• le fuseau horaire “Europe/Paris”
• le format de date Français MM/JJ/AAAA
• le jour de début de semaine au “Lundi”
• le format des heures “24 heures”

C’est bon, le nouveau système de réservation pour votre restaurant est programmé ! Passez au design maintenant.

2.3 Fonctionnalités de réservation avancées

Vous pouvez ajouter des fonctionnalités avancées à votre système de réservation, par exemple:

E-mails ‍

Pour paramétrer un mail de confirmation à la suite de la réservation

Conditions

Pour personnaliser la page de remerciement ou afficher des champs selon certains critères, etc.

Page de remerciement‍

Pour personnaliser votre page de remerciement sans condition, ou choisir de rediriger vers un URL.

Intégration ‍

Pour connecter votre système de réservation à des centaines d’outils no-code comme Gmail, Google Drive, Mailchimp, Airtable, Zapier, etc.

Flux d’approbation ‍

Pour créer un flux d’approbation selon certaines conditions de réservations. Par exemple, si vous souhaitez pouvoir confirmer ou refuser une réservation de plus de 5 personnes, alors qu’une réservation de moins de 5 personnes sera confirmée automatiquement.

2.4 Personnaliser le formulaire de réservation

Une fois le système de réservation de votre restaurant opérationnel sur le plan technique, il vous reste à le designer aux couleurs de votre charte graphique.

Pour accédez au fonctionnalités de personnalisation du système de réservation, cliquez en haut à droit sur le pinceau bleu. Une fenêtre de personnalisation va alors s’ouvrir, dans laquelle vous pourrez :

• Personnaliser les couleurs de la page, du formulaire, des boutons, de la police
• Personnaliser le style en modifiant les intervalles entre les sections, la taille de la police, etc.
• Choisir un thème prédéfini

Libre recourt à votre imagination pour créer un système de réservation qui s’intègrera parfaitement dans votre site Webflow.

3. Intégrer votre système de réservation dans Webflow

Passons à l’intégration du système de réservation dans le site Webflow de votre restaurant. Depuis votre formulaire Jotform, rendez-vous dans l’onglet “Publier”. Jotform vous propose d’intégrer votre système de réservation de différentes manières :

• Via un URL : vous pourrez directement intégrer ce lien dans un texte ou un bouton Webflow. Cet URL redirigera vos visiteurs depuis votre site vers la page de réservation.
• Via un embed : le système de réservation sera alors intégré tel quel dans Webflow et vos clients pourront directement interagir avec le formulaire depuis votre site. L’embed code est à intégrer directement dans un élément “Embed” depuis le designer de Webflow. Une fois le code ajouté à votre page, enregistrez et publiez votre site pour avoir accès au formulaire. Cet embed existe également en version IFRAME. Choisissez celle qui vous convient le mieux pour votre restaurant.
• Via un bouton flottant : le bouton flottant sera situé sur toutes les pages du site de votre restaurant et aura pour but de simplifier la réservation. Vous devrez intégrer l’embed code directement dans les paramètres de votre projet Webflow Projet Settings > Embed Code > Head Code. Enregistrez et publiez votre site pour tester votre bouton.
• Via un pop-up : le pop-up est une nouvelle page web qui va s’ouvrir à la suite d’un clic sur un lien de votre site. Ajoutez ce pop-up de la même manière que pour un embed classique.
• Via une lightbox : la lightbox fonctionne sur le même principe que le pop-up avec une fenettre qui s’ouvre, à la différente qu’il ne s’agit pas d’une page web. Le principe d’intégration est le même que pour un embed classique.