Présentation

La fonction dédiée aux formulaires adaptatifs d’Adobe Experience Manager (AEM) permet de créer des formulaires adaptatifs attrayants et réactifs. 

Lorsque vous créez un formulaire adaptatif, vous pouvez sélectionner un modèle de formulaire. Il est important de sélectionner avec soin le modèle de données qui correspond à vos besoins, tout en optimisant vos investissements existants dans les ressources XFA et XSD, le cas échéant. Vous pouvez créer un formulaire adaptatif :

  • Sans modèle de formulaire
    Les formulaires adaptatifs créés avec cette option n’utilisent pas de modèle de données. Les données XML générées à partir de ce type de formulaire présentent une structure plate avec des champs et des valeurs correspondantes.
  • À l’aide d’une définition de schéma XM (XSD)
    Le schéma XML représente la structure dans laquelle les données sont générées ou utilisées par le système principal de votre organisation. Vous pouvez associer un schéma XML à un formulaire adaptatif et utiliser ses éléments pour ajouter du contenu dynamique à un formulaire adaptatif. Les éléments du schéma seront ensuite disponibles dans l’outil de recherche de contenu au moment de la création de formulaires adaptatifs. 
  • À l’aide de modèles de formulaire
    Il s’agit du modèle de données de formulaire idéal si vous avez des investissements dans des formulaires HTML5 de type XFA. Il fournit une méthode directe de conversion des formulaires de type XFA en formulaires adaptatifs. Toutes les règles XFA existantes sont conservées dans les formulaires adaptatifs associés. Les formulaires adaptatifs qui en résultent prennent en charge les éléments XFA, tels que les validations, les événements, les propriétés et les motifs.

Il est ainsi possible de ventiler un formulaire dans des sections logiques. Vous pouvez permettre aux utilisateurs de voir une section spécifique tout en masquant les autres. Vous pouvez également spécifier les sections d’un formulaire que vous souhaitez que les utilisateurs voient pour les formulaires volumineux. Vous pouvez en outre créer des formulaires adaptatifs qui s’adaptent dynamiquement en ajoutant ou en supprimant des champs ou des sections en fonction des réponses, des périphériques et de l’environnement de travail des utilisateurs . Les utilisateurs finaux peuvent se concentrer sur le remplissage d’une section à la fois. 

Interface de création de formulaires adaptatifs

L’interface utilisateur optimisée pour les écrans tactiles permet de créer des formulaires adaptatifs de manière intuitive et offre les avantages suivants :

  • Fonctionnalité glisser-déposer
  • Composants standard de formulaire
  • Référentiel intégré de ressources  

Lorsque vous créez ou modifiez un formulaire adaptatif, vous utilisez les éléments suivants de l’interface utilisateur :

  • Barre latérale
  • Barre d’outils de la page
  • Page de formulaires adaptatifs
  • Barre d’outils de composants
Interface de création de formulaires adaptatifs
A. Barre latérale B. Barre d’outils de la page C. Page de formulaires adaptatifs 

Remarque :

Pour utiliser l’interface utilisateur classique, remplacez /editor.html/ par /cf#/ dans l’URL du formulaire.

Barre latérale

La barre latérale vous permet de

  • Voir le contenu du formulaire tel que les panneaux, les composants, les champs et la mise en page.
  • Modifier les propriétés du composant.
  • Rechercher, afficher et utiliser des ressources dans votre référentiel de gestion des actifs numériques AEM.
  • Ajouter des composants dans le formulaire.
Barre latérale
Cliquez sur l’image pour l’agrandir

A. Explorateur de contenu B. Explorateur de propriétés C. Explorateur de ressources D. Explorateur de composants 

