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. Il permet à l’utilisateur de rester dans le contexte d’autres éléments de la page web et d’interagir simultanément avec le formulaire. Ainsi, vos utilisateurs peuvent facilement remplir et envoyer des formulaires sans jamais quitter la page sur laquelle ils se trouvent. Cette intégration offre un moyen pratique de réutiliser le Forms adaptatif qu’il a déjà créé.
Vous pouvez utiliser AEM éditeur de page pour incorporer rapidement plusieurs formulaires à vos pages AEM Sites. L’utilisation de l’éditeur de page 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 Forms adaptatif, notamment le comportement dynamique, les validations, l’intégration de données, ainsi que la génération d’un document d’enregistrement et l’automatisation des processus d’entreprise. 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 les composants Adaptive Form Container et Adaptive Forms - Embed(v2). Vous pouvez utiliser le composant Forms adaptatif - Incorporer(v2) pour ajouter un formulaire adaptatif existant ou créer un formulaire à l’aide de l’éditeur de Forms adaptatif , tandis que le composant Conteneur de formulaire adaptatif 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 dans AEM fragment d’expérience ? 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é en utilisant les options suivantes :
-
Créez un formulaire adaptatif à l’aide de modèles approuvés et incorporez-le à une page AEM Sites: Vous pouvez utiliser des modèles prévalidé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 à 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 d’interagir directement avec eux.
-
Convertir un formulaire adaptatif incorporé en fragment d’expérience : Convertir un formulaire adaptatif incorporé ajouté à une page AEM Sites en fragment d’expérience pour réutiliser le formulaire sur plusieurs pages AEM Sites.
-
Créez et ajoutez un formulaire adaptatif personnalisé à une page AEM Sites: Vous pouvez utiliser le composant Conteneur de formulaires adaptatifs pour créer entièrement un formulaire entièrement nouveau, en le 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.
-
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 AEM éditeur de page pour incorporer rapidement plusieurs formulaires à vos pages AEM Sites. Vous pouvez utiliser le composant Conteneur de formulaires adaptatifs plusieurs fois pour ajouter le Forms adaptatif dans une page AEM Sites. Vous pouvez utiliser le composant Forms adaptatif - Incorporer plusieurs fois dans une page AEM Sites, uniquement si l’option Le formulaire couvre toute la largeur de l’image est sélectionnée. Si l’option Le formulaire couvre toute la largeur de l’image 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 de l’image.
Observations relatives à l’intégration d’un formulaire adaptatif dans une page AEM Sites ou dans un fragment d’expérience AEM consideration
-
Lorsque vous créez ou ajoutez un formulaire à l’aide du composant Adaptive Forms - Embed(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 Adaptive Forms - Embed(v2) 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.
-
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. 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.
Conditions requises pour incorporer un formulaire adaptatif dans une page AEM Sites ou dans un fragment d’expérience AEM before-you-start-embedding-an-adaptive-form
Avant d’incorporer un nouveau formulaire adaptatif ou un formulaire adaptatif préexistant à l’aide de Forms adaptatif - Incorporer(v2), activez les composants principaux de Forms adaptatif et ajoutez les bibliothèques clientes de Forms adaptatif à votre page AEM Sites :
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 les composants principaux est utilisé, il est nécessaire d’inclure les bibliothèques clientes sur la page de votre site correspondant.
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.
Pour activer le composant Adaptive Forms - Embed(v2) dans la stratégie 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 page, 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 > Modifier le modèle. Le modèle correspondant s’ouvre dans l’éditeur de modèles.
- Dans la vue Structure, cliquez sur l’icône Politique dans la barre de menus. Dans la liste Composants autorisés, cochez la case Forms adaptatif - Incorporer(v2) sous le [Nom de projet d’AEM archétype] - Formulaire adaptatif.
- Cliquez sur Terminé.
embed |
---|
|
Incorporation d’un formulaire adaptatif à l’aide du composant Forms adaptatif - Incorporer (v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment
Utilisez le composant Adaptive Forms - Embed(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 sa réutilisation dans d’autres pages Sites et dans des formulaires autonomes. Vous pouvez incorporer entièrement un nouveau formulaire, en le adaptant spécifiquement à 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, il est recommandé d’effectuer une création directe sur une page AEM Sites, tandis que les fragments d’expérience sont idéaux 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 Adaptive Forms - Embed(v2). Imaginez, par exemple, l’incorporation d’un nouveau formulaire de contact dans une page AEM Sites ou dans un fragment d’expérience AEM. Toute mise à jour ou modification apportée au formulaire de contact dans la page AEM Sites ou au fragment d’expérience s’applique automatiquement à toutes les pages sur lesquelles il est déployé. Cela simplifie la gestion des formulaires de votre site web, assurant une expérience utilisateur transparente tout en rationalisant le processus global.
En utilisant Adaptive Forms - Embed(v2), vous pouvez :
- Incorporer un nouveau formulaire à l’aide de l’assistant de Forms adaptatif dans la page AEM Sites
- Incorporation d’un nouveau formulaire à l’aide de l’assistant de Forms adaptatif dans un fragment d’expérience
- Incorporation d’un formulaire adaptatif existant dans une page AEM Sites
- Incorporation d’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 de Forms adaptatif dans la page AEM Sites embed-form-using-adaptive-form-wizzard-aem-sites
Les étapes pour incorporer un nouveau formulaire à 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.
Ensuite, vous pouvez 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 nouveau formulaire à l’aide de l’assistant de Forms adaptatif dans un fragment d’expérience embed-form-using-adaptive-form-wizzard-experience-fragment
Les étapes pour incorporer un 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 désormais incorporé au fragment d’expérience.
Ensuite, vous pouvez 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 une page AEM Sites embed-an-adaptive-form-in-sites-editor
Avec le composant Adaptive Forms - Embed(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 d’Adaptive Forms, 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 évite d’avoir à le recréer 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 adaptatif - Incorporer dans la page Sites et sélectionnez dans la barre d’actions. La boîte de dialogue Edit Adaptive Forms - Embed(v2) s’ouvre.
- Recherchez et sélectionnez le formulaire adaptatif à incorporer dans le chemin de la ressource.
- Enregistrez les paramètres. Le formulaire adaptatif est désormais incorporé à la page.
Ensuite, vous pouvez 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 étendre l’accessibilité de vos formulaires en les incorporant au 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 et déposez le composant Forms adaptatif - Incorporer(v2) de l’explorateur de composants vers le fragment d’expérience.
- Sélectionnez le composant Forms adaptatif - Incorporer dans le fragment d’expérience et sélectionnez dans la barre d’actions. La boîte de dialogue Edit Adaptive Forms - Embed(v2) s’ouvre.
- Recherchez et sélectionnez le formulaire adaptatif à incorporer dans le chemin de la ressource.
- Enregistrez les paramètres. Le formulaire adaptatif est désormais incorporé au fragment d’expérience.
Ensuite, vous pouvez 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’ 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.
-
Dans la boîte de dialogue de variation Convertir en fragment d’expérience, définissez les valeurs des 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 de 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 Adaptive Form-Embed(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 les éléments suivants :
-
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. Dans le cas contraire, la page de remerciement remplace le formulaire adaptatif dans le composant Adaptive Forms - Embed(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 confirmation affichée à l’écran après avoir envoyé 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 le paramètre local de la page AEM Sites au lieu du paramètre régional du formulaire adaptatif. Cette option s’applique uniquement au formulaire adaptatif (Foundation).
-
Définir la mise au point sur le formulaire : sélectionnez cette option pour définir la mise au point sur le premier champ du formulaire adaptatif. Cette option s’applique uniquement au formulaire adaptatif (Foundation).
-
Thème : sélectionnez un thème qui définit le style des composants de votre formulaire adaptatif. Le style comprend des 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 au formulaire adaptatif (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 le formulaire adaptatif (Foundation). -
Le formulaire couvre toute la largeur de l’image :
Un cadre intégré (iframe) est un élément d’HTML qui charge un formulaire adaptatif sur une page AEM Sites.-
Si la case à cocher Form 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 mise en page et la conception d’un formulaire adaptatif s’adaptent à toute la largeur du conteneur, ce qui le rend réactif et capable de s’adapter à 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, sélectionnez Le formulaire couvre toute la largeur de la case à cocher du cadre. -
Si la case à cocher Form cover long de la largeur du cadre n’est pas cochée, un formulaire adaptatif ne couvre pas toute la largeur du conteneur. Au lieu de cela, 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 à côté dans le conteneur. Si cette option n’est pas cochée, elle n’autorise l’intégration d’une seule Forms adaptative dans la page AEM Sites sans iframe.
note note NOTE 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 de l’image.
-
-
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.
Formulaire adaptatif incorporé Publish 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.
Modification d’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 dans 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.