DocumentationAEM 6.5Guide de l’utilisateur

Application d’un style à votre formulaire adaptatif do-not-publish-style-your-adaptive-form

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Administration
  • Utilisateur ou utilisatrice
  • Développeur

Apprenez à créer un thème personnalisé, à appliquer un style à des composants individuels et à utiliser des polices web dans un thème.

hero-image

Ce tutoriel fait partie de la série Création de votre premier formulaire adaptatif. Adobe recommande de suivre la série dans l’ordre chronologique pour comprendre, exécuter et montrer le cas d’utilisation complet du tutoriel.

À propos du tutoriel about-the-tutorial

Vous pouvez utiliser des thèmes pour donner une apparence et un style uniques à un formulaire adaptatif. Vous pouvez appliquer des thèmes prêts à l’emploi fournis avec l’éditeur de formulaires adaptatifs ou créer vos propres thèmes. AEM Forms fournit un éditeur de thème pour créer des thèmes personnalisés. Un seul thème peut conférer une apparence différente au même formulaire adaptatif ouvert sur un mobile, une tablette ou un ordinateur de bureau. Aucune connaissance préalable de CSS ou de LESS n’est nécessaire pour utiliser l’éditeur de thèmes, mais cela est préférable.

À la fin du tutoriel, vous devrez pouvoir effectuer les opérations suivantes :

  • Appliquer un thème prêt à l’emploi à un formulaire adaptatif
  • Créer un thème pour le formulaire adaptatif à l’aide de l’éditeur de thème
  • Appliquer un style aux composants individuels
  • Section bonus : Utiliser des polices web dans un thème personnalisé

Une fois le tutoriel terminé, votre formulaire doit ressembler à celui-ci :

Formulaire avec un thème personnalisé

Avant de commencer before-you-start

Téléchargez les images de style d’en-tête et de logo présentées ci-dessous sur votre ordinateur. L’en-tête du formulaire adaptatif shipping-address-add-update-form utilise les images de style d’en-tête et de logo. L’image de style d’en-tête s’affiche à droite de l’en-tête.

Obtenir le fichier

Obtenir le fichier

Étape 1 : appliquer un thème à votre formulaire adaptatif step-apply-a-theme-to-your-adaptive-form

L’éditeur de formulaires adaptatifs fournit plusieurs thèmes prêts à l’emploi. Si vous envisagez de ne pas utiliser de style personnalisé pour votre formulaire adaptatif, vous pouvez également publier vos formulaires adaptatifs avec un thème prêt à l’emploi. Les thèmes sont indépendants des formulaires adaptatifs. Vous pouvez appliquer le même thème à plusieurs formulaires adaptatifs.

Pour appliquer un thème à un formulaire adaptatif :

  1. Ouvrez le formulaire adaptatif pour le modifier.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Ouvrez les propriétés du conteneur de formulaires adaptatifs. Dans l’explorateur de propriétés, accédez à De base  > Thème de formulaire adaptatif. Le champ Thème de formulaire adaptatif répertorie tous les thèmes prêts à l’emploi et personnalisés. Par défaut, le thème Zone de travail est appliqué.

  3. Sélectionnez votre thème dans le champ Thème de formulaire adaptatif. Par exemple, Thème Enquête. Sélectionnez aem_6_3_forms_save pour appliquer le thème sélectionné.

    Formulaire adaptatif avec le thème par défaut

    Illustration : formulaire adaptatif avec le thème par défaut.

    Formulaire adaptatif avec le thème Enquête

    Illustration : formulaire adaptatif avec le thème Enquête.

Étape 2 : mettre à jour votre formulaire adaptatif step-update-your-adaptive-form

La conception présentée ci-dessus nécessite des modifications du texte et du logo de l’espace réservé de votre formulaire adaptatif existant.