La barre latérale comprend les explorateurs suivants :

  • Explorateur de contenu
    Dans l’explorateur de contenu, vous pouvez voir
    • Objets de formulaire
      Affiche la hiérarchie des objets du formulaire. L’auteur peut accéder au composant spécifique du formulaire en appuyant sur cet élément dans l’arborescence de l’objet de formulaire. L’auteur peut alors rechercher des objets et les réorganiser depuis l’arborescence.
    • Objets de modèle de données
      Permet de voir la hiérarchie des modèles de formulaire.
      Vous pouvez faire glisser des éléments du modèle de formulaire sur le formulaire adaptatif. Les éléments ajoutés sont automatiquement convertis en composants de formulaire, tout en conservant leurs propriétés d’origine. Vous pouvez afficher des objets de modèle de données lorsque votre formulaire utilise un modèle basé sur un schéma XML ou XDP.
  • Explorateur de propriétés
    Permet de modifier les propriétés d’un composant. Les propriétés affichées varient en fonction d’un composant. Pour afficher les propriétés du conteneur de formulaires adaptatifs :
    Sélectionnez un composant, puis appuyez sur > Conteneur de formulaires adaptatifs , puis appuyez sur .
  • Explorateur de ressources
    Isole différents types de contenu, tels que des images, des documents, des pages, des séquences vidéo, etc. Pour plus d’informations sur la recherche de ressources dans la gestion des actifs numériques, voir Rechercher et afficher des actifs numériques.
  • Explorateur de composants
    Comprend des composants que vous pouvez utiliser pour créer un formulaire adaptatif. Vous pouvez faire glisser des composants sur le formulaire adaptatif afin d’ajouter des éléments de formulaire, puis configurer les éléments ajoutés conformément aux exigences. Le tableau ci-dessous décrit les composants répertoriés dans l’explorateur de composants. 
Composant Fonctionnalité
Pied de page de formulaire adaptatif
Ajoute un en-tête qui contient habituellement le logo d’une société, le titre du formulaire et le résumé.
En-tête de formulaire adaptatif Ajoute le pied de page qui contient généralement des informations de copyright, ainsi que des liens vers d’autres pages. 
Bouton Ajoute un bouton que vous pouvez configurer afin d’effectuer des actions telles que Enregistrer, Réinitialiser, Passer au suivant, Revenir au précédent, etc.
Diagramme Ajoute un diagramme que vous pouvez utiliser dans des formulaires et des documents adaptatifs pour la représentation visuelle des données bidimensionnelles dans les panneaux et les lignes de tableau répétables.
Case à cocher Ajoute une case à cocher.
Sélecteur de date Ajoute un champ de calendrier pour sélectionner une date.
Fragment de document Ajoute des composants réutilisables d’une correspondance.
Groupe de fragments de document Ajoute le groupe de fragments de document associés que vous pouvez utiliser dans un modèle de lettre en tant que même unité.
Liste déroulante Ajoute une liste déroulante, à sélection simple ou multiple.
E-sign

Ajoute une zone de signature dans laquelle les utilisateurs peuvent signer le formulaire. Vous pouvez configurer des services de signature tactile ou des services Adobe Document Cloud eSign.

Dans le cas des formulaires adaptatifs qui utilisent le modèle Formulaire XDP, le composant E-Sign affiche le modèle de formulaire d’origine associé au formulaire adaptatif.  

Remarque : Les formulaires adaptatifs contenant des composants E-sign
ne prennent pas en charge les utilisateurs anonymes.

Pièce jointe Ajoute un bouton qui permet aux utilisateurs de rechercher et de joindre des documents annexes au formulaire.
Liste des pièces jointes
Ajoute un champ qui répertorie toutes les pièces jointes téléchargées à l’aide du composant Pièce jointe.
Image Permet d’insérer une image.
Zone numérique Ajoute un champ destiné à la saisie de valeurs numériques.
Panneau Ajoute un panneau ou un sous-panneau.
Zone de mot de passe Ajoute un champ destiné à la saisie d’un mot de passe.
Bouton radio Ajoute des cases d’option.
Bouton Précédent Ajoute un bouton permettant de revenir à la page ou au panneau précédents.
Bouton Réinitialiser Ajoute un bouton permettant de réinitialiser des champs de formulaire.
Signature tactile Ajoute un champ destiné à la saisie de signatures tactiles.
Séparateur Active la ségrégation visuelle des panneaux dans le formulaire
Texte statique Permet de spécifier du texte statique.
Bouton Envoi Ajoute un bouton d’envoi permettant d’envoyer le formulaire à l’action d’envoi configurée.
Résumé Ajoute un texte récapitulatif spécifié par les auteurs. Ce texte s’affiche après l’envoi du formulaire.
Tableau Ajoute un tableau qui permet de classer les données par lignes et par colonnes.  
Termes et conditions
Ajoute un champ que les auteurs peuvent utiliser pour spécifier les conditions générales que les utilisateurs doivent consulter avant de remplir le formulaire.
Zone de texte Ajoute une zone de texte dans laquelle un utilisateur peut spécifier les informations nécessaires.
Vérifier

