DocumentationAEM 6.5Guide de l’utilisateur

Didacticiel : création d’un formulaire adaptatif do-not-publish-tutorial-create-an-adaptive-form

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

Créé pour :

  • Administration
  • Utilisateur ou utilisatrice
  • Développeur

02-create-adaptive-form-main-image

Ce tutoriel fait partie de la série Création de votre premier formulaire adaptatif. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et accomplir le cas d’utilisation complet du tutoriel.

À propos du tutoriel about-the-tutorial

Les formulaires adaptatifs sont des formulaires dynamiques et réactifs de nouvelle génération. Vous pouvez utiliser des formulaires adaptatifs pour offrir des expériences personnalisées. Vous pouvez également intégrer des formulaires adaptatifs à Adobe Analytics à des fins d’utilisation des statistiques et à Adobe Campaign pour la gestion des campagnes. Pour plus d’informations sur les fonctionnalités des formulaires adaptatifs, consultez la section Présentation de la création de formulaires adaptatifs.

Il est plus facile de créer et de gérer des formulaires en suivant un processus approprié. Dans cet article, vous apprenez à :

À la fin de l’article, vous disposerez d’un formulaire similaire au suivant :
Aperçu du formulaire sur mobile

Étape 1 : création du formulaire adaptatif step-create-the-adaptive-form

  1. Connectez-vous à l’instance d’auteur AEM et accédez à Adobe Experience Manager  >  Formulaires  >  Formulaires et documents. L’URL par défaut est http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.

  2. Sélectionnez Créer et Formulaire adaptatif. Une option permettant de sélectionner un modèle s’affiche. Sélectionnez le modèle Vide, puis sélectionnez Suivant.

  3. L’option Ajouter des propriétés s’affiche. Les champs Titre et Nom sont obligatoires :

    • Titre : spécifiez Add new or update shipping address dans le champ Titre. Le champ Titre spécifie le nom d’affichage du formulaire. Le titre vous permet d’identifier le formulaire dans l’interface utilisateur d’AEM Forms.
    • Nom : spécifiez shipping-address-add-update-form dans le champ Nom. Le champ 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. Toutes les entrées non valides sont remplacées par un trait d’union.

  4. Sélectionnez Créer. Un formulaire adaptatif est créé et une boîte de dialogue pour ouvrir le formulaire à modifier s’affiche. Sélectionnez Ouvrir pour ouvrir le formulaire nouvellement créé dans un nouvel onglet. Le formulaire s’ouvre pour modification. Il affiche également la barre latérale permettant de personnaliser le formulaire nouvellement créé selon vos besoins.

    Pour plus d’informations sur l’interface de création de formulaires adaptatifs et les composants disponibles, consultez Présentation de la création de formulaires adaptatifs.

    Un formulaire adaptatif nouvellement créé.

Étape 2 : ajout d’un en-tête et d’un pied de page step-add-header-and-footer

AEM Forms fournit de nombreux composants pour l’affichage d’informations sur un formulaire adaptatif. Les composants d’en-tête et de pied de page contribuent à une apparence cohérente du formulaire. Un en-tête comprend généralement le logo d’une entreprise, le titre du formulaire et un résumé. Un pied de page contient généralement des informations de copyright, ainsi que des liens vers d’autres pages.

  1. Sélectionnez toggle-side-panel  >  treeextenall . L’explorateur de composants s’affiche. Faites glisser et déposez le composant En-tête de l’explorateur de composants vers le formulaire adaptatif.

  2. Sélectionnez Logo. La barre d’outils s’affiche. Sélectionnez aem_6_3_edit dans la barre d’outils, saisissez We.Retail, puis sélectionnez aem_6_3_forms_save .

  3. Sélectionnez une image. La barre d’outils s’affiche. Sélectionnez cmppr . L’explorateur de propriétés s’ouvre sur la partie gauche de l’écran. Recherchez et téléchargez l’image du logo. Sélectionnez aem_6_3_forms_save . L’image apparaît dans l’en-tête.

    Vous pouvez sélectionner Obtenir le fichier pour télécharger le logo utilisé dans cet article si vous n’en avez pas.

Obtenir le fichier

  1. Faites glisser le composant Pied de page de treeexpandall vers le formulaire adaptatif. À ce stade, le formulaire a l’apparence suivante :

    adaptive-form-with-headers-and-footers

Étape 3 : ajout de composants pour capturer et afficher les informations step-add-components-to-capture-and-display-information

