Créer ou ajouter un formulaire adaptatif à une page AEM Sites

Adobe recommande d’utiliser la capture de données moderne et extensible. Composants principaux pour création d’un Forms adaptatif ou Ajout de Forms adaptatif à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de Forms adaptatif, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’approche plus ancienne de la création de Forms adaptatif à l’aide de composants de base.

Avec AEM Forms, vous pouvez facilement incorporer des formulaires adaptatifs dans vos pages web. Vos visiteurs et visiteuses peuvent ainsi remplir et envoyer facilement des formulaires sans jamais quitter la page sur laquelle ils se trouvent. Ce faisant, ils ou elles peuvent continuer à utiliser sans effort d’autres éléments du site web tout en interagissant activement avec le formulaire.

Vous pouvez utiliser l’éditeur de page d’AEM pour créer et ajouter rapidement plusieurs formulaires à vos pages AEM Sites. L’utilisation de l’éditeur de page d’AEM permet aux auteurs et autrices de contenu de créer des expériences de capture de données en toute transparence dans une page Sites à l’aide de la puissance des composants des formulaires adaptatifs, notamment le comportement dynamique, les validations, l’intégration de données, la génération d’un document d’enregistrement et l’automatisation de la gestion commerciale. Il vous permet également d’utiliser différentes fonctionnalités des pages AEM Sites, telles que le contrôle de version, le ciblage, la traduction et le gestionnaire de sites multiples.

AEM Forms fournit un conteneur de formulaires adaptatifs et des composants Formulaires adaptatifs - Incorporer. Vous pouvez utiliser le conteneur de formulaires adaptatifs pour créer un formulaire dans un fragment d’expérience ou une page AEM Sites, tandis que le composant Forms adaptatif - Incorporer permet d’ajouter un formulaire adaptatif existant ou de créer un formulaire à l’aide de l’éditeur de Forms adaptatif.

Avantages de l’utilisation du composant Conteneur de formulaires adaptatifs dans l’éditeur de page d’AEM ou dans un fragment d’expérience

L’utilisation du conteneur de formulaires adaptatifs dans AEM éditeur de page vous permet de créer des expériences de capture de données transparentes dans une page Sites à l’aide de la puissance des composants de Forms adaptatif, notamment le comportement dynamique, les validations, l’intégration de données, ainsi que de générer un document d’enregistrement et l’automatisation des processus d’entreprise. Il vous permet également d’utiliser différentes fonctionnalités des pages AEM Sites, telles que le contrôle de version, le ciblage, la traduction et le gestionnaire multi-site, ce qui améliore l’expérience globale de création et de gestion de formulaires. Examinons quelques-unes de ces fonctionnalités :

• Contrôle de version : les pages AEM Sites vous offrent des fonctionnalités de contrôle de version fiables, ce qui vous permet de suivre et de gérer différentes versions de vos formulaires. Vous pouvez ainsi apporter des modifications et des améliorations aux formulaires tout en conservant la possibilité de restaurer des versions précédentes si nécessaire. Le contrôle de version garantit une approche contrôlée et organisée du développement et de l’évolution des formulaires.
• Ciblage (intégration à Adobe Target) : avec les fonctionnalités de ciblage des pages AEM Sites, vous pouvez également personnaliser l’expérience du formulaire pour différentes audiences. En utilisant des segments utilisateur et des critères de ciblage, vous pouvez personnaliser le contenu, la conception ou le comportement du formulaire en fonction de groupes d’utilisateurs spécifiques. Vous pouvez ainsi offrir une expérience de formulaire personnalisée et pertinente, ce qui augmente l’engagement et les taux de conversion.
• Traduction : intégration transparente d’AEM Sites à des services de traduction, ce qui vous permet de traduire facilement des formulaires en plusieurs langues. Cette fonctionnalité simplifie le processus de localisation, en veillant à ce que vos formulaires soient accessibles à une audience globale. Vous pouvez gérer efficacement les traductions dans les projets de traduction d’AEM, ce qui réduit le temps et les efforts requis pour la prise en charge des formulaires multilingues. Pour plus d’informations sur la traduction, reportez-vous à la section Remarques.
• Gestion multisite et Live Copy : AEM Sites vous offre une fonctionnalité fiable de gestion multisite et de Live Copy, vous permettant de créer et de gérer plusieurs sites web au sein d’un seul environnement. Cette fonctionnalité vous permet désormais de réutiliser des formulaires sur différents sites, ce qui assure la cohérence et réduit les efforts de duplication. Grâce à un contrôle et une gestion centralisés, vous pouvez gérer et mettre à jour efficacement les formulaires sur plusieurs sites web.
• Thèmes : les pages AEM Sites vous fournissent un cadre pour la conception et la gestion de styles visuels cohérents sur plusieurs pages web. Elles définissent les couleurs, les polices, les feuilles de style et d’autres éléments visuels qui contribuent à l’aspect général du site web. Vous pouvez utiliser les thèmes conçus pour une page AEM Sites pour un formulaire adaptatif afin de gagner du temps..
• Balisage : Les pages AEM Sites vous permettent de affecter des balises ou des étiquettes à une page, à une ressource ou à un autre contenu ;. Les balises sont des mots-clés ou des étiquettes de métadonnées qui permettent de classer et d’organiser du contenu selon des critères spécifiques. Vous pouvez affecter une ou plusieurs balises aux pages, aux ressources ou à tout autre élément de contenu dans AEM afin d’améliorer la recherche et de classer les ressources.
• Verrouillage et déverrouillage de contenu : AEM Sites permet à ses utilisateurs et utilisatrices de contrôler l’accès aux pages et leurs modifications dans l’environnement AEM Sites. Lorsqu’une page est verrouillée, cela signifie qu’elle est protégée contre les changements ou modifications non autorisés par d’autres utilisateurs et utilisatrices. Seule la personne qui a verrouillé le contenu ou l’équipe d’administration désignée peut le déverrouiller pour autoriser les modifications.

Il existe plusieurs possibilités pour ajouter un formulaire adaptatif dans l’éditeur de page d’AEM.

Vous pouvez tirer pleinement parti de cette fonctionnalité en utilisant les options suivantes :

• Ajouter un formulaire adaptatif personnalisé à une page AEM Sites : créez entièrement un nouveau formulaire en l’adaptant spécifiquement à vos besoins et préférences de conception.

• Ajouter un formulaire adaptatif personnalisé à un fragment d’expérience : étendez la portée de vos formulaires en les ajoutant aux fragments d’expérience AEM, ce qui permet une réutilisation transparente sur plusieurs pages ou sites.

• Convertir un formulaire adaptatif en fragment d’expérience : convertissez un formulaire adaptatif ajouté à une page AEM Sites en un fragment d’expérience pour réutiliser le formulaire sur plusieurs pages AEM Sites.

• Créer et ajouter des formulaires basés sur des modèles approuvés dans une page AEM Sites : tirez parti des modèles prévalidés pour créer rapidement des formulaires conformes aux directives de marque et aux normes de conception de votre entreprise. Cette option est disponible uniquement pour les formulaires adaptatifs créés avec l’éditeur de formulaires adaptatifs ou le composant Formulaires adaptatifs - Incorporer.

• Ajouter des formulaires existants à une page AEM Sites : intégrez facilement des formulaires que vous avez déjà créés dans vos sites web, ce qui permet aux visiteurs et visiteuses d’interagir directement avec eux. Cette option est disponible uniquement pour les formulaires adaptatifs créés avec l’éditeur de formulaires adaptatifs ou le composant Formulaires adaptatifs - Incorporer.

• Ajouter plusieurs formulaires à une page AEM Sites ou à un fragment d’expérience : ajoutez plusieurs formulaires à une page afin de proposer aux utilisateurs et utilisatrices plusieurs choix en fonction de leurs préférences et de leurs besoins. Il peut s’agir d’une combinaison de nouveaux formulaires et de formulaires existants.

Remarques

• Lorsque vous utilisez le conteneur de formulaires adaptatifs pour créer ou ajouter un formulaire, les formulaires sont traduits et localisés par le biais du flux de traduction AEM Sites. Pour chaque langue, une copie distincte (copie de langue) de la page du site et des formulaires correspondants est générée. Lorsqu’un auteur ou une autrice de contenu modifie une règle dans un formulaire sur la page parente, les mêmes modifications doivent être effectuées dans toutes les copies de langue du formulaire. Le conteneur de formulaires adaptatifs vous permet également d’utiliser diverses fonctionnalités des pages AEM Sites telles que le contrôle de version, le ciblage, la traduction et le gestionnaire de sites multiples.

