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

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électionner aem_6_3_forms_save pour que vous puissiez 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. Sélectionnez l’image de logo dans la header composant et sélectionnez cmppr properties. Dans le image , sélectionnez X pour supprimer l’image de logo existante.

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

    4. Sélectionner le texte de l’en-tête, We.Retail, puis sélectionnez aem_6_3_edit 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. Sélectionnez le champ ID de client et sélectionnez cmppr propriétés.

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

    3. Supprimer le contenu de la Titre champ et sélectionnez 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. Sélectionner 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 pour ouvrir le formulaire à modifier s’affiche. Sélectionner Ouvrir pour ouvrir le thème nouvellement 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électionner Options du thème theme-options > Configurer. Dans le Aperçu du formulaire , sélectionnez le champ shipping-address-add-update-form formulaire adaptatif, sélectionnez aem_6_3_forms_save , sélectionnez Enregistrer. L’éditeur de thème est maintenant configuré pour utiliser votre propre formulaire adaptatif au lieu du formulaire adaptatif par défaut. Sélectionner 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.

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 bouton bascule-côté-panneau Active/désactive le panneau latéral.

  2. Définissez les propriétés suivantes dans le Texte accordéon 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 la variable header widget et sélectionnez En-tête. Les options permettant d’appliquer un style au widget En-tête s’affichent à gauche. Développez l’objet Dimensions et position en accordéon, définissez la variable Hauteur to 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..

    Survol Image et dégradé > + Ajouter, 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èmes, sélectionnez le logo dans l’en-tête et sélectionnez Logo d’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 : Sélectionnez la variable 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 sélectionnez Pied de page. Développez l’objet Contexte en accordéon, définissez la variable Couleur d’arrière-plan to F6921E, puis sélectionnez 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 la variable ID de client et sélectionnez le champ 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. Sélectionnez la zone vide au-dessus de la zone ID de client champ et sélectionnez Conteneur de panneau réactif. Définissez Arrière-plan > Couleur d’arrière-plan sur F1F2F2. Sélectionner 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 la variable Envoyer et sélectionnez 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 la variable Joindre et sélectionnez l’option aem_6_3_edit Icône 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 la variable Preuve d'adresse approuvée par le gouvernement et sélectionnez l’option aem_6_3_edit Icône 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 la variable Envoyer et sélectionnez l’option aem_6_3_edit Icône 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 les bibliothèque des polices d’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 de votre choix.

    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. Nommez votre projet web.

  3. Cochez les cases pour sélectionner les poids et les styles de police à inclure.

    ajouter une bibliothèque de polices

  4. Sélectionner Cliquez sur pour créer le projet.

  5. Copiez le code incorporé et l’URL de l’écran.
    code incorporé et URL

  6. Cliquez sur Terminé pour fermer la fenêtre du 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 clientlibs et ajoutez le dossier allowProxy et categories propriétés.

  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 sous la forme fonts.css et collez le code incorporé avec l’URL.
    Structure du dossier

  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 dans la variable Catégorie de bibliothèque cliente s’aligne sur le nom spécifié dans l’option categories du dossier clientlib.

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

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