Formulaire classique (formulaire de réservation étape par étape)

Cet article explique comment personnaliser le formulaire de réservation classique, étape par étape.

Si vous ne savez pas quel formulaire de réservation utiliser, consultez Types de formulaire de réservation / Choisir un formulaire de réservation.

Comment personnaliser le formulaire de réservation classique

Vous pouvez personnaliser la mise en page, les couleurs, les libellés, les champs et les textes de chaque étape de votre formulaire de réservation. Pour modifier le formulaire :

1. Allez dans Bookly > Apparence.

2. Choisissez Step by step form.

3. Ajustez les réglages du formulaire dans les onglets disponibles.

4. Cliquez sur Enregistrer.

Personnaliser les couleurs

Utilisez le sélecteur de couleurs pour ajuster les couleurs principales du formulaire de réservation classique afin qu’il s’accorde avec le design de votre site.

Après avoir mis à jour les couleurs, cliquez sur Enregistrer.

Modifier les textes et ajouter des détails de réservation

Vous pouvez modifier le texte affiché à chaque étape de la réservation.

Cliquez sur le texte souligné pour ouvrir la fenêtre d’édition. Saisissez votre texte et ajoutez des codes tels que {service_name}, {staff_name} ou {total_price} pour afficher dynamiquement les détails de la réservation.

Saisissez { et choisissez un code parmi les suggestions proposées dans l’éditeur. Cliquez sur Appliquer, puis sur Enregistrer.

Exemple :

Vous avez choisi de réserver {service_name} avec {staff_name} le {service_date} à {service_time}.
Le prix du service est {service_price}.
Veuillez indiquer vos coordonnées dans le formulaire ci-dessous pour poursuivre la réservation.

Pour une description des codes, consultez Tous les espaces réservés. Tous les codes qui y figurent ne sont pas disponibles dans la section Apparence ; consultez les suggestions de l’éditeur pour vérifier quels codes vous pouvez insérer.

Avancé : contenu conditionnel et répété

Utilisez des blocs conditionnels pour afficher un texte uniquement lorsqu’une information de réservation spécifique existe.

L’exemple suivant affiche les suppléments sélectionnés uniquement lorsqu’ils sont présents. Le code {extras} nécessite Service Extras Add-on.

{#if extras} Éléments supplémentaires : {extras}{/if}

Si vous utilisez des add-ons permettant plusieurs rendez-vous dans une même session de réservation, utilisez un bloc répété pour afficher les détails de chaque rendez-vous de la réservation. Le contenu du bloc est répété une fois pour chaque rendez-vous.

Exemple :

{#each appointments as appointment}
Service : {appointment.service_name}
Membre de l'équipe : {appointment.staff_name}
Date et heure : {appointment.appointment_date} à {appointment.appointment_time}
{/each}

Vérifiez la version mobile

Si vous modifiez ou traduisez les intitulés de boutons, vérifiez également la version mobile du formulaire. Ouvrez Bookly Apparence en affichage mobile, mettez à jour les textes des boutons pour chaque étape, puis enregistrez les modifications.

Masquer des étapes ou des champs

Pour masquer des champs tels que Catégorie, Service ou Employé, ajustez les réglages du bloc du formulaire de réservation ou du shortcode lorsque vous ajoutez le formulaire à une page. Si vous masquez un champ obligatoire, sélectionnez une valeur par défaut pour ce champ.

La possibilité de masquer une étape de réservation dépend de l’étape et de vos paramètres Bookly. Par exemple, pour masquer l’étape Paiement, désactivez tous les moyens de paiement, y compris le paiement hors ligne, dans Bookly Paramètres > Paiements. Consultez Comment supprimer l’étape de paiement du formulaire de réservation ?.

En savoir plus : Publier le formulaire de réservation

PARCOURIR LES QUESTIONS FRÉQUENTES

Comment changer la couleur ou la taille de police d’un message d’avertissement ?

Comment masquer les champs Catégorie / Service / Employé dans le formulaire de réservation ?

Comment changer la couleur du texte dans le formulaire de réservation Bookly ?

Comment supprimer l’étape de paiement du formulaire de réservation ?

Le bouton Suivant ne fonctionne pas dans le formulaire de réservation