Envoi asynchrone de formulaires adaptatifs asynchronous-submission-of-adaptive-forms

Adobe recommande d’utiliser les composants principauxde capture de données modernes et extensibles pour créer de nouveaux formulaires adaptatifsou ajouter des formulaires adaptatifs à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de formulaires adaptatifs, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’ancienne approche de la création de formulaires adaptatifs à l’aide de composants de base.

Traditionnellement, les formulaires web sont configurés à des fins d’envoi synchrone. Dans un envoi synchrone, lorsque les utilisateurs et les utilisatrices envoient un formulaire, ils ou elles sont redirigés vers une page d’accusé de réception, une page de remerciement ou, en cas d’échec de l’envoi, une page d’erreur. Toutefois, les expériences Web modernes telles que les applications d’une seule page gagnent en popularité. Dans une application de ce type, la page Web reste statique tandis que l’interaction entre le client et le serveur se déroule en arrière-plan. Vous pouvez désormais fournir cette expérience avec des formulaires adaptatifs en configurant l’envoi asynchrone.

Lors d’un envoi asynchrone, lorsqu’un utilisateur envoie un formulaire, le développeur de formulaires se connecte à une expérience distincte, notamment la redirection vers un autre formulaire ou une section distincte du site Web. L’auteur peut également ajouter des services distincts comme l’envoi de données à un autre magasin de données ou l’ajout d’un moteur d’analyse personnalisé. En cas d’envoi asynchrone d’un formulaire adaptatif, celui-ci se comporte comme une application d’une seule page, puisqu’il ne se recharge pas et que son adresse URL ne change pas lorsque ses données sont validées sur le serveur.

Lisez la suite pour plus de détails sur l’envoi asynchrone dans les formulaires adaptatifs.

Configuration de l’envoi asynchrone configure

Pour configurer l’envoi asynchrone d’un formulaire adaptatif :

Fonctionnement de l’envoi asynchrone how-asynchronous-submission-works

AEM Forms fournit des gestionnaires de succès et d’erreur prêts à l’emploi pour les envois de formulaires. Les gestionnaires sont des fonctions côté client qui s’exécutent selon la réponse du serveur. Lorsqu’un formulaire est envoyé, les données sont transmises au serveur pour validation, ce qui renvoie une réponse au client avec des informations sur l’événement de succès ou d’erreur pour l’envoi. Les informations sont transmises comme paramètres au gestionnaire approprié pour exécuter la fonction.

En outre, les auteurs de formulaire et les développeurs peuvent écrire des règles au niveau du formulaire pour remplacer les gestionnaires par défaut. Pour plus d’informations, voir Remplacer les gestionnaires par défaut à l’aide de règles.

Examinons d’abord la réponse du serveur pour les événements de succès et d’erreur.

Réponse du serveur pour l’événement de succès de l’envoi server-response-for-submission-success-event

La structure de la réponse du serveur pour l’événement de succès de l’envoi est la suivante :

{
  contentType : "<xmlschema or jsonschema>",
  data : "<dataXML or dataJson>" ,
  thankYouOption : <page/message>,
  thankYouContent : "<thank you page url/thank you message>"
}

La réponse du serveur en cas d'envoi réussi du formulaire comprend les éléments suivants :

Le gestionnaire de succès lit la réponse du serveur et redirige en conséquence vers l’URL de la page configurée ou affiche un message.

Réponse du serveur pour l’événement d’erreur d’envoi server-response-for-submission-error-event

La structure de la réponse du serveur pour l’événement d’erreur d’envoi est la suivante :

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

   errors : [
               { "somExpression" : "<SOM Expression>",
                 "errorMessage"  : "<Error Message>"
               },
               ...
             ]
 }

La réponse du serveur en cas d’erreur d’envoi du formulaire inclut les éléments suivants :

Le gestionnaire d’erreurs lit la réponse du serveur et affiche le message d’erreur en conséquence sur le formulaire.

Remplacer les gestionnaires par défaut en utilisant des règles custom

Les développeurs et développeuses, ainsi que les auteurs et autrices de formulaires peuvent écrire des règles au niveau du formulaire, dans l’éditeur de code, pour remplacer les gestionnaires par défaut. La réponse du serveur pour les événements de succès et d’erreur est exposée au niveau du formulaire. Les développeurs peuvent y accéder à l’aide de $event.data dans les règles.

Effectuez les étapes suivantes pour écrire des règles dans l’éditeur de code afin de gérer les événements de réussite et d’erreur.