Dans le cas des formulaires adaptatifs qui utilisent le modèle Formulaire XDP, le composant Vérifier effectue le rendu du formulaire pour permettre aux utilisateurs de vérifier les informations.

Remarque : Les formulaires adaptatifs contenant des composants Vérifier ne prennent pas en charge les utilisateurs anonymes.

Champ de saisie de date Le composant de champ de saisie de date permet aux utilisateurs de saisir dans trois zones séparées le jour, le mois et l’année. Vous pouvez personnaliser l’apparence du composant et modifier le format de date. Ainsi, la date peut être saisie au format MM/JJ/AAAA ou JJ/MM/AAAA.
Procédure pas à pas numérique Utilisez la procédure pas à pas numérique pour permettre à vos clients d’indiquer une valeur numérique, qu’ils peuvent augmenter ou diminuer en fonction d’une étape prédéfinie.
Choix d’image Utilisez le Composant de choix d’image pour permettre à vos clients de sélectionner une image et fournir ainsi des informations. Vous pouvez utiliser ces informations pour fournir des services personnalisés à vos clients.
Basculer Ajoute un bouton bascule qui exécute une opération de bascule ou active/désactive une action.

Chaque composant est associé à des propriétés qui contrôlent son apparence et ses fonctionnalités. Pour configurer les propriétés d’un composant, tapez sur celui-ci et sélectionnez pour ouvrir les propriétés du composant dans l’explorateur de propriétés.

Un composant est identifié par son nom d’élément. Lorsque vous appuyez sur , vous pouvez changer le nom du composant en modifiant la valeur du champ Nom de l’élément dans l’explorateur de propriétés. 

Remarque :

Vous pouvez saisir uniquement des lettres, des chiffres, des traits d’union (-) et des traits de soulignement (_) dans le champ Nom de l’élément. D’autres caractères spéciaux ne sont pas autorisés et le nom de l’élément doit commencer par une lettre. 

Barre d’outils de la page

La barre d’outils de la page, située en haut de l’écran, propose des options permettant d’afficher un aperçu du formulaire, d’en modifier les propriétés, puis d’en modifier la disposition. Vous pouvez prévisualiser le formulaire lors de son écriture et apporter des modifications en conséquence.

Dans la barre d’outils de la page, vous voyez :

  • Activer/désactiver le panneau latéral : Affiche ou masquer la barre latérale.
  • Informations sur la page : Affiche les propriétés de la page, permet de publier/d’annuler la publication d’un formulaire, de lancer un flux de travail de formulaire et d’ouvrir le formulaire dans une IU classique.
  • Émulateur : Simule l’aspect de votre formulaire pour différentes tailles d’affichage, selon les tablettes et les téléphones, par exemple.
  • Modifier : Sélectionne d’autres modes comme Modifier, Style, Développeur et Conception
    • Modifier : Modifie les propriétés du formulaire et de ses composants. Exemple : l’ajout d’un composant, le dépôt d’une image et l’indication des champs obligatoires. 
    • Style : Définit l’aspect des composants de votre formulaire. Par exemple, en mode Style, vous pouvez sélectionner un panneau et définir sa couleur d’arrière-plan.
    • Développeur : Permet à un développeur de :
      • Découvrir la composition des formulaires.
      • Déboguer en temps réel afin de mieux résoudre les problèmes.
    • Conception. Permet d’activer ou de désactiver les composants personnalisés ou les composants prêts à l’emploi qui ne sont pas répertoriés dans la barre latérale. 
  • Aperçu : Permet de prévisualiser le formulaire avant de le publier.

Barre d’outils de composants

Barre d’outils de composants de l’interface utilisateur tactile

Lorsque vous sélectionnez un composant, une barre d’outils s’affiche, vous permettant de l’utiliser. Vous avez la possibilité de couper, coller, déplacer et spécifier les propriétés des composants. Vous avez le choix entre :

