AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.
Ce tutoriel est une étape dans la Créer votre premier formulaire adaptatif série. Il est recommandé de suivre la série dans un ordre chronologique pour comprendre, exécuter et démontrer le cas d’utilisation complet du tutoriel.
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 pour les statistiques d’utilisation 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 à :
Créer un formulaire adaptatif permettant à un client d’ajouter une adresse de livraison
Créer une action d’envoi pour envoyer un courrier électronique contenant du contenu de formulaire
À la fin de l’article, vous disposerez d’un formulaire similaire au suivant :
[ ](assets/form-preview-mobile.gif)
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.
Appuyez sur Créer et sélectionner 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.
L’option Ajouter des propriétés s’affiche. Les champs Titre et Nom sont obligatoires :
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.shipping-address-add-update-form
dans le champ Nom. Le champ Nom indique le nom du formulaire. Un noeud portant le nom spécifié est créé dans le référentiel. Lorsque vous commencez à saisir un titre, la valeur du champ de 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 tirets et des traits de soulignement. Toutes les entrées non valides sont remplacées par un trait d’union.Appuyez sur Créer. Un formulaire adaptatif est créé et une boîte de dialogue pour ouvrir le formulaire à modifier s’affiche. Appuyez sur 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, voir Présentation de la création de formulaires adaptatifs.
AEM Forms fournit de nombreux composants pour afficher des informations sur un formulaire adaptatif. Les composants En-tête et Pied de page permettent d’obtenir un aspect cohérent pour un formulaire. Un en-tête comprend généralement le logo d’une société, le titre du formulaire et le résumé. Un pied de page contient généralement des informations de copyright, ainsi que des liens vers d’autres pages.
Cliquez sur >
. 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.
Appuyer Logo. La barre d’outils s’affiche. Cliquez sur dans la barre d’outils, saisissez We.Retail, puis cliquez sur
.
Appuyez sur Image. La barre d’outils s’affiche. Cliquez sur . L’explorateur de propriétés s’ouvre sur la partie gauche de l’écran. Recherchez et téléchargez l’image du logo. Cliquez sur
. L’image apparaît dans l’en-tête.
Si vous n’en avez pas, vous pouvez appuyer sur Obtenir le fichier pour télécharger le logo utilisé dans cet article.
Faites glisser le composant Pied de page de vers le formulaire adaptatif. À ce stade, le formulaire a l’apparence suivante :
Les composants sont les blocs de construction d’un formulaire adaptatif. AEM Forms fournit de nombreux composants pour capturer et afficher des informations dans un formulaire adaptatif. Vous pouvez faire glisser les composants de 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.
Customer ID
et le nom de l’élément en customer_ID
, activez les options Champ obligatoire et Utiliser le type d’entrée de nombre HTML5, puis cliquez sur 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é |
Autoriser plusieurs lignes |
Désactivé | Activé | Désactivé |
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 cliquez sur .
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 motif |
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 cliquez sur .
Propriété | Valeur |
---|---|
Titre | |
Nom de l’élément | customer_Email |
Champ obligatoire | Activé |
Faites glisser un 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 cliquez sur .
Propriété | Valeur |
Titre | Preuve d'adresse approuvée par le gouvernement |
Nom de l’élément | customer_Address_Proof |
Champ obligatoire | Activé |
Faites glisser un Bouton Envoyer du formulaire adaptatif. Placez-le avant le composant de pied de page. Ouvrez les propriétés du composant, remplacez Nom de l’élément par address_addition_update_submit, appuyez sur . La mise en page du formulaire est complète et le formulaire a l’apparence suivante :
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 les données de formulaire dans le référentiel local, envoyer les données de formulaire à un point de terminaison REST, envoyer les données de formulaire sous forme d’e-mail, etc. Les formulaires adaptatifs fournissent quelques autres actions d’envoi prêtes à l’emploi. Pour plus d’informations, voir 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 :
Configurez le serveur de courrier électronique. Pour plus d’informations, reportez-vous à la section Configuration des notifications par courrier électronique.
/content/help/en/experience-manager/6-4/sites-administering/notification.html
Cliquez sur Conteneur de formulaires dans l’explorateur de contenu, puis sur . 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 cliquez sur .
Propriété | Valeur |
---|---|
Origine | donotreply@weretail.com |
To | ${customer_Email} |
Objet | Remerciements : Vous avez ajouté l’adresse de livraison sur le site web We.Retail. |
Modèle de courrier électronique | 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 maintenant prévisualiser le formulaire et tester la fonctionnalité. Si vous avez utilisé le nom mentionné dans le tutoriel et que vous accédez au formulaire sur l’ordinateur exécutant le serveur AEM Forms, le formulaire est disponible à l’adresse http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.
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 également les validations appliquées à un formulaire. Par exemple, si une erreur s’affiche lorsqu’un champ obligatoire est laissé vide.
Les formulaires adaptatifs offrent également la possibilité d’émuler l’expérience d’un formulaire pour divers périphériques. Par exemple, pour iPhone, iPad et appareils de bureau. Vous pouvez utiliser les options Prévisualisation et Gestionnaire de conjointement pour prévisualiser un formulaire pour les appareils dotés de tailles d’écran différentes.
Le formulaire adaptatif pour l’ajout d’une adresse est prêt. Si vous avez utilisé le nom mentionné dans le tutoriel et que vous accédez au formulaire sur l’ordinateur exécutant le serveur AEM Forms, le formulaire est disponible à l’adresse http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.