Pour mettre à jour votre formulaire adaptatif :

  1. Modifiez le logo existant et le texte de l’en-tête. Pour supprimer le logo :

    1. Ouvrez le formulaire dans l’éditeur de formulaires.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. Cliquez sur l’image du logo dans le composant d’en-tête, puis sur Propriétés cmppr . Dans la propriété image, sélectionnez X pour supprimer l’image du logo existant.

    3. Cliquez sur charger, sélectionnez le fichier logo.png, puis choisissez aem_6_3_forms_save pour enregistrer les modifications. L’image a été téléchargée dans la section Avant de commencer.

    4. Cliquez sur le texte de l’en-tête, We.Retail, puis sur modifier aem_6_3_edit . Modifiez le texte de l’en-tête par we retail. Appliquez le format Gras uniquement à we dans we retail.

      we-retail-logo-text

  2. Supprimez le titre et ajouter un texte d’espace réservé :

    1. Cliquez sur le champ identifiant de client et sur Propriétés cmppr .

    2. Copiez le contenu du champ Titre dans le champ Texte d’espace réservé.

    3. Supprimez le contenu du champ Titre et cliquez sur aem_6_3_forms_save .

    4. Répétez les trois étapes précédentes pour toutes les zones de texte, la zone numérique et le champ d’adresse électronique du formulaire.

      updated-adaptive-form

Étape 3 : créer un thème personnalisé pour votre formulaire adaptatif step-create-a-custom-theme-for-your-adaptive-form

Vous pouvez utiliser un éditeur de thèmes pour créer des thèmes personnalisés. L’éditeur de thèmes est un éditeur WYSIWYG très puissant. Il s’agit d’une méthode visuelle permettant d’appliquer un style CSS à divers composants d’un formulaire adaptatif. Il fournit des commandes plus précises aux composants de style et aux panneaux d’un formulaire adaptatif.

Un thème est une entité distincte au même titre que les formulaires adaptatifs. Il contient des styles (CSS) pour les composants et les panneaux d’un formulaire adaptatif. Ces styles incluent des propriétés CSS telles que les couleurs d’arrière-plan, les couleurs d’état, la transparence, l’alignement et la taille. Lorsque vous appliquez un thème, le style spécifié est appliqué aux composants correspondants d’un formulaire adaptatif.

Dans ce tutoriel, vous allez appliquer un style aux en-têtes et aux pieds de page, aux composants texte et numériques, aux composants de pièces jointes et aux boutons. Commençons par créer un thème :

Création d’un thème create-a-theme

  1. Connectez vous à l’instance de création AEM et accédez à Adobe Experience Manager > Forms > Thèmes. L’URL par défaut est http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Appuyez sur Créer et sélectionnez Thème. La page Créer un thème s’affiche avec les champs requis pour créer un thème. Les champs Titre et Nom sont obligatoires :

    • Titre :  spécifiez le titre du thème. Par exemple, Thème global. Le titre vous permet d’identifier le thème dans la liste des thèmes.
    • Nom : spécifiez le nom du thème. Par exemple, Thème-global. 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.

  3. Sélectionnez Créer. Un thème est créé et une boîte de dialogue permettant d’ouvrir le formulaire à modifier s’affiche. Cliquez sur  Ouvrir pour ouvrir le thème créé dans un nouvel onglet. Le thème s’ouvre dans l’éditeur de thèmes. Pour le style, l’éditeur de thèmes utilise un formulaire adaptatif prêt à l’emploi fourni avec AEM Forms.

    Pour plus d’informations sur l’utilisation de l’interface utilisateur de l’éditeur de thèmes, voir À propos de l’éditeur de thèmes.

  4. Sélectionnez Options du thème theme-options > Configurer. Dans le champ Prévisualisation du formulaire, sélectionnez le formulaire adaptatif shipping-address-add-update-form, sélectionnez aem_6_3_forms_save , puis Enregistrer. L’éditeur de thème est maintenant configuré pour utiliser votre propre formulaire adaptatif au lieu du formulaire adaptatif par défaut. Sélectionnez Annuler pour revenir à l’éditeur de thèmes.

    custom-theme

    Illustration : éditeur de thèmes avec le formulaire adaptatif shipping-address-add-update-form.

    create-a-theme

    Illustration : formulaire adaptatif avec le formulaire par défaut.

Application d’un style à l’en-tête et au pied de page style-header-and-footer

L’en-tête et le pied-de-page donnent un aspect cohérent et distinctif à un formulaire adaptatif. En règle générale, l’en-tête contient le logo et le nom de l’organisation, le pied-de-page contient des informations de copyright, lesquelles restent identiques dans plusieurs formulaires d’une organisation. Pour appliquer un style à l’en-tête et au pied-de-page du formulaire adaptatif shipping-address-add-update-form :

  1. Accédez à l’option En-tête  > Texte dans le panneau Sélecteurs. Le panneau Sélecteurs se trouve à gauche de l’éditeur de thèmes. Si le panneau n’est pas visible, sélectionnez le panneau latéral Activer/désactiver toggle-side-panel .

  2. Définissez les propriétés suivantes dans l’accordéon Texte et sélectionnez aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propriété Valeur
    Famille de polices Arial®
    Couleur de la police FFFFFF
    Taille de la police 54 px

  3. Sélectionnez le widget d’en-tête, puis sélectionnez En-tête. Les options permettant d’appliquer un style au widget En-tête s’affichent à gauche. Développez l’accordéon Dimensions et position, définissez la Hauteur sur 120px, puis sélectionnez aem_6_3_forms_save .

  4. Développez l’accordéon Arrière-plan du widget d’en-tête, définissez la couleur d’arrière-plan sur F6921E..

    Pointez sur  Image et dégradé  >  + Ajouter et sélectionnez  Image. Définissez les propriétés suivantes et sélectionnez aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propriété Valeur
    image Chargez le fichier header-style.png. L’image a été téléchargée dans la section Avant de commencer.
    Position En bas à droite
    Répétition Pas de répétition

  5. Dans l’éditeur de thème, sélectionnez le logo dans l’en-tête puis sélectionnez Logo de l’en-tête. Développez l’accordéon Dimensions et position, définissez les propriétés suivantes, puis sélectionnez aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    Marge Valeur
    Marge
    • Haut : 1,5 rem
    • Bas : -35 px
    • Gauche : 1 rem

    Conseil : appuyez sur l’icône de lien pour fournir une valeur différente à chaque champ.

    Hauteur 4,75 rem

  6. Sélectionnez le widget de pied de page, puis Pied de page. Développez l’accordéon Arrière-plan, définissez la Couleur d’arrière-plan sur F6921E, puis cliquez sur aem_6_3_forms_save .

Application d’un style au composant de capture de données et application d’un arrière-plan au formulaire adaptatif style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

Vous pouvez utiliser plusieurs composants dans un formulaire adaptatif pour capturer des données. Par exemple, zone de texte et zone numérique. Vous pouvez fournir un style identique à tous les composants de capture de données ou un style distinct à chaque composant. Dans ce didacticiel, un style identique est appliqué aux zones numériques (ID client, Code postal) et aux zones de texte (ID client, Nom, Adresse de livraison, État, Adresse électronique). Pour appliquer un style aux composants de capture de données :

  1. Sélectionnez le champ ID client, puis l’option Widget de champ. Définissez les propriétés suivantes et sélectionnez aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    Accordéon Propriété Valeur
    Bordure Couleur de la bordure A7A9AC
    Bordure Rayon de bordure
    • Haut : 7 px
    • Droite : 7 px
    • Bas : 7 px
    • Gauche : 7 px
    Texte Famille de polices Arial®
    Texte Couleur de la police 939598
    Texte Taille de la police 18 px
    Dimensions et position Largeur 60%
    Dimensions et position Marge
    • Gauche : 10 rem

  2. Cliquez sur la zone vide au-dessus du champ ID client, puis sur Conteneur de panneau réactif. Définissez Arrière-plan > Couleur d’arrière-plan sur F1F2F2. Sélectionnez aem_6_3_forms_save .

    Conteneur de panneau réactif

Application d’un style aux boutons style-the-buttons

Vous pouvez utiliser un thème personnalisé pour appliquer un style identique à tous les boutons du formulaire adaptatif et un style en ligne pour appliquer un style à un bouton spécifique. Pour appliquer un style aux boutons :

  1. Sélectionnez le bouton Soumettre et choisissez l’option Bouton. Définissez les propriétés suivantes et sélectionnez aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    Accordéon Propriété Valeur
    Arrière-plan Couleur d’arrière-plan F6921E
    Bordure Couleur de la bordure F6921E
    Bordure Rayon de bordure
    • Haut : 7 px
    • Droite : 7 px
    • Bas : 7 px
    • Gauche : 7 px
    Texte Famille de polices Arial®
    Texte Couleur de la police FFFFFF
    Texte Taille de la police 18 px

  2. Appliquez le thème personnalisé, Thème global, à votre formulaire adaptatif. Si le style ne se reflète pas sur le formulaire adaptatif, videz le cache du navigateur et réessayez.

    style-data-capture-components

Étape 4 : appliquer un style aux composants individuels step-style-individual-components