A. Configurer : Permet d’afficher les propriétés du composant dans la barre latérale. , La configuration de ces propriétés permet de personnaliser la saisie de données. Vous pouvez changer le nom de l’élément du composant et indiquer le texte d’étiquette du champ Titre du composant. Le nom d’élément permet de capturer des valeurs que les utilisateurs saisissent à l’aide du composant. Dans les propriétés du composant, vous indiquez le comportement du composant et gérez l’entrée de l’utilisateur. Configurez les propriétés de la barre latérale pour capturer les données utilisateur et les utiliser ultérieurement. Les propriétés du conteneur de formulaires adaptatifs permettent de spécifier des bibliothèques clients, des mises en page, des thèmes, des documents d’enregistrement, des paramètres d’enregistrement, des paramètres d’envoi et des paramètres de métadonnées. 

B. Copier : Permet de copier un composant et le coller ailleurs dans le formulaire. Lorsque vous collez un composant, ce dernier obtient un nouveau nom d’élément mais conserve les propriétés du composant copié. 

C. Couper : Permet de déplacer un composant d’un endroit à un autre dans le formulaire adaptatif.

D. Supprimer : Permet de supprimer le composant du formulaire. 

E. Insérer : Permet d’insérer un composant au-dessus du composant sélectionné. 

F. Coller : Permet de coller du composant coupé ou copié à l’aide des options décrites ci-dessus. 

G. Éditeur de règles : Permet d’ouvrir l’éditeur de règles. Pour plus d’informations, voir Éditeur de règles

H. Groupe : Permet de sélectionner plusieurs composants permettant de couper, copier ou coller plus d’un composant d’un ensemble. 

I. Parent : Permet de sélectionner le parent d’un composant. Par exemple, un champ de texte se trouve dans une sous-section, qui réside elle-même dans une section. La section réside dans le panneau racine de guide et le conteneur du formulaire adaptatif est le parent d’un panneau racine de guide. Pour chaque composant s’affichent toutes les options avec la hiérarchie triée de bas en haut.

Par exemple, si vous tapez Parent pour une zone de texte, vous pouvez voir les éléments suivants :

  • Sous-section
  • Section
  • guideRootPanel
  • Conteneur de formulaires adaptatifs

J. Autres : Fournit des options permettant d’utiliser le composant sélectionné.  

  • Afficher l’expression SOM
  • Enregistrer un panneau en tant que fragment (pour les panneaux uniquement)
  • Ajouter un panneau enfant (pour les panneaux uniquement)
  • Ajouter une barre d’outils de panneau (pour les panneaux uniquement)
  • Remplacer (pas pour les panneaux)

Page de formulaires adaptatifs

La page de formulaires adaptatifs est le formulaire proprement dit. Elle est identique à toute autre page de gestion de contenu Web modélisée en tant que composant de gestion de contenu Web cq:Page. L’illustration suivante présente la structure de contenu d’un formulaire adaptatif standard.

Structure de contenu d’une page de gestion de contenu Web de formulaires adaptatifs

La structure de contenu contient généralement les composants principaux ci-dessous :

  • guideContainer : racine d’un formulaire adaptatif, indiquée sous la forme Début du formulaire adaptatif dans l’interface utilisateur du formulaire. Dans ce composant, vous pouvez spécifier les éléments suivants :
    • Mise en page du formulaire adaptatif pour mobiles : définit l’apparence du formulaire sur les appareils mobiles.
    • Page de remerciement : définit la page vers laquelle l’utilisateur est redirigé après l’envoi du formulaire.
    • Action d’envoi : définit la manière dont le formulaire est traité sur le serveur lorsque l’utilisateur l’envoie.
    • Style : indique le chemin d’accès au fichier CSS utilisé pour personnaliser l’apparence du formulaire.
  •  rootPanel : panneau racine d’un formulaire adaptatif. Il peut contenir des sous-panneaux sous le nœud d’éléments. Une mise en page peut être associée à chaque panneau qui comprend le panneau racine. La mise en page du panneau détermine la disposition du formulaire. Par exemple, dans la mise en page en accordéon, les éléments constitutifs sont disposés sous la forme d’étapes en accordéon.
  • barre d’outils : une barre d’outils globale est associée à un conteneur de formulaires adaptatifs. Il s’agit d’une barre d’outils à l’échelle du formulaire. Cette barre d’outils peut être ajoutée à l’aide de l’action Ajouter une barre d’outils de la barre d’édition, ce qui permet aux auteurs d’ajouter des actions telles que Envoyer, Enregistrer, réinitialiser, etc. 
  • ressources : ce nœud contient des informations supplémentaires au sujet de la création de formulaires. Il s’agit, par exemple, de détails sur le modèle de formulaire, de détails de localisation, etc.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne