Ajouter un formulaire adaptatif à une page AEM Sites ou un fragment d’expérience

Vue d’ensemble

Avec AEM Forms, vous pouvez ajouter facilement un formulaire à votre page AEM Sites. Vos visiteurs et visiteuses peuvent ainsi remplir et envoyer facilement des formulaires sans jamais quitter la page sur laquelle ils ou elles 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 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 de 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 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 de sites multiples.

AEM Forms Cloud Service fournit des composants Adaptive Form Container et Adaptive Forms - Incorporer. Vous pouvez utiliser le conteneur de formulaires adaptatifs pour créer un formulaire dans une page AEM Sites ou un fragment d’expérience, 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.

Pourquoi utiliser les composants principaux de Forms adaptatif pour créer un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience ?

Si vous avez déjà créé un composant de base de Forms adaptatif ou des formulaires basés sur un HTML brut pour vos sites, Adobe vous recommande d’utiliser les composants principaux de Forms adaptatif pour créer un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience. Il vous permet d’utiliser différentes fonctionnalités des pages AEM Sites telles que le contrôle de version, le ciblage, la traduction et le gestionnaire multisite, ce qui améliore l’expérience globale de création et de gestion de formulaires pour Forms adaptatif. 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 d’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.

En outre, le Forms adaptatif dans AEM éditeur de page utilise Composants principaux de Forms adaptatif. Ces composants principaux fournissent des méthodes standard et plus simples de mise en forme et de personnalisation des composants, identiques aux composants WCM d’AEM Sites.

Comment créer ou ajouter un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience AEM ?

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

• Créer et ajouter un formulaire adaptatif personnalisé à une page AEM Sites : vous pouvez utiliser le composant Conteneur de formulaires adaptatifs pour créer entièrement un formulaire, en l’adaptant spécifiquement à vos besoins et préférences de conception.

• Créer et ajouter un formulaire adaptatif personnalisé à 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 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éez et ajoutez des formulaires basés sur des modèles approuvés dans une page AEM Sites : Vous pouvez utiliser des modèles prévalidés pour créer rapidement des Forms adaptatives 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 : vous pouvez facilement intégrer les 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 : vous pouvez créer ou ajouter plusieurs formulaires adaptatifs à une page AEM Sites afin de proposer plusieurs choix aux utilisateurs et utilisatrices en fonction de leurs préférences et de leurs besoins. Il peut s’agir d’une combinaison de formulaires entièrement nouveaux et de formulaires existants. Vous pouvez utiliser la variable Conteneur de formulaires adaptatifs à plusieurs reprises pour ajouter le Forms adaptatif dans une page AEM Sites. Vous pouvez utiliser la variable Forms adaptatif - Incorporer composant plusieurs fois dans une page AEM Sites, uniquement si Le formulaire couvre toute la largeur du cadre. est sélectionnée. Au cas où la variable Le formulaire couvre toute la largeur du cadre. n’est pas cochée, la page AEM Sites ne prend en charge qu’un seul formulaire adaptatif pour exister sans iframe. Pour ajouter d’autres Forms adaptatives à l’aide du Forms adaptatif - Incorporer component, select Le formulaire couvre toute la largeur du cadre. .

Remarques relatives à la création d’un formulaire adaptatif dans une page AEM Sites ou dans un fragment d’expérience AEM

• 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.

Conditions de création ou d’ajout d’un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience AEM

Avant de commencer la création d’un formulaire adaptatif, activez les composants principaux de formulaires adaptatifs et ajoutez les bibliothèques clientes de formulaires adaptatifs à votre page AEM Sites :

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 Soumettre 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 menus, sélectionnez l’option Icône de variation Convertir en fragment 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

Configurer l’action Soumettre pour un formulaire dans une page AEM Sites ou un fragment d’expérience

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

Configurer un schéma ou un modèle de données de formulaire pour un formulaire dans une page AEM Sites ou un fragment d’expérience

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. Selon les besoins, connectez votre formulaire à un schéma JSON ou à un modèle de données de formulaire :

• Créez un schéma JSON et chargez-le dans votre environnement ou,
• 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 dans une page AEM Sites ou un fragment d’expérience

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 modèle de données de formulaire

Utiliser le service de préremplissage de modèle de données de formulaire pour préremplir les champs d’un formulaire dans une page AEM Sites ou un fragment d’expérience

Vous pouvez utiliser le service de préremplissage de modèle de données de formulaire pour préremplir les champs d’un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience à l’aide d’un modèle de données de formulaire ou d’un service de préremplissage personnalisé. 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 modèle de données de formulaire.
5. Cliquez sur Terminé. Votre formulaire adaptatif est maintenant configuré pour utiliser le préremplissage du modèle de données de formulaire. Vous pouvez désormais utiliser l’éditeur de règles pour créer des règles afin de préremplir les champs du formulaire.

Rediriger des personnes utilisatrices vers une page ou afficher un message de remerciement lors de la soumission du formulaire

Lors de la soumission d’un formulaire, vous pouvez rediriger la personne utilisatrice vers une autre page web ou 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. Ouvrez l’onglet Soumission.

   • Pour configurer une URL de redirection, sélectionnez l’option Lors de l’envoi . Rediriger vers l’URL et recherchez et sélectionnez une page AEM Sites, ou fournissez l’URL d’une page externe.
   • Pour configurer un message de remerciement ou personnalisé, sélectionnez l’option Envoyer . Afficher le message et indiquez un message dans la variable Contenu du message de la boîte. 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éer un formulaire adaptatif AEM
• Ajouter un formulaire adaptatif AEM à une page AEM Sites
• Appliquer des thèmes à un formulaire adaptatif AEM
• Ajouter des composants à un formulaire adaptatif AEM
• Utiliser reCAPTCHA dans un formulaire adaptatif AEM
• Générer une version PDF (document d’enregistrement) d’un formulaire adaptatif AEM
• Traduire un formulaire adaptatif AEM
• Activer Adobe Analytics sur un formulaire adaptatif pour suivre son utilisation
• Connecter un formulaire adaptatif à Microsoft SharePoint
• Connecter un formulaire adaptatif à Microsoft Power Automate
• Connecter un formulaire adaptatif à Microsoft OneDrive
• Connecter un formulaire adaptatif au stockage Blob Azure Microsoft
• Connecter un formulaire adaptatif à Salesforce
• Utiliser Adobe Sign dans un formulaire adaptatif AEM
• Ajouter un nouveau paramètre régional pour un formulaire adaptatif
• Envoyer des données de formulaire adaptatif à une base de données
• Envoyer des données de formulaire adaptatif à un point d’entrée REST
• Envoyer des données de formulaire adaptatif à un workflow AEM
• Utiliser le Portail Formulaires pour répertorier des formulaires adaptatifs AEM sur un site web AEM
• Ajouter un comportement dynamique aux formulaires à l’aide de l’éditeur de règles
• Définir la disposition des formulaires pour différentes tailles d’écran et différents types d’appareils