Didacticiel : création d’un formulaire adaptatif

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.

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.

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.

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.

Sélectionnez  >  . 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.

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

Sélectionnez une image. La barre d’outils s’affiche. Sélectionnez . 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 . 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.

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

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 .

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.:

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 .

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 .

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 .

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 . La mise en page du formulaire est complète et le formulaire a l’apparence suivante :

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

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

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

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.