• Lorsque vous créez ou ajoutez un formulaire à l’aide du composant Formulaire adaptatif - Incorporer, les formulaires sont traduits et localisés à l’aide du flux de traduction AEM Forms. Dans ce cas, un seul formulaire est conservé et référencé dans toutes les copies de langue des pages Sites. Le composant Formulaire adaptatif - Incorporer ne permet pas d’accéder aux différentes fonctionnalités des pages AEM Sites telles que le contrôle de version, le ciblage, la traduction et le gestionnaire de sites multiples.

Avant de commencer

Créer un formulaire adaptatif

Vous pouvez créer un nouveau formulaire à partir de zéro, en l’adaptant spécifiquement à vos besoins et à vos préférences en matière de conception, directement dans une page AEM Sites ou dans un fragment d’expérience. Pour les formulaires à usage unique, il est recommandé d’effectuer une création directe sur une page AEM Sites, tandis que les fragments d’expérience sont parfaits pour les formulaires qui doivent être réutilisés sur plusieurs pages de votre site web.

• Créer un formulaire dans une page AEM Sites
• Créer un formulaire dans un fragment d’expérience
• Convertir un formulaire adaptatif dans une page AEM Sites en fragment d’expérience

Créer un formulaire dans une page AEM Sites

Vous pouvez utiliser le composant Conteneur de formulaires adaptatifs dans l’éditeur de page d’AEM pour créer un formulaire personnalisé. Le composant permet de créer un formulaire en le faisant glisser et en le déposant. Les composants de formulaire sont basés sur les composants principaux. Vous pouvez facilement les personnaliser en fonction des besoins de votre entreprise.

Pour créer un formulaire adaptatif dans une page Sites :

1. Ouvrez la page AEM Sites en mode d’édition.
2. Faites glisser et déposez le composant Conteneur de formulaires adaptatifs du navigateur de composants vers la page Sites. Un espace est alors créé sur la page pour le formulaire. Vous pouvez modifier la taille de l’espace conteneur à l’aide du mode Disposition.
3. Faites glisser et déposez les composants principaux de formulaire adaptatif dans l’espace conteneur pour créer le formulaire.
4. Ajoutez le bouton Soumettre.

Ensuite, vous définissez l’action Soumettre et les propriétés avancées.

Créer un formulaire dans un fragment d’expérience

Vous pouvez étendre la portée de vos formulaires en les ajoutant aux fragments d’expérience AEM, ce qui permet une réutilisation directe sur plusieurs pages ou sites. Par exemple, vous pouvez inclure un formulaire d’inscription à une newsletter dans un fragment d’expérience. Vous pouvez ainsi réutiliser facilement le fragment sur plusieurs pages de votre site web, ce qui évite d’avoir à recréer le formulaire à plusieurs reprises. Toutes les mises à jour ou modifications apportées au formulaire d’inscription à la newsletter dans le fragment d’expérience sont automatiquement propagées à toutes les pages sur lesquelles elles sont utilisées. Cela simplifie le processus et garantit une expérience utilisateur fluide tout en simplifiant la gestion des formulaires de votre site web.

Pour créer un formulaire adaptatif dans un fragment d’expérience :

1. Ouvrez un fragment d’expérience.
2. Faites glisser et déposez le composant de conteneur de formulaires adaptatifs du navigateur de composants sur le fragment d’expérience.
3. Faites glisser et déposez les composants principaux de formulaire adaptatif dans l’espace conteneur du fragment d’expérience pour créer le formulaire.
4. Ajoutez le bouton Soumettre.

Ensuite, vous définissez l’action de soumission et les propriétés avancées.

Convertir un formulaire adaptatif dans une page AEM Sites en fragment d’expérience

Vous pouvez convertir un formulaire adaptatif existant dans un éditeur de page d’AEM Sites en fragment d’expérience afin de réutiliser le formulaire sur plusieurs pages ou sites.

