DocumentationAEM 6.5Guide de l’utilisateur

Créer un formulaire adaptatif basé sur des composants principaux creating-an-adaptive-form-core-components

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Administration
  • Développeur

Adobe recommande d’utiliser les composants principaux pour ajouter des formulaires adaptatifs à une page AEM Sitesou créer des formulaires adaptatifs autonomes.

Version
Lien de l’article
AEM as a Cloud Service
Cliquez ici
AEM 6.5
Cet article

Les formulaires adaptatifs vous permettent de créer des formulaires attrayants, réactifs, dynamiques et adaptatifs. AEM Forms fournit une interface utilisateur conviviale pour les entreprises permettant de créer rapidement des formulaires adaptatifs. L’interface utilisateur assure une navigation rapide par onglets pour sélectionner facilement un modèle, un style, des champs et des options d’envoi préconfigurés afin de créer un formulaire adaptatif.

Avant de commencer, découvrez les types de composants de formulaires disponibles :

  • Composants principaux de formulaires adaptatifs : il s’agit de composants de capture de données normalisés. Ces composants offrent des fonctionnalités de personnalisation, un délai de développement réduit et de plus bas coûts de maintenance pour vos expériences d’inscription numérique. Un développeur ou une développeuse peut facilement personnaliser et mettre en forme ces composants. Adobe recommande d’utiliser ces composants modernes et extensibles pour développer des formulaires adaptatifs.

  • Composants de base des formulaires adaptatifs : il s’agit de composants de capture de données classiques (anciens). Vous pouvez continuer à les utiliser pour modifier votre formulaire adaptatif existant basé sur les composants de base. Si vous créez des formulaires adaptatifs, Adobe recommande d’utiliser les composants principaux de formulaires adaptatifs.

Conditions préalables

Pour créer un formulaire adaptatif, vous devez disposer des éléments suivants :

  • Activer des composants principaux de formulaires adaptatifs pour votre environnement  : le projet AEM Archetype version 41 ou ultérieure est requis pour activer des composants principaux pour votre environnement. Lors de l’activation des composants principaux pour votre environnement, le modèle Formulaires adaptatifs (composant principal) et le thème de la zone de travail sont ajoutés à votre environnement.

  • Modèle de formulaire adaptatif  : un modèle fournit une structure de base et définit l’aspect, c’est-à-dire la mise en page et les styles, d’un formulaire adaptatif. Il comporte des composants pré-formatés contenant certaines propriétés et une certaine structure de contenu. Il fournit également les options permettant de définir un thème et une action d’envoi. Le thème définit l’aspect et l’action d’envoi définit l’action à entreprendre lors de l’envoi d’un formulaire adaptatif. Vous pouvez également déployer des exemples de modèles dans votre environnement. Vous pouvez ainsi créer rapidement des formulaires.

    note note
    NOTE
    Si vous n’avez pas le modèle Formulaires adaptatifs (composant principal) sur votre environnement, vous devez activer les composants principaux des formulaires adaptatifs pour votre environnement. Quand vous activez des composants principaux pour votre environnement, le modèle Formulaires adaptatifs (composant principal) est ajouté à votre environnement.

  • Un thème de formulaire adaptatif  : un thème contient des détails de style pour les composants et les panneaux. Ces styles incluent les propriétés telles que les couleurs d’arrière-plan, les couleurs d’état, la transparence, l’alignement et la taille. Lorsque vous appliquez un thème, le style spécifié se reflète sur les composants correspondants. Le thème Canvas est ajouté par défaut lorsque vous activez les composants principaux pour votre environnement. Vous pouvez télécharger et personnaliser les thèmes standard. Pour les thèmes prêts à l’emploi, vous pouvez déployer des exemples de thèmes pour votre environnement. Cela permet de commencer la mise en forme de vos formulaires et fournit une structure de base pour créer ou personnaliser un thème en fonction des besoins de votre entreprise.

  • Autorisations  : ajoutez vos utilisateurs et utilisatrices au groupe forms-users. Les membres du groupe forms-users ont les autorisations de créer un formulaire adaptatif. Pour obtenir une liste détaillée des groupes d’utilisateurs et d’utilisatrices spécifiques aux formulaires, voir Groupes et autorisations.

Créer un formulaire adaptatif create-an-adaptive-form

  1. Connectez-vous à votre instance de création AEM locale.

  2. Entrez vos informations d’identification dans la page de connexion d’Experience Manager. Une fois connecté, dans le coin supérieur gauche, sélectionnez Adobe Experience Manager > Formulaires > Formulaires et documents..

  3. Sélectionnez  Créer  > Créer des formulaires adaptatifs.

  4. Sélectionnez un modèle de composant principal de formulaire adaptatif et cliquez sur Suivant.

  5. Ajouter des propriétés s’affiche. Spécifiez les valeurs des champs de propriété suivants. Les champs Titre et Nom sont obligatoires :

    • Titre  : indique le nom d’affichage du formulaire. Le titre vous permet d’identifier le formulaire dans l’interface utilisateur Experience Manager Forms d’AEM Forms.
    • Nom :  indique le nom du formulaire. Un nœud portant le nom spécifié est créé dans le référentiel. Lorsque vous commencez à saisir un titre, la valeur du champ Nom est automatiquement générée. Vous pouvez modifier la valeur suggérée. Le champ Nom ne peut contenir que des caractères alphanumériques, des traits d’union et des traits de soulignement.
    • Description : indique des informations détaillées relatives au formulaire.
    • Bibliothèque cliente de thèmes : indique le thème d’un formulaire adaptatif. Par défaut, le thème adaptiveform.theme.canvas3 est sélectionné. Vous pouvez également choisir un thème différent dans le menu déroulant Bibliothèque cliente de thèmes.
    • Conteneur de configuration : définit un emplacement où sont stockés les fichiers de configuration des formulaires adaptatifs. Ces fichiers de configuration contiennent des paramètres et des propriétés liés au comportement et à l’apparence des formulaires adaptatifs.
    • Balises : indique les balises pour individualiser le formulaire adaptatif. Les balises aident à rechercher le formulaire. Pour créer des balises, saisissez les nouveaux noms de balise dans la boîte de dialogue Balises.

  6. Sélectionnez Créer. Un formulaire adaptatif est créé et une boîte de dialogue pour ouvrir le formulaire à modifier s’affiche.

  7. Sélectionnez Modifier pour ouvrir le formulaire nouvellement créé dans un nouvel onglet. Le formulaire s’ouvre pour être modifié et affiche le contenu disponible dans le modèle. Il affiche également la barre latérale permettant de personnaliser le formulaire nouvellement créé.

