Show Menu
SUJETS×

Didacticiel : création d’un formulaire adaptatif

Ce didacticiel est une étape 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 démontrer le cas d’utilisation complet du didacticiel.

À propos du didacticiel

Les formulaires adaptatifs sont des formulaires dynamiques et réactifs 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 pour les statistiques d’utilisation et Adobe Campaign pour la gestion des campagnes. For more information about adaptive forms capabilities, see Introduction to authoring adaptive forms .
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 : form-preview-mobile.gif

Étape 1 : création du formulaire adaptatif

  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. Appuyez sur Créer et sélectionner le Formulaire adaptatif . Une option permettant de sélectionner un modèle s’affiche. Cliquez sur le modèle Vide pour le sélectionner, puis appuyez sur Suivant .
  3. L’option Ajouter des propriétés s’affiche. Les champs Titre et Nom sont obligatoires :
    • ​Titre : Indiquez 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 indiqué est alors créé dans le référentiel. Lorsque vous commencez à saisir un titre, une valeur pour le champ de nom est automatiquement générée. Vous pouvez modifier la valeur suggérée. Le champ de nom peut contenir uniquement des caractères alphanumériques, des traits d’union et des tirets bas. Toutes les entrées non valides sont remplacées par un tiret.
  4. Appuyez sur Créer . Un formulaire adaptatif est créé et une boîte de dialogue pour ouvrir le formulaire à modifier s’affiche. Tap Open to open the newly created form in a new tab. 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, voir Présentation de la création de formulaires adaptatifs .

Étape 3 : ajout de composants pour capturer et afficher les informations

Les composants sont les blocs de construction d’un formulaire adaptatif. AEM Forms fournit de nombreux composants pour la capture et l’affichage d’informations dans un formulaire adaptatif. You can drag the components from to a form. 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 Zone numérique dans le formulaire adaptatif. Placez-le avant le composant de pied de page. Open properties of the component, change Title of the component to Customer ID , change Element Name to customer_ID , enable the Required Field option, enable the Use HTML5 Number Input Type option, and tap .
  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. :
Propriétés 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é
  1. Faites glisser un composant de Zone numérique avant le composant de pied de page. Open properties of the component, set values listed in the below table, Tap .
    Propriétés
    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
  2. Faites glisser un composant Courrier électronique avant le composant de pied de page. Open properties of the component, set values listed in the below table, and tap .
    Propriétés
    Valeur
    Titre
    Courriel
    Nom de l’élément
    customer_Email
    Champ obligatoire
    Activé
  3. Faites glisser un composant Pièce jointe avant le composant de pied de page. Open properties of the component, set values listed in the below table, and tap .
Propriétés Valeur
Titre Preuve d’adresse approuvée par le gouvernement
Nom de l’élément customer_Address_Proof
Champ obligatoire Activé
  1. Faites glisser un composant Bouton Envoyer vers le formulaire adaptatif. Placez-le avant le composant de pied de page. Open properties of the component, change Element Name to address_addition_update_submit , tap . La mise en page du formulaire est complète et le formulaire a l’apparence suivante :

Étape 4 : configuration de l’action d’envoi du formulaire adaptatif

Une action d’envoi est déclenchée lorsqu’un utilisateur 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 de fin REST, envoyer des données de formulaire par courrier électronique, et plus encore. Les formulaires adaptatifs fournissent quelques actions d’envoi prêtes à l’emploi. Pour plus d’informations, voir  Configuration de l’action Envoyer .
En suivant les étapes ci-dessous, vous pouvez configurer l’action Envoyer par messagerie et l’action Envoyer 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. Tap Form Container in the Content browser and tap . 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 appuyez sur .
    Propriétés
    Valeur
    Origine
    To
    ${customer_Email}
    Objet
    Accusé de réception : vous avez ajouté l’adresse de livraison sur le site Web de We.Retail.
    Modèle de courrier électronique
    Bonjour ${customer_Name} , L'adresse suivante est ajoutée en tant qu'adresse de livraison pour votre compte :
    ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode}
    Regards, 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 didacticiel et accédez 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

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, iPhone, iPad et appareils de bureau. You can use both Preview and Emulator options in conjunction with each other to preview a form for devices of different screen sizes.
  1. Appuyez sur 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. Use to view how the form looks on various devices.
  3. Remplissez les champs du formulaire et appuyez sur Envoyer . Le formulaire est envoyé et vous êtes redirigé 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 didacticiel et accédez 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 .