Pour convertir un formulaire adaptatif dans une page AEM Sites en fragment d’expérience :

1. Ouvrez la page AEM Sites contenant le formulaire adaptatif (dans le composant de conteneur de formulaires adaptatifs) en mode d’édition.

2. Ouvrez l’arborescence de contenu, puis sélectionnez le conteneur de formulaires adaptatifs qui héberge votre formulaire adaptatif. Une page AEM Sites peut héberger plusieurs formulaires adaptatifs. Sélectionnez donc avec soin le conteneur de formulaires adaptatifs approprié.

3. Dans la barre de menu, sélectionnez l’icône Convertir en variation de frangment d’expérience.
   

   Une boîte de dialogue pour convertir le conteneur de formulaires adaptatifs en un nouveau fragment d’expérience ou l’ajouter à un fragment d’expérience existant s’affiche

4. Dans la boîte de dialogue Convertir en variation de fragment d’expérience, définissez les valeurs des options suivantes :

   • Action : Sélectionnez cette option pour créer un fragment d’expérience ou Ajouter à un fragment d’expérience existant.
   • Chemin d’accès parent : spécifiez le chemin du dossier dans lequel héberger le fragment d’expérience. Cette option est disponible uniquement pour la création d’un fragment d’expérience.
   • Modèle : spécifiez le chemin du modèle de fragment d’expérience. Si vous ne disposez pas d’un modèle de fragment d’expérience, créez-le. Cette option est disponible uniquement pour l’ajout d’un formulaire adaptatif à un fragment d’expérience existant.
   • Titre du fragment : spécifiez le titre du fragment d’expérience. Le titre identifie de manière unique un fragment d’expérience.

Configuration de l’action de soumission pour le formulaire

Une action Envoyer permet de choisir la destination des données capturées via un formulaire adaptatif. Elle est déclenchée lorsqu’un utilisateur ou une utilisatrice clique sur le bouton Soumettre d’un formulaire adaptatif. Les formulaires adaptatifs incluent certaines actions de soumission prêtes à l’emploi. Vous pouvez également étendre les actions de soumission par défaut pour créer votre propre action de soumission. Pour configurer une action de soumission pour votre formulaire :

1. Ouvrez l’éditeur de page AEM ou le fragment d’expérience contenant le formulaire adaptatif.
2. Ouvrez l’arborescence de contenu, puis sélectionnez le conteneur de formulaires adaptatifs qui héberge votre formulaire adaptatif. Une page AEM Sites peut héberger plusieurs formulaires adaptatifs. Sélectionnez donc avec soin le conteneur de formulaires adaptatifs approprié.
3. Cliquez sur l’icône de propriétés de conteneur de formulaires adaptatifs . La boîte de dialogue du conteneur de formulaires adaptatifs pour configurer les actions de soumission s’ouvre.
   
4. Sélectionnez et configurez une action de soumission en fonction de vos besoins. Pour plus d’informations sur les actions de soumission, voir Action de soumission de formulaire adaptatif

Configuration d’un schéma ou d’un modèle de données de formulaire pour un formulaire

Vous pouvez utiliser le modèle de données de formulaire pour connecter un formulaire à une source de données afin d’envoyer et de recevoir des données en fonction des actions de l’utilisateur ou de l’utilisatrice. Vous pouvez également connecter un formulaire à un schéma JSON pour recevoir les données envoyées dans un format prédéfini.

Avant de connecter un formulaire à un schéma ou à un modèle de données de formulaire

• Créer un schéma JSON et le charger dans votre environnement
• Créer un modèle de données de formulaire

Pour configurer un schéma JSON ou un modèle de données de formulaire pour votre formulaire :

1. Ouvrez l’éditeur de page AEM ou le fragment d’expérience contenant le formulaire adaptatif.

2. Ouvrez l’arborescence de contenu, puis sélectionnez le conteneur de formulaires adaptatifs qui héberge votre formulaire adaptatif. Une page AEM Sites peut héberger plusieurs formulaires adaptatifs. Sélectionnez donc avec soin le conteneur de formulaires adaptatifs approprié.

3. Cliquez sur l’icône de propriétés de conteneur de formulaires adaptatifs . La boîte de dialogue Conteneur de formulaires adaptatifs pour configurer les modèles de données s’ouvre.
   

4. Sélectionnez et configurez un schéma JSON ou un modèle de données de formulaire, en fonction de vos besoins. Pour plus d’informations sur les actions de soumission, voir Action de soumission de formulaire adaptatif.

   • Lorsque vous sélectionnez l’option Modèle de formulaire, utilisez l’option Sélectionner un modèle de données de formulaire pour sélectionner un modèle de données de formulaire préconfiguré.
   • Lorsque vous sélectionnez l’option Schéma, utilisez l’option Schéma pour sélectionner un schéma JSON pour votre formulaire.

5. Cliquez sur Terminé.

Configurer un service de préremplissage pour un formulaire

Vous pouvez utiliser le service de préremplissage pour remplir automatiquement les champs d’un formulaire adaptatif à l’aide de données existantes. Lorsqu’un utilisateur ou une utilisatrice ouvre un formulaire, les valeurs de ces champs sont préremplies. Vous pouvez effectuer les actions suivantes :

• Créer un service de préremplissage personnalisé
• Utiliser le service de préremplissage de de modèle de données de formulaire

Utiliser le service de préremplissage de modèle de données de formulaire

Vous pouvez utiliser le service de préremplissage de modèle de données de formulaire pour préremplir les champs d’un formulaire à l’aide d’un modèle de données de formulaire configuré. Le service de préremplissage de modèle de données de formulaire utilise la méthode Obtenir le service du modèle de données de formulaire configuré pour récupérer des données. Pour utiliser le service de préremplissage de modèle de données de formulaire pour un formulaire adaptatif :

1. Ouvrez l’éditeur de page AEM ou le fragment d’expérience contenant le formulaire adaptatif.
2. Ouvrez l’arborescence de contenu, puis sélectionnez le conteneur de formulaires adaptatifs qui héberge votre formulaire adaptatif. Une page AEM Sites peut héberger plusieurs formulaires adaptatifs. Sélectionnez donc avec soin le conteneur de formulaires adaptatifs approprié.
3. Cliquez sur l’icône de propriétés de conteneur de formulaires adaptatifs . La boîte de dialogue Conteneur de formulaires adaptatifs pour configurer les modèles de données s’ouvre.
   
4. Sélectionnez un modèle de données de formulaire. Ouvrez l’onglet De base. Dans le service de préremplissage, sélectionnez Service de préremplissage de brouillon du Portail Formulaires.
5. Cliquez sur Terminé.

Rediriger la personne utilisatrice vers une nouvelle personne utilisatrice lors de l’envoi du formulaire ou afficher un message de remerciement

Lors de l’envoi d’un formulaire, vous pouvez rediriger la personne utilisatrice vers une autre page web ou vers un message. Pour rediriger la personne utilisatrice ou configurer le message de remerciement :

1. Ouvrez l’éditeur de page AEM ou le fragment d’expérience contenant le formulaire adaptatif.

2. Ouvrez l’arborescence de contenu, puis sélectionnez le conteneur de formulaires adaptatifs qui héberge votre formulaire adaptatif. Une page AEM Sites peut héberger plusieurs formulaires adaptatifs. Sélectionnez donc avec soin le conteneur de formulaires adaptatifs approprié.

3. Cliquez sur l’icône de propriétés de conteneur de formulaires adaptatifs . La boîte de dialogue Conteneur de formulaires adaptatifs pour configurer les modèles de données s’ouvre.

4. Ouvrez l’onglet Soumission.

   • Pour configurer une URL de redirection, pour l’option Lors de l’envoi, sélectionnez l’option Rediriger vers l’URL, puis fournissez une adresse absolue, une URL de redirection ou le chemin relatif d’une page AEM Sites.

   • Pour configurer un message de remerciement ou personnalisé, sélectionnez l’option Afficher le message et écrivez un message dans la zone Contenu du message pour l’option Lors de l’envoi. Il s’agit d’une zone de texte enrichi. Vous pouvez utiliser l’option Plein écran pour afficher tous les éléments de texte enrichi disponibles.

Voir également

• Création d’un formulaire adaptatif basé sur des composants principaux autonomes
• Créer un style ou des thèmes pour vos formulaires