Utiliser des composants principaux des formulaires adaptatifs pour créer votre formulaire

Après avoir ouvert le formulaire pour le modifier, vous pouvez utiliser les composants principaux disponibles des formulaires adaptatifs pour ajouter des champs de formulaire à votre formulaire. Vous pouvez faire glisser les composants et les déposer ou utiliser l’option + [insérer le composant] pour ajouter ces composants à un formulaire. Pour en savoir plus sur les composants principaux disponibles des formulaires adaptatifs, reportez-vous à la documentation des composants principaux d’AEM. Vous pouvez également consulter https://aemcomponents.dev/ pour afficher les composants principaux disponibles en action.

Configurer l’action Envoyer pour un formulaire adaptatif configure-submit-action-for-form

L’action Envoyer vous 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’explorateur de contenu, puis sélectionnez le composant Conteneur de guide de votre formulaire adaptatif.

  2. Cliquez sur l’icône des propriétés du conteneur de guide Propriétés du guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.

  3. Cliquez sur l’onglet Envoi.

    Cliquez sur l’icône de clé à molette pour ouvrir la boîte de dialogue Conteneur de formulaires adaptatifs afin de configurer une action d’envoi.

  4. Sélectionnez et configurez une action d’envoi en fonction de vos besoins. Pour plus d’informations sur les actions d’envoi, voir Action d’envoi de formulaire adaptatif

Rediriger l’utilisateur ou l’utilisatrice vers une page ou afficher un message de remerciement lors de l’envoi 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’explorateur de contenu, puis sélectionnez le composant Conteneur de guide de votre formulaire adaptatif.

  2. Cliquez sur l’icône des propriétés du conteneur de guide Propriétés du guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.

  3. Ouvrez l’onglet Envoi.

    Cliquez sur l’icône de clé à molette pour ouvrir la boîte de dialogue Conteneur de formulaires adaptatifs afin de configurer une page de redirection ou un message de remerciement.

    • Pour configurer une URL de redirection, pour l’option Lors de l’envoi, sélectionnez l’option Rediriger vers l’URL, puis parcourez 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 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.

Configurer un schéma ou un modèle de données de formulaire pour un formulaire adaptatif configure-schema-or-data-model-for-form

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 :

Configurer un schéma JSON ou un modèle de données de formulaire pour votre formulaire

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

  1. Ouvrez l’explorateur de contenu, puis sélectionnez le composant Conteneur de guide de votre formulaire adaptatif.

  2. Cliquez sur l’icône des propriétés du conteneur de guide Propriétés du guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.

  3. Ouvrez l’onglet Modèle de données.

    Cliquez sur l’icône de clé à molette pour ouvrir la boîte de dialogue Conteneur de formulaires adaptatifs afin de configurer un schéma JSON ou un modèle de données de formulaire.

  4. Sélectionnez et configurez un schéma JSON ou un modèle de données de formulaire, en fonction de vos besoins :

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

NOTE
Vous pouvez modifier le schéma JSON ou le modèle de données de formulaire pour un formulaire adaptatif à l’aide des propriétés du conteneur de guide.

Configurer un service de préremplissage configure-prefill-service-for-form

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 :

Utiliser le service de préremplissage de modèle de données de formulaire pour préremplir les champs d’un formulaire adaptatif fdm-prefill-service

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 à 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’explorateur de contenu, puis sélectionnez le composant Conteneur de guide du formulaire adaptatif.
  2. Cliquez sur l’icône des propriétés du conteneur de guide Propriétés du guide . La fenêtre du conteneur de formulaires adaptatifs s’ouvre.
  3. Cliquez sur l’icône de propriétés de conteneur de formulaires adaptatifs 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.
    Cliquez sur l’icône de clé à molette pour ouvrir la boîte de dialogue Conteneur de formulaires adaptatifs afin de configurer une page de redirection ou un message de remerciement.
  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.

Comment renommer un formulaire adaptatif AEM ? rename-an-AEM-Adaptive-Form

Pour renommer un formulaire adaptatif, procédez comme suit :

  1. Sélectionnez un formulaire adaptatif dans l’interface d’utilisation d’AEM Forms.

  2. Cliquez sur le bouton Propriétés situé sur le rail supérieur.

    Propriétés

  3. Modifiez le nom du formulaire dans l’onglet Titre, comme illustré ci-dessous.

  4. Cliquez sur Enregistrer et fermer.

    Renommer un formulaire adaptatif AEM

Prochaines étapes

Voir également

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2