XM Cloud Forms Builder / Blogs / Perficient

Sortie de XM Cloud Forms Builder

Composable Forms Builder est désormais disponible avec Sitecore XM Cloud. Jetons un coup d’œil à l’un des modules les plus attendus de la plate-forme cloud hybride sans tête phare de Sitecore.

Historiquement, nous avions un module externe appelé Web Forms for Marketers que l’on pouvait installer sur son instance Sitecore afin d’obtenir la fonctionnalité souhaitée de collecte des entrées des utilisateurs. Ce module a ensuite été bien repensé et retravaillé, pour trouver plus tard sa réincarnation sous le nom de Formulaires Sitecore, partie intégrante des plateformes Sitecore depuis la version 9. Les clients appréciaient cette solution intégrée fournie avec leur DXP principal, cependant avec l’architecture sans tête de XM Cloud il n’y avait plus de serveurs CD, donc aucun endroit approprié pour sauvegarder l’utilisateur collecté. saisir. Il y avait clairement un besoin pour une solution de formulaires SaaS, et cette lacune a finalement été comblée !

Un fait intéressant: jusqu’à la sortie de Forms avec XM Cloud, la solution composable pertinente pour interagir avec les visiteurs était Sitecore Send, et de ce fait, Sitecore a logiquement décidé de dériver le module XM Cloud Form de la base de code Sitecore Send (car il possédait déjà de nombreuses fonctionnalités souhaitées), plutôt qu’à partir des anciens formulaires Sitecore.

Alors, qu’est-ce qu’on a ?

L’objectif principal était de lancer un nouveau produit Forms en tant que solution SaaS qui s’intègre à n’importe quelle interface Web personnalisée. Le véritable défi était de combiner la simplicité ultime de création et de publication de formulaires pour la majorité des professionnels du marketing avec la personnalisation de cette offre optimisée pour les projets sans tête typiques. À mon avis, malgré les complexités, c’est bien réussi !

Jetons d’abord un coup d’œil à ses capacités souhaitées/attendues :

• Bibliothèque de modèles
• Travailler avec le générateur de composants
• Utiliser des sources de données externes pour pré-remplir à partir de
• Rapports et analyses
• Possibilité de créer des formulaires en plusieurs étapes et plusieurs pages (pas encore disponible avec la version GA)
• Logique conditionnelle (pas encore disponible non plus)

On pourrait se demander, s’il n’y a pas de serveur de CD ou de backend géré, où va la soumission ? Il peut y avoir du stockage fourni par SaaS ainsi que l’interface requise pour gérer les entrées collectées. Incorrect! Il y a aucun. C’était en fait une décision judicieuse de la part des développeurs de Sitecore qui ont décidé de faire d’une pierre deux coups : économiser des efforts pour ne pas créer une UI/UX universelle avec l’outil qui satisfera difficilement les besoins variables d’un éventail aussi diversifié de clients/industries, qui être difficilement réalisable. Mais la deuxième raison est plus légitime : évitez de stocker des données d’informations personnellement identifiables, afin qu’elles ne soient pas traitées dans XM Cloud, laissant les décisions de mise en œuvre particulières à la discrétion des clients.

Cela se fait de manière SaaS très composable, vous proposant de configurer un webhook, transmettant une charge utile de données collectées au système souhaité de votre choix.

Webhooks

Lors de la soumission du formulaire, le webhook est déclenché pour soumettre les données collectées au système configuré, il peut s’agir d’une base de données, d’un CRM, d’un CDP ou de tout autre backend pour un formulaire. De plus, vous pouvez partager des webhooks afin que plusieurs formulaires puissent utiliser le même webhook configuré. À l’instar des anciens formulaires qui soumettaient leurs données dans xDB, le choix le plus logique serait d’utiliser le puissant Sitecore CDP pour traiter ces données. Cependant, avec les webhooks, le cas d’utilisation des formulaires XM Cloud devient véritablement universel, et si vous le combinez avec Sitecore Connect, cela pourrait s’étendre à n’importe quelle intégration fournie par celui-ci.

Les webhooks sont livrés avec plusieurs options d’authentification, couvrant n’importe lequel exigence potentielle du backend.

Voyons-le en action !

L’éditeur ressemble à XM Cloud Pages – style, mise en page et éléments d’interface utilisateur similaires :

Tout d’abord, reprenons la mise en page en la faisant simplement glisser et en la déposant sur un canevas. Pour plus de simplicité, j’ai sélectionné la mise en page pleine largeur. Une fois sur place, vous pouvez commencer à déposer les champs vers une présentation choisie :

Champs disponibles :

• Bouton d’action
• E-mail
• Téléphone
• Texte court
• Texte long
• Sélectionner (liste déroulante unique)
• Sélection multiple
• Date
• Nombre
• Radio
• Case à cocher (célibataire)
• Groupe de cases à cocher
• termes et conditions
• reCAPTCHA

