Personnaliser l'apparence des formulaires

Sélectionnez le « Formulaire de réservation étape par étape 2.0 » en cliquant sur le bouton « Continuer » sous le nom du formulaire et accédez à la nouvelle section Personnaliser.

Tout ce qui est nécessaire pour personnaliser le formulaire se trouve dans le menu de droite.

Le menu est divisé en trois parties :

1. Les paramètres (où vous configurez les polices et les couleurs globales)
2. Section (où, actuellement, vous ne pouvez configurer que la visibilité de la barre latérale et ses étiquettes)
3. Les étapes (où vous pouvez configurer individuellement les couleurs, les étiquettes, l'ordre des champs, les traductions et si certains champs seront obligatoires ou non).

Pour certains éléments, vous pouvez choisir s'ils seront affichés sur la réception ou non, et pour certaines sélections comme les lieux ou les employés, vous pouvez choisir s'ils seront obligatoires dans le processus de réservation ou non. Toutes les modifications sont visibles en temps réel, vous verrez donc les modifications dans l'aperçu dès qu'elles seront effectuées.

À chaque étape, dans le coin inférieur droit du menu latéral, vous pourrez accéder aux couleurs et voir quelles couleurs globales affectent quelle section de l'étape sélectionnée. Par exemple, à l'étape « Services » :

Comme mentionné ci-dessus, si le chargement de Google Fonts est en conflit avec les politiques du RGPD de votre pays, vous pouvez télécharger des polices et les charger localement.

Ici, vous pouvez définir les couleurs primaire et d'état, la couleur de la barre latérale, le contenu, les champs de saisie, les listes déroulantes, le calendrier et les boutons dans le formulaire.

Comme mentionné précédemment, si vous n'aimez pas certaines couleurs lorsque vous vous déplacez dans les étapes, n'oubliez pas de cliquer sur le bouton "Changer les couleurs" dans le coin inférieur droit du menu latéral.

Ce menu se compose des couleurs "Primaire", "Succès", "Avertissement" et "Erreur" qui peuvent être trouvées tout au long du formulaire.

Dans cette étape, la couleur "Primaire" définit le cercle d'étape actuel dans la barre latérale, la catégorie sur laquelle vous survolez lorsque vous cliquez sur la liste déroulante "Service", la couleur du prix du service et la couleur du prix pour chaque employé dans la liste déroulante "Employés" (n'oubliez pas que le prix des Services peut être différent par employé).

La couleur "Succès" définit la couleur de la vignette de l'employé (à moins que l'employé n'ait une photo de profil - dans ce cas, la photo sera affichée dans le menu déroulant "Employés").

Les couleurs « Sidebar » et « Contenu » sont assez basiques. Ici, vous définissez la couleur d'arrière-plan de la barre latérale et le contenu principal, ainsi que les couleurs du texte dans la barre latérale, le contenu principal et le texte de l'en-tête.

Veuillez noter que les couleurs d'arrière-plan des étapes de la barre latérale sont une nuance de la couleur d'arrière-plan de la barre latérale.

Cela définit les couleurs des listes déroulantes, leurs couleurs de bordure, les couleurs du texte de l'espace réservé et les couleurs de saisie sélectionnées.

