Application d’un style à votre formulaire adaptatif

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

Ce didacticiel est une étape de la série Création de votre premier formulaire adaptatif. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et démontrer le cas d’utilisation complet du didacticiel.

À propos du didacticiel

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 didacticiel, vous découvrirez comment :

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

Lorsque vous aurez terminé le didacticiel, le modèle de données de formulaire se présentera comme ceci :

Formulaire avec un thème personnalisé

Avant de commencer

Téléchargez sur votre ordinateur local les images de style d’en-tête et de logo présentées ci-dessous. 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

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 le navigateur 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. Cliquez sur 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

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. Effectuez les étapes suivantes pour faire les changements nécessaires :

  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, appuyez sur X pour supprimer l’image du logo existant.

    3. Cliquez sur charger, sélectionnez le fichier logo.png, puis cliquez sur 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 aem_6_3_edit modifier. 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

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 didacticiel, 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 la création d’ un thème :

Création d’un thème

  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 indiqué est alors créé dans le référentiel. Lorsque vous commencez à saisir un titre, une valeur pour le champ de nom est automatiquement générée. Vous pouvez modifier la valeur suggérée. Le champ de nom peut contenir uniquement des caractères alphanumériques, des traits d’union et des tirets bas. Toutes les entrées non valides sont remplacées par un tiret.
  3. Appuyez sur Créer. Un thème est créé et une boîte de dialogue pour 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. Appuyez sur Options du thème theme-options > Configurer. Dans le champ Prévisualisation du formulaire, sélectionnez le formulaire adaptatif shipping-address-add-update-form, cliquez sur aem_6_3_forms_save et sur Enregistrer. L’éditeur de thème est maintenant configuré pour utiliser votre propre formulaire adaptatif au lieu du formulaire adaptatif par défaut. Appuyez sur 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 général, l’en-tête contient le logo et le nom de l’organisation, le pied de page contient des informations de copyright. Ces éléments 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, appuyez sur le panneau latéral Activer/désactiver toggle-side-panel.

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

    Propriété Valeur
    Famille de polices Arial
    Couleur de la police FFFFFF
    Taille de la police 54px
  3. Cliquez sur le widget d’en-tête, puis sur 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 cliquez sur 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 cliquez sur Image. Définissez les propriétés suivantes et cliquez sur aem_6_3_forms_save.

    Propriété Valeur
    image Téléchargez le fichier header-style.png. L’image a été téléchargée dans la section Avant de commencer.
    Position En bas à droite
    Mosaïque Pas de répétition
  5. Dans l’éditeur de thème, appuyez sur le logo dans l’en-tête puis appuyez sur Logo de l’en-tête. Développez l’accordéon Dimensions et position, définissez les propriétés suivantes, puis cliquez sur aem_6_3_forms_save.

    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. Appuyez sur le widget de pied de page, puis sur 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

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 pour 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. Cliquez sur le champ ID de client et sur l’option Widget de champ. Définissez les propriétés suivantes et cliquez sur aem_6_3_forms_save.

    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 18px
    Dimensions et position Largeur 60%
    Dimensions et position Marge
    • Gauche : 10 rem
  2. Cliquez sur la zone vide au-dessus du champ ID de client, puis sur Conteneur de panneau en responsive design. Définissez Arrière-plan > Couleur d’arrière-plan sur F1F2F2. Cliquez sur aem_6_3_forms_save.

Application d’un style aux boutons

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. Appuyez sur le bouton Envoyer et appuyez sur l’option Bouton. Définissez les propriétés suivantes et cliquez sur aem_6_3_forms_save.

    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 18px
  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 à des composants individuels

Certains styles ne s’appliquent qu’à 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. Cliquez sur le bouton Joindre et sur l’icône aem_6_3_edit. Définissez les propriétés suivantes dans l’accordéon Dimensions et position :

    Propriété Valeur
    Flottant Gauche
    Largeur 10%
  4. Cliquez sur l’option Preuve d’adresse approuvée par le gouvernement et sur l’icône aem_6_3_edit. Définissez les propriétés suivantes :

    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 40px
    Dimensions et position
    Marge
    • Droite : 2 rem
    • Gauche : 10 rem
    Arrière-plan Couleur d’arrière-plan FFFFFF
    Bordure Largeur de bordure 1px
    Bordure Style de la bordure Pleine
    Bordure Couleur de la bordure A7A9AC
    Bordure Rayon de bordure 7px
    Texte Famille de polices Arial
    Texte Couleur de la police BCBEC0
    Texte Taille de la police 18px
    Texte Hauteur de ligne 2
  5. Cliquez sur le bouton Envoyer, puis sur l’icône aem_6_3_edit. Définissez les propriétés suivantes :

    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 : utilisation des polices web dans un thème personnalisé

Vous pouvez utiliser différentes polices pour concevoir un formulaire adaptatif. Tous les périphériques sur lesquels le formulaire adaptatif est visualisé peuvent ne pas utiliser les polices 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 :

REMARQUE

typekit-to-adobe-fonts Typekit s’appelle désormais Adobe Fonts et est inclus dans Creative Cloud et dʼautres abonnements. En savoir plus.

  1. Créez un compte Adobe Fonts ainsi quʼun kit, ajoutez la police Myriad Pro à ce dernier, puis publiez le kit et obtenez l’ID de kit. Il est nécessaire d’utiliser Adobe Fonts (polices web) dans un formulaire adaptatif.

  2. Dans le serveur AEM Forms, accédez à adobeexperiencemanager Adobe Experience Manager > Outils marteau > Adobe Fonts. Ouvrez maintenant un dossier de configuration. Si une configuration est déjà disponible, cliquez sur le bouton Créer pour créer une instance.

    Dans la boîte de dialogue Créer une configuration, donnez un titre à la configuration, puis cliquez sur Créer. Vous êtes redirigé sur la page de configuration. Dans la boîte de dialogue Modifier le composant qui s’affiche, indiquez votre ID de kit, puis cliquez sur OK.

  3. Configurez un thème de sorte qu’il utilise la configuration Adobe Fonts. Dans l’instance d’auteur, ouvrez un thème global dans l’éditeur de thèmes. Dans l’éditeur de thèmes, cliquez sur Options du thème theme-options > Configurer. Dans le champ Configuration d’Adobe Fonts, sélectionnez le kit, puiscliquez sur Enregistrer.

    Les polices ajoutées à Adobe Fonts sont disponibles pour la sélection dans l’accordéon Texte de tous les composants.

Sur cette page