Outre les éléments de capture d’entrée, vous pouvez également définir des éléments d’interface utilisateur « passifs » par le dessous Basique extenseur :

• Texte
• Entretoise
• Médias sociaux – un ensemble de boutons cliquables vers les réseaux sociaux que vous définissez
• Image, qui possède un ensemble assez complet d’options de source :

Regardez la variété d’options de configuration sur le panneau de droite. Vous pouvez définir :

• Couleur d’arrière-plan dans ce champ – transparent est la couleur par défaut. Vous pouvez même mettre une image de fond à la place !
• Paramètres pour les ombres de la zone de champ qui définissent également les longueurs horizontales et verticales, les rayons de flou et de propagation, et bien sûr – la couleur de l’ombre
• Texte d’aide affiché ci-dessous et demandant des conseils non évidents que vous souhaiteriez qu’un utilisateur suive
• Pour les zones de texte, vous pouvez définir des valeurs d’espace réservé et de pré-remplissage
• Le champ pourra être rendu obligatoire et/ou masqué par les cases à cocher correspondantes
• La validation est contrôlée par un modèle d’expression régulière et une limite de longueur de caractères
• De plus, vous pouvez styliser à peu près tout : le champ lui-même, l’étiquette, l’espace réservé et le texte d’aide, ainsi que définir le remplissage global.

Veuillez noter qu’à l’heure actuelle, le formulaire modifié est à l’état de brouillon. En cliquant Sauvegarder Le bouton vous suggère d’exécuter votre formulaire dans un aperçu avant de l’enregistrer, et cela a été très utile – dans mon cas, j’ai laissé le champ Nom complet comme champ caché par erreur, et le mode aperçu m’a immédiatement montré cela. Après avoir corrigé la visibilité, je suis prêt à procéder à des économies.

L’écran d’accueil des formulaires affiche tous les formulaires disponibles. Pour activer, je dois d’abord créer un Webhook, puis l’attribuer au formulaire. De plus, vous définissez l’action que vous souhaitez effectuer lors de la soumission du webhook – rediriger vers l’URL, afficher un message de réussite ou peut-être – ne rien faire, ainsi que configurer le message d’échec de soumission.

Cette fois, le bouton Activer fonctionne bien et mon formulaire est répertorié comme Actif. À partir de maintenant, vous ne pouvez plus modifier les champs et vous ne pouvez plus modifier le statut d’Actif. Vérifiez donc toujours votre formulaire dans Aperçu avant de le publier.

Bizarrement, vous ne pouvez même pas supprimer un formulaire en statut Actif. Ce que vous pouvez faire cependant, c’est dupliquer le formulaire actif dans un brouillon, et vous pouvez continuer à modifier les champs à partir de là.

Formulaire de test

Le souhait le plus évident à ce stade est de tester réellement votre formulaire avant utilisation. Et heureusement, les développeurs s’en sont également occupés.

Je réessaye pour tester le fonctionnement de la validation :

Une fois la validation passée, Soumission du formulaire de test La boîte de dialogue vous montre la charge utile JSON au fur et à mesure de sa sortie, ainsi que les en-têtes HTTP fournis avec cette requête de webhook. Frappons le bouton Soumettre et voyons la confirmation – j’ai choisi de voir un message de confirmation qui s’affiche.

Webhook Catcher affiche toutes mes données soumises ainsi que les en-têtes HTTP, tout a été envoyé et reçu avec succès !

Et après?

Utilisons ce formulaire nouvellement créé à partir des pages XM Cloud. Veuillez noter une nouvelle section intitulée Formulaires sous l’onglet Composants. C’est là que résident tous vos formulaires actifs. Vous pouvez simplement glisser-déposer ce formulaire vers un espace réservé souhaité, comme vous le faites normalement dans l’éditeur de pages.

Veuillez noter: vous devez déployer votre site sur un hôte d’édition fonctionnant sur le SDK Headless (JSS) version 21.6 ou plus récente pour le faire fonctionner – c’est à ce moment-là que la prise en charge de XM Cloud Forms a été ajoutée. Dans d’autres cas, vous rencontrez cette erreur :

Que manque-t-il?

• la fonctionnalité de téléchargement de fichiers n’est pas prise en charge – les webhooks seuls ne suffisent pas pour la gérer
• possibilité de personnalisation et d’extension – avec un peu de chance, cela vient du fait qu’il y a une section vide pour les champs personnalisés

Espérons que les développeurs de produits implémenteront ces fonctionnalités et bien d’autres dans les prochaines versions. Mais même avec ce qui a été publié aujourd’hui, j’ai vraiment apprécié le générateur XM Cloud Forms !