Étant donné que la vue du calendrier ne peut pas être affichée dans la première étape, nous nous éloignerons de la section "Couleurs" dans les "Paramètres généraux", et nous passerons à "Étapes" (nous accéderons à l'étape "Date et heure").

La modification des couleurs de l'étape "Calendrier" vous permet de modifier les couleurs des cellules du calendrier (ces couleurs s'appliquent à la fois au calendrier et aux créneaux horaires, et par conséquent, les créneaux horaires disponibles ne sont pas visibles dans l'aperçu de la section "Personnaliser").

• Init Cell est l'arrière-plan et la couleur de bordure des cellules disponibles. Cette couleur s'applique également au champ « Fuseau horaire actuel » qui se trouve au-dessus du calendrier.
• Init Cell Text configure la couleur du texte des dates disponibles et le champ « Fuseau horaire actuel ».
• L'arrière-plan sélectionné de la cellule définit l'arrière-plan d'une cellule sélectionnée.
• Le texte sélectionné par cellule définit la couleur du texte d'une cellule sélectionnée.
• Cell Disabled Background s'applique aux dates non disponibles (jours de congé, jours complets).
• Cell Disabled Text configure la couleur du texte dans les cellules désactivées.

L'aperçu du formulaire développera automatiquement la section « Amener n'importe qui avec vous » où vous pourrez configurer les options, les étiquettes et les couleurs. N'oubliez pas que vous pouvez accéder aux couleurs à chaque étape en cliquant sur le bouton "Changer les couleurs" en bas à droite du menu de droite.

Lorsque vous accédez aux couleurs, accédez à la section « Boutons ». Là-dedans, vous pourrez configurer les couleurs suivantes :

• L'arrière-plan principal s'applique à tous les boutons principaux (boutons Continuer" et "Oui" à toutes les étapes).
• Le texte principal configure la couleur du texte dans les boutons principaux.
• L'arrière-plan secondaire modifie la couleur d'arrière-plan de tous les boutons secondaires (boutons "Non" à toutes les étapes).
• Le texte secondaire s'applique au texte des boutons secondaires.

Afin de modifier les couleurs des boutons secondaires et de comprendre pourquoi les couleurs basculent entre les couleurs d'arrière-plan et de texte, nous devrons revenir en arrière.

N'oubliez pas que nous configurons l'étape secondaire "Amener n'importe qui avec vous" à l'étape"Services", donc pendant que vous êtes dans la section Couleurs du menu de droite, il vous suffit de cliquer sur le bouton "<" à côté de "Couleurs", et vous serez redirigé vers le menu de personnalisation "Amener quelqu'un avec vous".

Là, cliquez sur « Options ».

Le paramètre de personnalisation de la section vous permet de masquer la barre latérale gauche du formulaire de réservation, de masquer l'en-tête (« Contact »), de masquer le téléphone de l'entreprise ou de masquer l'e-mail de l'entreprise (tous deux configurés dans Paramètres/Paramètres de l'entreprise) :

L'accès à la section Étiquettes vous permet également de modifier les étiquettes pour "+plus", "Contact" et "Menu Réduire".

Chaque étape du formulaire de réservation étape par étape peut être configurée individuellement via la section Personnaliser. Les options disponibles sont :

• Modification de l'ordre dans les étapes "Services" et "Vos informations"
• Configurer les champs pour qu'ils soient obligatoires ou non
• Choisir les types de boutons
• Modification des étiquettes par défaut pour toutes les étapes
• Accéder aux sous-étapes et configurer leurs options et étiquettes (le cas échéant)

Lorsque vous accédez à l'étape "Services", vous verrez les paramètres "Commande", "Options" et "Étiquettes", et ci-dessous, vous pourrez accéder aux sous-étapes "Amener n'importe qui avec vous" et "Paquets".

Dans la section "Ordre", vous pourrez modifier l'ordre des champs (par défaut, la liste déroulante "Service" est le premier champ, "Employés" est le deuxième champ et "Emplacements" est le troisième champ).

Vous pouvez réorganiser les champs avec une simple fonction de glisser-déposer.

La section "Options" vous permet de modifier le style du bouton "Continuer", de masquer les menus déroulants "Employés" et "Emplacements" et de les rendre obligatoires.

Si un champ est défini comme obligatoire, vous ne pourrez pas le masquer.

Dans les paramètres "Étiquettes" de chaque étape, vous serez en mesure de modifier toutes les étiquettes par défaut à cette étape, ainsi que de fournir des traductions pour ces étiquettes pour d'autres langues que vous avez ajoutées à Amelia.

Les étiquettes de langue proposées seront extraites des paramètres généraux d'Amelia, donc si vous n'ajoutez que la langue allemande, seule cette langue apparaîtra lorsque vous accéderez à chaque étiquette.

La capture d'écran suivante vous donnera une idée du fonctionnement de l'édition des étiquettes tout au long de la nouvelle section Personnaliser.

Le titre de chaque section est défini au-dessus des champs d'étiquette, donc dans l'exemple ci-dessous, la « Sélection de service » est le titre de l'étiquette que vous modifiez. Si le champ à côté de la zone d'entrée "Étiquette par défaut" est vide, le titre de l'étiquette sera appliqué en tant qu'étiquette (dans ce cas - "Sélection de service").

Nous modifierons certaines étiquettes ici, afin que vous voyiez comment elles sont appliquées. Chaque fois que vous modifiez une étiquette, vous la verrez modifiée en temps réel dans la fenêtre de prévisualisation à gauche.

N'oubliez pas que l'étiquette par défaut s'applique à la langue par défaut de WordPress. Amelia choisit cette langue s'il y a une traduction pour cette langue dans notre plugin, donc si vous voulez changer l'étiquette par défaut, elle ne sera pas toujours en anglais, mais dans votre langue.

Si votre langue n'est pas traduite en Amelia, vous pouvez continuer à changer les chaînes dans votre langue, afin que vos clients front-end voient tout dans votre langue. Il en va de même pour d'autres langues (allemand dans ce cas) - puisque la traduction allemande existe dans Amelia, si nous laissons les étiquettes allemandes vides, les chaînes par défaut seront extraites du fichier de traduction, mais vous pouvez toujours remplacer cela avec les étiquettes de la section Personnaliser.

Comme vous pouvez le voir sur la capture d'écran ci-dessus, les chaînes allemandes ne sont actuellement pas affichées. C'est parce que l'allemand est une langue supplémentaire ajoutée aux paramètres généraux d'Amelia. Si elle était définie comme la langue par défaut, nous aurions ajouté l'anglais comme langue supplémentaire, et l'ensemble du formulaire serait en allemand.

Afin de voir les étiquettes allemandes modifiées, nous devons changer la langue dans le menu déroulant "Langue" au-dessus de l'aperçu du formulaire.

Chaque étiquette vue à chaque étape peut être modifiée, il vous suffit de passer par les étapes et d'accéder à la section "Étiquettes" pour le faire.

Afin de modifier l'apparence, les étiquettes et les options du formulaire Paquets, vous devrez d'abord modifier les étapes de "Service" à "Paquet" en haut à gauche au-dessus de l'aperçu du formulaire.

Dans le menu de droite, vous remarquerez que les étapes sont un peu différentes des étapes lorsque vous personnalisez les étapes de service.

Afin de modifier l'étiquette de ce message, accédez au formulaire "Paquet" au-dessus de l'aperçu du formulaire et accédez à l'étape "Paquet" / Étiquettes / Titre de la sous-étape.

Le flux est exactement le même - vous pouvez naviguer dans le menu latéral et ajuster les couleurs, les options, les boutons et l'ordre de la section "Vos informations".

Il suffit de parcourir chaque section et de vérifier si les couleurs globales sont ce que vous voulez qu'elles soient dans le formulaire d'achat de l'emballage.

Comme mentionné au début de cette page, tous les nouveaux formulaires sont basés sur le formulaire de réservation étape par étape, de sorte que dans cette section, vous pouvez configurer le formulaire de réservation du catalogue avant que la fenêtre contextuelle de sélection de la date et de l'heure ne s'ouvre.

Une fois la date/heure (calendrier) ouverte, les options de personnalisation étape par étape 2.0 seront appliquées.

Tout comme avec les étapes du formulaire de réservation étape par étape 2.0, le formulaire de catalogue vous permet de modifier la police et la couleur, et de configurer chaque étape avant l'affichage du calendrier.

C'est le premier écran sur lequel vous atterrissez :

L'aperçu des services et des forfaits vous permet d'activer et de désactiver les options présentées dans cette fenêtre, de choisir les types de boutons et de modifier les étiquettes à cette étape.

Les « Détails du service » ou « Détails du paquet » sont la fenêtre qui affiche les détails d'un service une fois qu'un client clique dessus. La modification de cette étape vous permettra de modifier les options (ce qui va être affiché et à quoi ressembleront les boutons) et de modifier les étiquettes de cette étape.

Comme pour les formulaires de réservation précédents, la section de personnalisation « Formulaire de réservation de la liste des événements 2.0 » vous permet de modifier les étapes de la liste des événements.

L'étape « Liste des événements » vous fournit des options et des étiquettes que vous pouvez ajuster pour la première vue (capture d'écran ci-dessus). Vous pouvez masquer les filtres, le titre de l'étape (combien d'événements sont disponibles), l'image de l'événement, l'emplacement, la capacité, le prix et le statut. En outre, vous pouvez modifier les types de tous les boutons présents dans cette étape.

L'option Étiquettes vous permet de modifier les étiquettes par défaut affichées dans la liste.

Le bouton "Informations sur les événements" est ce que le bouton "Lire la suite" s'ouvre dans une fenêtre contextuelle lorsqu'un client clique dessus.

Dans la section Options, vous pouvez masquer la galerie, l'emplacement, la capacité des emplacements, le prix, le statut, la description, etc. Vous pouvez également styliser les boutons là-dedans.

Dans la section Étiquettes, vous pouvez modifier les étiquettes affichées à cette étape.

Toutes les autres étapes du formulaire sont similaires, nous ne les passerons donc pas toutes. Cet article est déjà assez détaillé.

Il vous suffit de suivre toutes les étapes de la section Personnaliser et de configurer ce que vous voulez masquer, modifier, réorganiser.

Pendant l'aperçu "Connexion", vous pouvez modifier les étapes suivantes :

• Connectez-vous, où vous pouvez modifier le type de bouton "Se connecter" et les étiquettes qui apparaissent à cette étape.
• Lien d'accès, où le type de bouton "Envoyer" peut être modifié, ainsi que les étiquettes qui apparaissent dans cette étape.
• Access Link Success vous permet de ne modifier les étiquettes affichées sur la page que lorsque le lien d'accès est envoyé avec succès au client.
• Définissez un nouveau mot de passe, où vous pouvez configurer le type pour le bouton « Définir le mot de passe » et modifier les étiquettes de cette étape.

Le passage à "Panneau" dans le menu déroulant au-dessus de l'aperçu "Connexion" fera s'avoir le panneau client réel pour la personnalisation

Les étapes incluses pour le panel client vous fournissent les pages suivantes dans le panneau :

• Profil (montré dans la capture d'écran ci-dessus) - Vous permet de modifier l'ordre des champs, de modifier les étiquettes incluses dans cette étape, de rendre certains champs obligatoires (ou de les masquer s'ils ne le sont pas) et de sélectionner les types de boutons pour les boutons "Supprimer le profil", "Enregistrer les modifications" et "Modifier le mot de passe". En outre, il y a une sous-étape contextuelle "Supprimer le profil" qui apparaît lorsqu'un client va supprimer son profil. Cette sous-étape vous permet de modifier les types de boutons et les étiquettes affichés dans cette fenêtre contextuelle.
• Rendez-vous (capture d'écran ci-dessous) - Ouvre une page distincte dans le panneau, où vos clients prévisualisent les rendez-vous qu'ils ont réservés. En plus des options par défaut "Options" et "Étiquettes", les fenêtres contextuelles d'étape pour l'annulation et la reprogrammation des rendez-vous vous offrent des options pour modifier ces fenêtres contextuelles (modifier les types de boutons et les étiquettes, exclure le fuseau horaire dans le calendrier ou l'"heure de fin" dans le calendrier).
• Événements (capture d'écran ci-dessous) - Semblable à l'étape "Rendez-vous", la page "Événements" (dans le panneau) permet à vos clients de voir les événements qu'ils ont réservés avec vous. Ici, vous pouvez modifier les options, les étiquettes et la fenêtre contextuelle « Annuler l'événement ».
• Paquets (capture d'écran ci-dessous) - "Options" et "Étiquettes" vous permettent de masquer certains champs de cette page de panneau (fuseau horaire et filtres spécifiques) et de modifier les étiquettes prédéfinies de cette page.
• L'étape Forfaits/Rendez-vous (capture d'écran ci-dessous) vous offre des capacités de personnalisation complètes pour les rendez-vous spécifiques liés aux forfaits qui ont été réservés et/ou qui sont disponibles pour la réservation par le biais d'un forfait. Outre les sections "Options" et "Étiquettes" où vous pouvez modifier les types de boutons, masquer l'employé et le prix, et où vous pouvez modifier les étiquettes de cette étape, vous pouvez également modifier les fenêtres contextuelles pour réserver des rendez-vous supplémentaires au sein du forfait et confirmer que le forfait doit être annulé.