Créer un formulaire Sitecore intelligent avec différentes pages

Sitecore Forms est un module qui a été introduit avec Sitecore 9 pour remplacer WFFM (Web Forms For Marketeers) et offre une approche plus moderne et intuitive pour créer des formulaires Web qui enregistrent et rapportent les informations fournies par les utilisateurs sur votre site Web.

Il existe de nombreux articles (en anglais !) pour vous aider à créer et à présenter un formulaire. Par exemple, Introduction to Sitecore 9 Forms de Jock’s. Nous allons ici nous concentrer sur une méthode pour ajouter de la logique et plusieurs pages dans un seul formulaire.

imaginons qu’avant que vous souhaitiez afficher votre formulaire principal, l’utilisateur doit répondre à certaines questions de sélection, et en fonction de ses réponses, nous voulons afficher le formulaire principal, un message ou une page de connexion. Je vais vous montrer ici comment cela peut être fait dans un seul formulaire Sitecore en utilisant une combinaison de pages et de logique conditionnelle. Bien sûr, il existe d’autres façons de faire ce processus, comme avoir plusieurs pages Sitecore au lieu de plusieurs pages dans un formulaire Sitecore, mais mon objectif ici est de vous montrer à quel point cela fonctionne avec la logique introduite par les conditions des éléments de formulaire.

Comme condition préalable, et afin de pouvoir avoir les éléments pour pouvoir se connecter aux différentes pages dans un formulaire, vous devrez d’abord installer Sitecore Forms Extensions, un complément très utile de Sitecore Forms que vous trouverez sur le Sitecore Marketplace.

Maintenant, lorsque tout est en place, nous pouvons commencer à créer notre formulaire.

Dans le tableau de bord Sitecore, cliquez sur le module Forms

Puis sur le bouton Create

Donnez un nom à votre formulaire et choisissez le meilleur template (“Blank form” si vous ne disposez d’aucun modèle de formulaire)

Votre nouveau formulaire est maintenant prêt à être créé.

Dans notre exemple, nous aurons quatre différentes pages:

• La page de questions d’introduction (FieldName: ScreeningPage), avec deux boutons radio et un bouton submit :
  • Radio Button: “Do you meet the requirements to be our customer ? Yes / No” (Répondez-vous aux exigences pour être notre client ? Oui/Non)
    • FieldName: IsRequirementsOK
  • Radio Button: “Are you a returning customer? Yes / No” (êtes vous déjà un de nos clients ? Oui/Non)
    • Fieldname: IsReturningCustomer
  • Submit Button: “Next”
    • FieldName: ScreeningNOKBtn
    • CSS class: btn
  • Submit Button: “Next”
    • FieldName: LoginBtn
    • CSS class: btn
  • Submit Button: “Next”
    • FieldName: RegisterBtn
    • CSS class: btn

• Une page pour afficher le message (FieldName: “RequirementsNOKPage”) pour les utilisateurs qui ne remplissent pas les conditions pour être notre client
  • Text field: “Sorry. Come back when you meet our requirements” (“Désolé. Revenez lorsque vous répondez à nos exigences“)

• Un formulaire de connexion (FieldName: “LoginPage”) pour les clients existants
  • Input field: “Username”
  • Input field: “Password”
  • Submit button: “Login”

• Un formulaire d’enregistrement (Fieldname: “RegistrationPage”) pour les nouveaux clients
  • Input field: “Username”
  • Email field: “Email”
  • Submit button: “Register”

Créez d’abord ces quatre pages avec les éléments correspondants. Assurez-vous d’utiliser l’élément de formulaire Page pour séparer ces quatre pages.

Sur la première page, nous allons maintenant ajouter des actions aux trois boutons.

Selectionnez le premier bouton, celui appelé ScreeningNOKBtn. Dans le panel de propriétés (sur la droite de l’ecran), ajouter une action Submit appelée “Show Form Page”

Sélectionnez “RequirementsNOKPage” dans le dialogue “Show Form Page”.

Apply your changes andAppliquez vos modifications et faites de même pour les deux autres boutons:

• LoginBtn ouvrira la page de formulaire appelée LoginPage
• RegisterBtn ouvrira la page de formulaire appelée RegisterPage

Donc, pour le moment, si nous ouvrons le formulaire tel quel, la première page affichera des boutons radio et trois boutons d’envoi. Chacun d’eux ouvre une page différente. Nous voulons maintenant masquer les boutons Submit qui ne sont pas pertinents en fonction des actions des utilisateurs. Par exemple, si l’utilisateur clique sur “Non” sur la première question, nous souhaitons masquer les boutons liés aux pages de connexion et d’inscription.

Cette logique se fait dans la partie Conditions de chaque bouton.

Une Condition a une Règle et une Action. Si la règle est satisfaite, l’action est exécutée. Dans notre cas, les Règles seront au choix de l’utilisateur (par exemple si l’utilisateur a cliqué sur “Oui” dans la première question), les Actions seront le bouton à afficher. Sachez que si nous demandons au formulaire d’afficher un bouton, cela implique que tous les autres boutons seront masqués!

Chaque condition est évaluée chaque fois que le formulaire est créé ou mis à jour dans Sitecore.

Créons notre première condition pour le premier bouton d’envoi. Sélectionnez le bouton ScreenBtn, et sur ses propriétés, cliquez sur “Edit conditions”. Dans la boîte de dialogue “Edit conditions”, cliquez sur “Add condition”.

Vous pouvez combiner un nombre illimité de règles et d’actions, ici nous afficherons le ScreenBtn uniquement si les utilisateurs ont cliqué sur “Non” à la première question ou ont laissé cette question sans réponse.

Appliquez vos modifications et sélectionnez le deuxième bouton de soumission, LoginBtn. Celui-ci montrera si les exigences sont OK (“Oui” sur la première question) et l’utilisateur est un client de retour (“Oui” sur la deuxième question). Il est important que les deux règles soient respectées, assurez-vous donc que le bouton “AND” est visible.

Appliquez vos modifications et sélectionnez le troisième bouton d’envoi, RegisterBtn. Celui-ci montrera si les exigences sont OK (Oui sur la première question) et l’utilisateur n’est pas un client fidèle (Non sur la deuxième question, ou encore mieux, pas Oui (“is not equal to Yes“), donc nous nous occupons également du cas où l’utilisateur n’a pas ne réponds pas à cette question).

Vous pouvez maintenant voir les résultats lorsque vous prévisualisez votre formulaire. Il n’y a qu’un seul bouton “Suivant” visible sur la première page du formulaire, et il affiche la page correspondante, soit le message, soit l’un des autres formulaires.