Incorporer un formulaire adaptatif dans une page AEM Sites embed-an-adaptive-form-to-aem-sites-page
Vue d’ensemble overview
AEM Forms permet aux développeurs et développeuses de formulaires d’incorporer facilement des formulaires adaptatifs dans une page AEM Sites ou dans une page web hébergée en dehors d’AEM. Le formulaire adaptatif incorporé est entièrement fonctionnel, et les utilisateurs et utilisatrices peuvent le remplir et l’envoyer sans quitter la page. Cela permet à l’utilisateur ou à l’utilisatrice de rester dans le contexte des autres éléments de la page web et d’interagir simultanément avec le formulaire. Cela permet à vos utilisateurs et utilisatrices de remplir et d’envoyer des formulaires de manière pratique sans jamais quitter la page sur laquelle ils se trouvent. Cette intégration offre un moyen pratique de réutiliser le Forms adaptatif déjà créé.
Vous pouvez utiliser l’éditeur de page d’AEM pour incorporer 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 transparentes dans une page Sites à l’aide de la puissance des composants Forms adaptatifs, notamment le comportement dynamique, les validations, l’intégration de données, la génération de documents d’enregistrement et l’automatisation des processus métier. L’éditeur de page permet également d’utiliser différentes fonctionnalités des pages d’AEM Sites, telles que le contrôle de version, le ciblage, la traduction et le gestionnaire de sites multiples.
AEM Forms fournit des composants Conteneur de formulaires adaptatifs et Forms adaptatif - Incorporer (v2). Vous pouvez utiliser le composant Forms adaptative - Incorporer (v2) pour ajouter un formulaire adaptatif existant ou créer un formulaire à l’aide de l’éditeur de Forms adaptatif , tandis que l’Conteneur de formulaires adaptatifs pour créer un formulaire dans un fragment d’expérience ou une page AEM Sites.
Comment créer ou incorporer un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience AEM ? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment
Vous pouvez tirer pleinement parti de cette fonctionnalité à l’aide des options suivantes :
-
Créer un formulaire adaptatif à l’aide de modèles approuvés et l’incorporer à une page AEM Sites : vous pouvez utiliser des modèles préapprouvés pour créer et incorporer rapidement des Forms adaptatifs conformes aux directives de marque et aux normes de conception de votre entreprise.
-
Incorporer des formulaires existants dans une page AEM Sites : vous pouvez facilement intégrer des formulaires que vous avez déjà créés dans vos sites web, ce qui permet aux visiteurs et aux visiteuses d’interagir directement avec eux.
-
Convertir un formulaire adaptatif incorporé en fragment d’expérience : convertissez un formulaire adaptatif incorporé ajouté à une page AEM Sites en fragment d’expérience afin de le réutiliser sur plusieurs pages AEM Sites.
-
Création et ajout d’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 le personnalisant spécifiquement selon vos besoins et vos 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.
-
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. Vous pouvez utiliser l’éditeur de page d’AEM pour incorporer rapidement plusieurs formulaires à vos pages AEM Sites. Vous pouvez utiliser le composant Conteneur de formulaires adaptatifs plusieurs fois pour ajouter un Forms adaptatif dans une page AEM Sites. Vous pouvez utiliser le composant Forms adaptative - Incorporer plusieurs fois dans une page AEM Sites, uniquement si l’option Le formulaire couvre toute la largeur du cadre est sélectionnée. Si l’option Form 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 composant Forms adaptatif - Incorporer, sélectionnez l’option Le formulaire couvre toute la largeur du cadre.
Considérations relatives à l’incorporation d’un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience AEM consideration
-
Lorsque vous créez ou ajoutez un formulaire à l’aide du composant Forms adaptative - Incorporer (v2), 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 Forms adaptative - Incorporer (v2) ne permet pas d’accéder à 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.
-
Lorsque vous utilisez le Conteneur de formulaires adaptatifs pour créer 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 multisite.
Conditions requises pour incorporer un formulaire adaptatif dans une page AEM Sites ou un fragment d’expérience AEM before-you-start-embedding-an-adaptive-form
Avant de commencer à incorporer un nouveau formulaire adaptatif ou un formulaire adaptatif préexistant à l’aide de l’option Forms adaptatif - Incorporer (v2), activez Composants principaux de Forms adaptatif et ajoutez Bibliothèques clientes de Forms adaptatif à votre page AEM Sites :
Activer les composants principaux des formulaires adaptatifs pour votre environnement AEM Cloud Service
Installez la dernière version de pour activer les composants principaux de Forms adaptatif pour votre environnement AEM Cloud Service.
Ajouter des bibliothèques clientes de formulaires adaptatifs à votre page AEM Sites ou votre fragment d’expérience
Lorsque l’option Lorsque le formulaire couvre toute la largeur d’une page est sélectionnée dans la boîte de dialogue de configuration Conteneurs de formulaires et que le Forms adaptatif utilisant des composants principaux est utilisé, il est nécessaire d’inclure les bibliothèques clientes sur la page de Site correspondante.
Ajoutez les bibliothèques clientes Customheaderlibs et Customfooterlibs à votre page AEM Sites à l’aide du pipeline de déploiement. Pour ajouter les bibliothèques clientes :
-
Accédez à et clonez votre référentiel Git AEM Cloud Service.
-
Ouvrez le dossier Référentiel Git AEM Cloud Service dans un éditeur de texte brut. Par exemple, Microsoft® Visual Code.
-
Ouvrez le fichier
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html
et ajoutez le code suivant au fichier :code language-none //Customheaderlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/> </sly>
-
Ouvrez le fichier
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html
et ajoutez le code suivant au fichier :code language-none //customfooterlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/> </sly>
-
Ouvrez le fichier
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html
et ajoutez le code suivant au fichier :code language-none //Customheaderlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/> </sly>
-
Ouvrez le fichier
ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html
et ajoutez le code suivant au fichier :code language-none //customfooterlibs.html <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/> </sly>
-
Exécutez le pipeline de déploiement pour déployer les bibliothèques clientes dans votre environnement AEM as a Cloud Service.
Activer le Forms adaptatif - Incorporer (v2) pour votre page AEM Sites ou fragment d’expérience
Pour activer le composant Forms adaptative - Incorporer (v2) dans la politique du modèle, procédez comme suit :
- Ouvrez la page AEM Sites ou le fragment d’expérience pour modification. Pour ouvrir la page à modifier, sélectionnez-la, puis cliquez sur Modifier.
- Ouvrez le modèle de votre page Sites ou Fragment d’expérience. Pour ouvrir le modèle, accédez aux Informations sur la page
- Dans la vue Structure, cliquez sur l’icône Politique
- Cliquez sur Terminé.
Incorporer un formulaire adaptatif à l’aide du composant Forms adaptatif - Incorporer (v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment
Utilisez le composant Forms adaptatif - Incorporer (v2) pour créer un formulaire adaptatif directement dans l’éditeur AEM Sites à l’aide de l’assistant de création de formulaire. Le formulaire obtenu est enregistré en tant qu’entité externe, ce qui permet de le réutiliser dans d’autres pages Sites et formulaires autonomes. Vous pouvez incorporer un tout nouveau formulaire à partir de zéro, en le personnalisant spécifiquement en fonction de vos besoins et préférences de conception, directement dans une page AEM Sites ou dans un fragment d’expérience. Pour les formulaires à usage unique, la création directe d’une page AEM Sites est recommandée, 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.
Vous pouvez facilement incorporer un nouveau formulaire à l’aide de l’option Forms adaptatif - Incorporer (v2). Imaginez, par exemple, l’incorporation d’un nouveau formulaire de contact dans une page AEM Sites ou un fragment d’expérience AEM. Toutes les mises à jour ou modifications apportées au formulaire de contact dans la page AEM Sites ou le fragment d’expérience s’appliquent automatiquement à toutes les pages où il est déployé. Cela simplifie la gestion des formulaires de votre site web, assurant ainsi une expérience utilisateur transparente tout en rationalisant le processus global.
Avec Adaptive Forms - Embed(v2), vous pouvez :
- Incorporer un nouveau formulaire à l’aide de l’assistant Forms adaptatif dans une page AEM Sites
- Incorporer un nouveau formulaire à l’aide de l’assistant Forms adaptatif dans un fragment d’expérience
- Incorporer un formulaire adaptatif existant dans une page AEM Sites
- Incorporer un formulaire existant dans un fragment d’expérience
- Convertir un formulaire adaptatif dans une page AEM Sites en fragment d’expérience
Incorporer un nouveau formulaire à l’aide de l’assistant Forms adaptatif dans une page AEM Sites embed-form-using-adaptive-form-wizzard-aem-sites
Les étapes d’incorporation d’un nouveau formulaire dans une page AEM Sites sont les suivantes :
-
Ouvrez la page AEM Sites en mode d’édition.
-
À partir du volet Explorateur des composants, faites glisser et déposez le composant Formulaires adaptatifs - Incorporer (v2) sur la page.
-
Cliquez sur l’icône Plus pour être redirigé vers l’assistant de création de formulaire.
-
Créez un formulaire adaptatif à partir de l’assistant Création de formulaire.
Le chemin de la ressource inclut déjà le chemin d’un formulaire adaptatif créé. -
Enregistrez les paramètres. Le formulaire adaptatif est maintenant incorporé dans la page.
Vous pouvez ensuite définir l’action Envoyer et les propriétés avancées d’un formulaire adaptatif incorporé à l’aide de l’assistant de création de formulaire.
Incorporer un nouveau formulaire à l’aide de l’assistant Forms adaptatif dans un fragment d’expérience embed-form-using-adaptive-form-wizzard-experience-fragment
Les étapes d’intégration du nouveau formulaire à un fragment d’expérience sont les suivantes :
-
Ouvrez le fragment d’expérience en mode d’édition.
-
À partir du volet Explorateur des composants, faites glisser et déposez le composant Formulaires adaptatifs - Incorporer (v2) sur la page.
-
Cliquez sur l’icône Plus pour être redirigé vers l’assistant de création de formulaire.
-
Créez un formulaire adaptatif à partir de l’assistant Création de formulaire.
Le chemin de la ressource inclut déjà le chemin d’un formulaire adaptatif créé. -
Enregistrez les paramètres. Le formulaire adaptatif est maintenant incorporé dans le fragment d’expérience.
Vous pouvez ensuite définir l’action Envoyer et les propriétés avancées d’un formulaire adaptatif incorporé à l’aide de l’assistant de création de formulaire.
Incorporer un formulaire adaptatif existant dans une page AEM Sites embed-an-adaptive-form-in-sites-editor
Avec le composant Forms adaptative - Incorporer (v2), vous pouvez intégrer facilement un formulaire adaptatif préexistant dans une page dans AEM Sites. Cette fonctionnalité améliore considérablement l’adaptabilité et la réutilisation du Forms adaptatif, offrant ainsi aux clients un moyen pratique de réutiliser les formulaires qu’ils ont déjà créés. Imaginez, par exemple, l’incorporation d’un formulaire de contact à une page AEM Sites, ce qui éliminerait la nécessité de recréer le formulaire plusieurs fois.
Pour incorporer un formulaire adaptatif existant dans une page Sites :
- Ouvrez la page AEM Sites en mode d’édition.
- Faites glisser et déposez le composant Forms adaptatif - Incorporer (v2) de l’explorateur de composants vers la page Sites.
- Sélectionnez le composant Forms adaptative - Incorporer sur la page Sites et sélectionnez
- Recherchez et sélectionnez le formulaire adaptatif à incorporer dans le chemin de la ressource.
- Enregistrez les paramètres. Le formulaire adaptatif est maintenant incorporé à la page.
Vous pouvez ensuite définir l’action Envoyer et les propriétés avancées d’un formulaire adaptatif incorporé à l’aide de l’assistant de création de formulaire.
Incorporation d’un formulaire adaptatif existant dans un fragment d’expérience embed-an-adaptive-form-in-experience-fragment
Vous pouvez également améliorer l’accessibilité de vos formulaires en les incorporant à un fragment d’expérience AEM. Pour incorporer un formulaire adaptatif dans un fragment d’expérience :
- Ouvrez un fragment d’expérience en mode d’édition.
- Faites glisser le composant Forms adaptative - Incorporer (v2) depuis l’explorateur de composants et déposez-le dans le fragment d’expérience.
- Sélectionnez le composant Forms adaptative - Incorporer dans le fragment d’expérience et sélectionnez
- Recherchez et sélectionnez le formulaire adaptatif à incorporer dans le chemin de la ressource.
- Enregistrez les paramètres. Le formulaire adaptatif est maintenant incorporé au fragment d’expérience.
Vous pouvez ensuite définir l’action Envoyer et les propriétés avancées d’un formulaire adaptatif incorporé à l’aide de l’assistant de création de formulaire.
Convertir un formulaire adaptatif dans une page AEM Sites en fragment d’expérience convert-an-adaptive-form-in-sites-page-to-an-experience-fragment
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 :
-
Ouvrez la page AEM Sites contenant le formulaire adaptatif (dans le composant de conteneur de formulaires adaptatifs) en mode d’édition.
-
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é.
-
Dans la barre de menu, sélectionnez l’
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.
-
Dans la boîte de dialogue de variation Convertir en fragment d’expérience, définissez des valeurs pour les options suivantes :
- Action : vous pouvez sélectionner 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.
- Balises du fragment : spécifiez la balise du fragment d’expérience. La balise identifie de manière unique la catégorie d’un fragment d’expérience.
Configuration des propriétés du formulaire adaptatif intégré (v2)
Vous pouvez personnaliser les paramètres avancés du composant Formulaire adaptatif - Incorporer (v2). Dans la boîte de dialogue Modifier le Forms adaptatif - Incorporer, vous pouvez spécifier ce qui suit :
-
Chemin d’accès à la ressource : recherchez et sélectionnez un formulaire adaptatif à incorporer. Il est prérempli si vous le faites glisser à partir du navigateur de ressources.
-
Publier l’envoi : sélectionnez l’action à déclencher lors de l’envoi du formulaire. Vous pouvez choisir d’afficher un message de remerciement ou une page de remerciement.
- Afficher un message de remerciement : à l’aide de l’éditeur de texte enrichi, rédigez un message à afficher après l’envoi du formulaire. Cette option n’est disponible que lorsque vous choisissez d’afficher un message de remerciement.
- Afficher une page de remerciement : recherchez et sélectionnez la page à afficher après l’envoi du formulaire. Cette option n’est disponible que lorsque vous choisissez d’afficher une page de remerciement.
- Rediriger vers la page de remerciement : activez cette option pour remplacer la page contenant le formulaire adaptatif incorporé par la page de remerciement. Autrement, la page de remerciement remplace le formulaire adaptatif dans le composant Forms adaptatif - Incorporer (v2) sans actualiser les sites sous-jacents de la page. Cette option n’est disponible que lorsque vous choisissez d’afficher une page de remerciement.
- Message de remerciement : brève confirmation ou accusé de réception qui s’affiche à l’écran après l’envoi réussi d’un formulaire.
- Page de remerciement : recherchez et sélectionnez la page à afficher après l’envoi réussi d’un formulaire.
-
Utiliser la langue de la page : utilisez les paramètres régionaux de la page AEM Sites au lieu de ceux du formulaire adaptatif. Cette option s’applique uniquement aux formulaires adaptatifs (Foundation).
-
Définir le focus sur le formulaire : sélectionnez cette option pour définir le focus sur le premier champ du formulaire adaptatif. Cette option s’applique uniquement aux formulaires adaptatifs (Foundation).
-
Thème : sélectionnez un thème qui définit le style des composants de votre formulaire adaptatif. La mise en forme comprend les propriétés d’aspect telles que le style de police, la couleur d’arrière-plan, les dimensions et l’alignement. Cette option s’applique uniquement aux formulaires adaptatifs (Foundation).
note note NOTE Vous pouvez utiliser les options Utiliser la langue de la page, Définir le focus sur le formulaire et Thème uniquement pour les formulaires adaptatifs (Foundation). -
Le formulaire couvre toute la largeur du cadre
Un cadre intégré (iframe) est un élément HTML qui charge un formulaire adaptatif sur une page AEM Sites.-
Si la case Le formulaire couvre toute la largeur du cadre est cochée, un formulaire adaptatif occupe toute la largeur du conteneur dans lequel il est placé. Dans ce cas, un iframe n’est pas utilisé pour générer le formulaire. La disposition et la conception d’un formulaire adaptatif s’adaptent pour couvrir toute la largeur du conteneur, ce qui le rend réactif et capable de s’ajuster à différentes tailles d’écran. Cette option vous permet d’incorporer plusieurs Forms adaptatives dans une page AEM Sites.
note note NOTE Pour incorporer plusieurs formulaires dans une page AEM Sites, cochez la case Le formulaire couvre toute la largeur du cadre. -
Si la case Le formulaire couvre toute la largeur du cadre n’est pas cochée, un formulaire adaptatif ne couvre pas toute la largeur du conteneur. À la place, un iframe est utilisé pour générer le formulaire, qui ne peut pas être étendu au-delà d’une largeur spécifique. Cette approche est utile lorsqu’un formulaire adaptatif a des limites définies et doit coexister avec d’autres composants AEM situés à côté dans le conteneur. Si cette option n’est pas cochée, elle permet à un seul Forms adaptatif de la page AEM Sites de s’incorporer sans iframe.
note note NOTE Une page AEM Sites ne prend en charge qu’un seul formulaire adaptatif sans iframe. Pour ajouter d’autres Forms adaptatives à l’aide du composant Forms adaptatif - Incorporer, sélectionnez l’option Le formulaire couvre toute la largeur du cadre.
-
-
Hauteur : indiquez la hauteur du conteneur. Laissez ce champ vide pour redimensionner automatiquement le conteneur.
-
Bibliothèque cliente CSS : spécifiez le chemin d’accès à une bibliothèque cliente CSS.
Publication d’un formulaire adaptatif incorporé publishing-embedded-adaptive-form
Examinons les scénarios suivants concernant la publication d’un formulaire adaptatif incorporé dans une page AEM Sites :
- Si vous publiez la page AEM Sites pour la première fois et qu’elle comporte un formulaire adaptatif incorporé, publiez la page de Sites et la ressource incorporée.
- Si vous n’avez modifié que le formulaire incorporé à une page de site publiée, publiez le formulaire d’origine et les modifications seront répercutées sur la page de site publiée. La page de site publiée comprend une référence à la ressource et ne doit pas être republiée.
- Si vous avez modifié la page de site et le formulaire adaptatif ou la communication interactive incorporé, republiez la page de site et la ressource incorporée.
Modifier un formulaire adaptatif incorporé modifying-embedded-adaptive-form
Pour modifier une configuration ou une propriété du formulaire adaptatif incorporé, procédez de l’une des manières suivantes.
- Ouvrez le formulaire d’origine dans un formulaire adaptatif dans l’éditeur correspondant et modifiez-le.
- Sélectionnez le formulaire adaptatif à partir de la page du site en mode d’édition, puis sélectionnez Modifier dans une nouvelle fenêtre. Le formulaire d’origine s’affiche en mode d’édition, et vous pouvez alors le modifier.
Bonnes pratiques best-practices
Lorsque vous incorporez des formulaires adaptatifs à des pages AEM Sites, gardez en tête les points suivants :
- L’en-tête et le pied de page du formulaire d’origine ne sont pas intégrés dans le formulaire incorporé.
- Les brouillons et les envois de formulaires incorporés sont pris en charge et visibles dans les onglets Brouillons et Formulaires envoyés du Portail Formulaires.
- L’action Envoyer configurée sur le formulaire d’origine est conservée dans le formulaire incorporé.
- Si vous avez configuré Adobe Analytics pour le formulaire d’origine, les données d’analyse du formulaire incorporé seront capturées dans Adobe Analytics. En revanche, elles ne seront pas disponibles dans le rapport d’analyse des formulaires.