Conteneur de formulaire form-container-adaptive-forms-core-component

Collecte de données : les formulaires peuvent être utilisés pour collecter des données auprès des visiteurs et visiteuses de sites Web à diverses fins, telles que des recherches sur le marché, une analyse du comportement des utilisateurs et des utilisatrices, etc.

Génération de piste : un formulaire peut être utilisé pour recueillir des informations auprès de clients et clientes potentiels, tels que le nom et l’adresse électronique, afin de générer des pistes pour les efforts de vente et de marketing.

E-commerce : les formulaires peuvent être utilisés pour les achats en ligne, ce qui permet aux clients et clientes de passer des commandes et d’effectuer des paiements sur le site Web.

Contact : un formulaire de contact permet aux visiteurs et visiteuses du site Web d’accéder facilement au propriétaire ou à l’organisation du site Web.

Questionnaires et sondages : les formulaires peuvent être utilisés pour recueillir les commentaires et les opinions des visiteurs et visiteuses du site par le biais d’enquêtes et de sondages.

Enregistrement d’événements : les formulaires peuvent être utilisés pour l’enregistrement d’événements, ce qui permet aux visiteurs et visiteuses du site Web de s’inscrire à des événements ou à des webinaires.

Abonnements : les formulaires peuvent être utilisés pour les abonnements à des sites Web, ce qui permet aux visiteurs et aux visiteuses de s’abonner à une newsletter ou à d’autres communications régulières.

Authentification de l’utilisateur : les formulaires peuvent être utilisés pour l’authentification des utilisateurs et des utilisatrices, ce qui permet aux visiteurs et aux visiteuses du site Web de créer des comptes et de se connecter pour accéder à du contenu ou à des fonctionnalités exclusifs.

Augmentation du taux de conversion : un formulaire bien conçu peut augmenter le taux de conversion en facilitant la réalisation de l’action souhaitée par les utilisateurs et les utilisatrices, comme l’achat d’un produit ou l’inscription à un service.

Titre - Avec son titre, vous pouvez facilement identifier un composant dans un formulaire. Par défaut, le titre s’affiche au-dessus du composant. Si vous n’ajoutez pas de titre, le nom du composant s’affiche à la place du texte du titre.

Services de préremplissage : cette option permet à l’utilisateur ou à l’utilisatrice de sélectionner un service de préremplissage pour récupérer les données lors de la génération du formulaire adaptatif. En savoir plus sur comment créer et configurer un service de préremplissage.

Rôle : le rôle est un attribut HTML utilisé pour spécifier l’objectif d’un élément HTML pour les technologies d’assistance telles que les lecteurs d’écran. L’attribut rôle est utilisé pour fournir un contexte et une signification sémantique supplémentaires à un élément, ce qui facilite l’interprétation et l’annonce du contenu à l’utilisateur ou à l’utilisatrice par les lecteurs d’écran. Par exemple, dans AEM Forms, le libellé d’un champ de formulaire peut avoir le rôle « libellé » et son champ de saisie peut avoir le rôle « zone de texte ». Cela permet au lecteur d’écran de comprendre la relation entre le libellé et le champ de saisie, et de les annoncer correctement à l’utilisateur ou à l’utilisatrice.

Catégorie de bibliothèque cliente : l’utilisateur ou l’utilisatrice peut configurer une bibliothèque JavaScript personnalisée par formulaire adaptatif. Il est recommandé de ne conserver que les fonctions réutilisables de la bibliothèque, qui dépendent des bibliothèques tierces jquery et underscore.js.Parfois, en cas de règles de validation complexes, le script de validation exact réside dans des fonctions personnalisées que l’utilisateur ou l’utilisatrice doit appeler à partir de l’expression du champ de validation. Pour rendre cette bibliothèque de fonctions personnalisées visible et disponible lors des validations côté serveur, l’utilisateur ou l’utilisatrice de formulaires peut configurer le nom de la bibliothèque cliente AEM sous l’onglet Réglages de base des propriétés du conteneur de formulaires adaptatifs.L’utilisateur ou l’utilisatrice peut configurer la bibliothèque personnalisée JavaScript pour chaque formulaire adaptatif. Dans la bibliothèque, conservez uniquement les fonctions réutilisables ayant une dépendance sur les bibliothèques tierces jquery et underscore.js.

Activer le menu hamburger pour la vue mobile - Cochez la case pour intégrer un menu hamburger dans votre formulaire pour la vue mobile. Représenté par trois lignes horizontales empilées verticalement, ce menu offre un affichage clair et épuré pour les panneaux sur les appareils plus petits, en particulier sur les appareils mobiles. Pour plus d’informations sur le menu hamburger, reportez-vous à la section En savoir plus sur le menu hamburger.

Lors de l’envoi - Sélectionnez Rediriger vers l’URL pour envoyer les utilisateurs du formulaire vers une page configurée après l’envoi, ou Afficher le message pour afficher un message de confirmation sur le formulaire.

URL/chemin de redirection - Cette option permet à l’utilisateur ou à l’utilisatrice de configurer une page pour chaque formulaire, vers laquelle les utilisateurs et utilisatrices du formulaire sont redirigés après l’envoi d’un formulaire adaptatif. Cliquez ici pour plus d’informations sur la façon de configurer des pages de redirection.

Action Envoyer - Une action Envoyer est déclenchée lorsqu’un utilisateur ou une utilisatrice clique sur le bouton Envoyer d’un formulaire adaptatif. Les utilisateurs et les utilisatrices peuvent sélectionner les actions Envoyer dans la liste déroulante qui sont prises en charge par défaut. Découvrir comment configurer une action Envoyer dans l’onglet Envoi.

Configuration de l’action - Configurez les mappages pour la transmission des valeurs de champ en tant que paramètres de requête de page de remerciement.

Activer la requête POST - Sélectionnez cette option pour envoyer les données de formulaire à l’aide d’une requête HTTP POST.

Classes CSS par défaut : vous pouvez fournir une classe CSS par défaut pour le composant principal Conteneur de formulaire des formulaires adaptatifs.

Styles autorisés : vous pouvez définir des styles en fournissant un nom et la classe CSS qui représente le style. Par exemple, vous pouvez créer un style nommé « texte en gras » et fournir la classe CSS « police d’épaisseur : gras ». Vous pouvez utiliser ou appliquer ces styles à un formulaire adaptatif dans l’éditeur de formulaires adaptatifs. Pour appliquer un style, sélectionnez le composant auquel vous souhaitez appliquer le style dans l’éditeur de formulaires adaptatifs, accédez à la boîte de dialogue Propriétés, puis sélectionnez le style de votre choix dans la liste déroulante Styles. Si vous devez mettre à jour ou modifier les styles, revenez simplement à la boîte de dialogue Conception, mettez à jour les styles dans l’onglet Styles et enregistrez les modifications.

Nom du groupe : vous pouvez fournir un nom pour identifier le groupe de propriétés personnalisées. Vous pouvez ajouter, supprimer ou réorganiser plusieurs groupes de propriétés personnalisées. Après avoir ajouté le groupe de propriétés personnalisées, vous pouvez voir les options suivantes :

• Paires clé-valeur : vous pouvez ajouter plusieurs noms et valeurs de propriétés personnalisées en cliquant sur le bouton Ajouter pour chaque groupe de propriétés personnalisées.

• Supprimer : appuyez ou cliquez pour supprimer le nom et la valeur des propriétés personnalisées.

• Réorganiser : appuyez ou cliquez et faites glisser pour réorganiser l’ordre du nom et de la valeur des propriétés personnalisées.

Le menu hamburger affiche uniquement les noms des panneaux. Voici différents scénarios illustrant la manière dont le nom du panneau apparaît dans le volet de navigation du menu hamburger en fonction des propriétés de configuration du panneau :

• Si vous définissez les propriétés du panneau sur masqué, le nom du panneau n’apparaît pas dans le volet de navigation du menu hamburger. Par exemple, si vous configurez les propriétés du panneau Financial Information comme hidden, le nom du panneau n’apparaît pas dans le volet de navigation du menu hamburger.

  {width="50%"}

• Si vous définissez les propriétés du panneau sur disabled, son nom apparaît dans le volet de navigation du menu hamburger, mais vous ne pouvez pas le sélectionner ni le modifier. Par exemple, si vous configurez les propriétés du panneau Financial Information comme disabled, le nom du panneau s’affiche dans le volet de navigation, mais il ne peut pas être sélectionné ni modifié.

  {width="50%"}

• Si vous masquez le titre du panneau, il n’apparaît pas dans le volet de navigation du menu hamburger. Un espace vierge s’affiche à la place de cette sélection, mais vous pouvez accéder aux champs du panneau en cliquant dessus. Par exemple, si vous masquez le titre du panneau Financial Information, l’espace vide s’affiche à sa place dans le volet de navigation du menu hamburger. Vous pouvez accéder aux champs du panneau en cliquant sur l’espace vide.

  {width="50%"}

Par défaut, le volet de navigation du composant de chemin de navigation prend en charge jusqu’à trois niveaux de navigation. Cependant, avec le composant personnalisé, vous pouvez configurer l’arborescence de navigation pour accueillir autant de niveaux que nécessaire.

Lorsque vous utilisez le menu hamburger, l’utilisateur peut naviguer entre les panneaux à l’aide de flèches. Cependant, une fois qu’un panneau est sélectionné, le menu se ferme automatiquement et le focus se déplace vers les champs du panneau sélectionné.

Accordéon

Fragments de formulaire adaptatif

reCAPTCHA du formulaire adaptatif

Bouton

Groupe de cases à cocher

Case à cocher

Date et heure

Sélecteur de date

Liste déroulante

E-mail

Conteneur de formulaire

Titre du formulaire

Pièce jointe

Pied de page

En-tête

Image

Champ numérique

Panneau

Téléphone

Onglet horizontal

Onglet vertical

Bouton radio

Bouton de réinitialisation

Révision

Signature tactile

Bouton Envoyer

Zone de texte

Texte

Onglet Conditions générales

Assistant