Les composants sont les blocs de construction d’un formulaire adaptatif. AEM Formsfournit de nombreux composants pour la capture et l’affichage d’informations dans un formulaire adaptatif. Vous pouvez faire glisser les composants de treeexpandall vers un formulaire. Pour en savoir plus sur les composants disponibles et les fonctionnalités correspondantes, voir Présentation de la création de formulaires adaptatifs.

  1. Faites glisser le composant de zone numérique vers le formulaire adaptatif. Placez-le avant le composant de pied de page. Ouvrez les propriétés du composant, remplacez le titre du composant par Customer ID et le nom de l’élément par customer_ID. Activez les options Champ obligatoire et Utiliser le type d’entrée de nombre HTML5, puis sélectionnez aem_6_3_forms_save .

  2. Faites glisser trois composants de la zone de texte vers le formulaire adaptatif. Placez-les avant le pied de page. Définissez les propriétés suivantes pour ces zones de texte.:

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 html-authored no-header
    Propriété Zone de texte 1 Zone de texte 2 Zone de texte 3
    Titre Nom Adresse d’expédition État
    Nom de l’élément customer_Name customer_Shipping_Address customer_State
    Champ obligatoire Activé Activé Activé
    Permettre des lignes multiples Désactivé Activé Désactivé

  3. Faites glisser un composant de Zone numérique avant le composant de pied de page. Ouvrez les propriétés du composant, définissez les valeurs répertoriées dans le tableau ci-dessous et sélectionnez aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Propriété Valeur
    Titre Code postal
    Nom de l’élément customer_ZIPCode
    Nombre maximal de chiffres 6
    Champ obligatoire Activé
    Type de modèle d’affichage Aucun modèle

  4. Faites glisser un composant Courrier électronique avant le composant de pied de page. Ouvrez les propriétés du composant, définissez les valeurs répertoriées dans le tableau ci-dessous et sélectionnez aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propriété Valeur
    Titre E-mail
    Nom de l’élément customer_Email
    Champ obligatoire Activé

  5. Faites glisser un composant Pièce jointe avant le composant de pied de page. Ouvrez les propriétés du composant, définissez les valeurs répertoriées dans le tableau ci-dessous et sélectionnez aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    Propriété Valeur
    Titre Preuve d’adresse approuvée par le gouvernement
    Nom de l’élément customer_Address_Proof
    Champ obligatoire Activé

  6. Faites glisser un composant Bouton Envoyer vers le formulaire adaptatif. Placez-le avant le composant de pied de page. Ouvrez les propriétés du composant, remplacez le nom de l’élément par address_addition_update_submit et sélectionnez aem_6_3_forms_save . La mise en page du formulaire est complète et le formulaire a l’apparence suivante :

    adaptive-form-with-all-the-components

Étape 4 : configuration de l’action d’envoi du formulaire adaptatif step-configure-submit-action-for-the-adaptive-form

Une action d’envoi est déclenchée lorsqu’un utilisateur ou une utilisatrice clique sur le bouton Envoyer d’un formulaire adaptatif. Vous pouvez utiliser une action d’envoi pour enregistrer des données de formulaire dans le référentiel local, envoyer des données de formulaire vers un point d’entrée REST, envoyer des données de formulaire par e-mail, et plus encore. Les formulaires adaptatifs fournissent quelques autres actions d’envoi prêtes à l’emploi. Pour plus de détails, consultez Configuration de l’action Envoyer.

Les étapes suivantes vous permettent de configurer les actions d’envoi dʼe-mail et d’envoi de démonstration du formulaire :

  1. Configurez le serveur de courrier électronique. Pour plus d’informations, reportez-vous à la section Configuration des notifications par courrier électronique.

  2. Sélectionnez Conteneur de formulaires dans l’explorateur de contenu, puis cmppr . L’explorateur de propriétés s’ouvre sur la partie gauche de l’écran.

  3. Accédez à Envoi  > Action d’envoi. Sélectionnez Envoyer un courrier électronique. Spécifiez les valeurs suivantes et sélectionnez aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Propriété Valeur
    Origine donotreply@weretail.com
    To ${customer_Email}
    Objet Accusé de réception : vous avez ajouté l’adresse de livraison sur le site web de We.Retail.
    Modèle d’e-mail Bonjour ${customer_Name}, l’adresse suivante est ajoutée comme adresse de livraison pour votre compte :
    ${customer_Name}, ${customer_Shipping_Address}, ${customer_State} et ${customer_ZIPCode}
    . Cordialement, We.Retail
    Inclure les pièces jointes Activé

    Votre formulaire est prêt. Vous pouvez à présent prévisualiser le formulaire et tester la fonctionnalité. Si vous avez utilisé le nom mentionné dans le tutoriel et avez accédé au formulaire sur la machine qui exécute le serveur AEM Forms, le formulaire est disponible à l’adresse http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Étape 5 : prévisualisation et envoi du formulaire adaptatif step-preview-and-submit-the-adaptive-form

Vous pouvez utiliser l’option Aperçu pour évaluer l’apparence et le comportement d’un formulaire. Vous pouvez envoyer un formulaire en mode aperçu et vérifier les validations appliquées à un formulaire. Si une erreur s’affiche lorsqu’un champ obligatoire est laissé vide, par exemple.

Les formulaires adaptatifs permettent également d’émuler l’expérience d’un formulaire pour différents appareils. Par exemple, pour iPhone, iPad et appareils de bureau. Vous pouvez utiliser les options Prévisualisation et Gestionnaire de   l’émulateur conjointement pour prévisualiser un formulaire pour les appareils dotés de tailles d’écran différentes.

  1. Sélectionnez l’option Aperçu sur le côté droit de l’éditeur de formulaires. Le formulaire s’ouvre en mode aperçu. Si vous avez utilisé le nom mentionné dans le didacticiel, l’URL de l’aperçu du formulaire est http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Utilisez  gestionnaire  pour visualiser l’apparence du formulaire sur différents appareils.
  3. Remplissez les champs du formulaire, puis sélectionnez Envoyer. Le formulaire est envoyé et vous êtes redirigé(e) vers la page de remerciement par défaut. Vous pouvez également spécifier une page de remerciement personnalisée. Pour plus de détails, voir Configuration de la page de redirection.

Le formulaire adaptatif pour l’ajout d’une adresse est prêt. Si vous avez utilisé le nom mentionné dans le tutoriel et avez accédé au formulaire sur la machine qui exécute le serveur AEM Forms, le formulaire est alors disponible à l’adresse http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

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