Certains styles s’appliquent uniquement à un composant spécifique. Un style est appliqué à ces composants dans l’éditeur de formulaires adaptatifs.

  1. Ouvrez le formulaire adaptatif pour le modifier. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Dans la barre supérieure, sélectionnez l’option Style.

    style-option

  3. Sélectionnez le bouton Joindre et sélectionnez l’icône  aem_6_3_edit . Définissez les propriétés suivantes dans l’accordéon Dimensions et position  :

    table 0-row-2 1-row-2 2-row-2
    Propriété Valeur
    Flottant Gauche
    Largeur 10%

  4. Sélectionnez l’option Preuve d’adresse approuvée par le gouvernement et sélectionnez l’icône  aem_6_3_edit . Définissez les propriétés suivantes :

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    Accordéon Propriété Valeur
    Dimensions et position Flottant Gauche
    Dimensions et position Largeur 73%
    Dimensions et position Remplissage
    • Gauche : 10 px
    Dimensions et position Hauteur 40 px
    Dimensions et position Marge
    • Droite : 2 rem
    • Gauche : 10 rem
    Arrière-plan Couleur d’arrière-plan FFFFFF
    Bordure Largeur de bordure 1 px
    Bordure Style de la bordure Pleine
    Bordure Couleur de la bordure A7A9AC
    Bordure Rayon de bordure 7 px
    Texte Famille de polices Arial®
    Texte Couleur de la police BCBEC0
    Texte Taille de la police 18 px
    Texte Hauteur de ligne 2

  5. Sélectionnez le bouton Soumettre, puis choisissez l’icône  aem_6_3_edit . Définissez les propriétés suivantes :

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    Accordéon Propriété Valeur
    Dimensions et position Flottant Droite
    Dimensions et position Marge
    • Haut : 5 rem
    • Droite : 14 rem
    • Bas : 20 px
    • Gauche : 20 px
    Arrière-plan Couleur d’arrière-plan F6921E
    Bordure Couleur de la bordure F6921E

    styled-adaptive-form-1

Étape 5 : section bonus : utiliser des polices web dans un thème personnalisé step-bonus-section-using-web-fonts-in-a-custom-theme

Vous pouvez utiliser différentes polices pour concevoir un formulaire adaptatif. Tous les appareils sur lesquels le formulaire adaptatif est affiché ne disposent peut-être pas des polices utilisées pour concevoir le formulaire adaptatif. Vous pouvez utiliser un service de polices web pour fournir les polices requises à l’appareil cible.

Adobe Fonts est un service de polices web. Vous pouvez configurer et utiliser le service avec les formulaires adaptatifs. Pour utiliser Adobe Fonts dans un formulaire adaptatif, procédez comme suit :

  1. Parcourez la bibliothèque de polices Adobe et choisissez la police à appliquer au formulaire.
NOTE
Vous pouvez ajouter des balises ou des filtres pour affiner la liste des polices.

  1. Cliquez sur le bouton </> pour ajouter la famille à un projet web, au cas où vous trouveriez une police qui vous convient.

    select-font-from-font-libary

    L’écran de la boîte de dialogue Ajouter des polices à un projet web s’affiche.

    note note
    NOTE
    Vous ne pouvez ajouter des polices à votre projet web que si le bouton </> est disponible.

  2. Donnez un nom à votre projet web.

  3. Cochez les cases pour sélectionner les poids et les styles de police que vous souhaitez inclure.

    ajouter une bibliothèque de polices

  4. Sélectionner Clic pour créer le projet.

  5. Copiez le code intégré et l’URL à partir de l’écran.
    code intégré et URL

  6. Cliquez sur Terminé pour fermer la fenêtre de projet web.

  7. Connectez-vous à votre instance AEM et accédez à l’URL http://server:port/crx/de/index.jsp#.

  8. Créez une structure de dossiers dans CRXDE, par exemple /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. Accédez au dossier clientlibs nouvellement créé et ajoutez les propriétés allowProxy et categories.

  10. Accédez à /apps/[fontslibrary]/[customlibrary(clientlibrary)] et créez un dossier CSS.

  11. Accédez au dossier CSS créé et créez un fichier. Par exemple, créez un fichier en tant que fonts.css et collez le code intégré avec l’URL.
    Structure de dossiers

  12. Enregistrez les modifications.

NOTE
Pour utiliser les polices personnalisées ajoutées dans un formulaire adaptatif, assurez-vous que le nom de la bibliothèque cliente de la Catégorie de bibliothèque cliente s’aligne sur le nom spécifié dans l’option Catégories du dossier clientlib.

Les polices incluses sont désormais accessibles au formulaire adaptatif par le biais de la bibliothèque cliente de polices personnalisées suivante.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2