Show Menu
SUJETS×

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. Les formulaires AEM fournissent 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 :

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.

É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.
  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 . Appuyez sur pour appliquer le thème sélectionné.
Figure : Formulaire adaptatif avec le thème par défaut
Figure : Formulaire adaptatif avec le thème

É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.
    2. Tap logo image in the header component and tap properties. Dans la propriété d’image, appuyez sur X pour supprimer l’image du logo existant.
    3. Tap upload, select the logo.png, and tap to save the changes. The image was downloaded in the Before you start section.
    4. Appuyez sur le texte de l’en-tête We.Retail , puis appuyez sur ​edit . Change header text to we retail . Apply bold formatting only to we in we retail .
  2. Supprimez le titre et ajouter un texte d’espace réservé :
    1. Tap the Customer ID field and tap properties.
    2. Copiez le contenu du champ Titre dans le champ Texte d’espace réservé .
    3. Supprimez le contenu du champ Titre et appuyez sur .
    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.

É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. Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Themes . 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 : Indiquez un titre pour le thème. Par exemple, Thème global. Le titre vous permet d’identifier le thème dans la liste des thèmes.
    • Nom : Indiquez 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 Create (Créer). Un thème est créé et une boîte de dialogue pour ouvrir le formulaire à modifier s’affiche. Tap Open to open the newly created theme in a new tab. 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.
    For information about using theme editor UI, see About the theme editor .
  4. Tap Theme Options > Configure . In the Preview Form field, select the shipping-address-add-update-form adaptive form, tap , tap Save . 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.
    Figure : Éditeur de thème avec le formulaire adaptatif d’expédition-address-add-update-form
    Figure : Formulaire adaptatif avec le formulaire par défaut

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 mettre en forme les composants de capture de données :
  1. Appuyez sur le champ ID de client et sur l’option Widget de champ . Définissez les propriétés suivantes et appuyez sur .
Accordéon Propriétés Valeur
de la bordure Couleur de la bordure A7A9AC
de la bordure Rayon de bordure
  • Haut : 7 px
  • Droite : 7 px
  • Bas : 7 px
  • Gauche : 7 px
Text (Texte) Famille de polices Arial
Text (Texte) Couleur de la police 939598
Text (Texte) Taille de la police 18px
Dimensions et position Largeur 60%
Dimensions et position Marge
  • Gauche : 10 rem
  1. Appuyez sur la zone vide au-dessus du champ ID de client et appuyez sur Conteneur de panneau réactif . Définissez Arrière-plan > Couleur d’arrière-plan sur F1F2F2. Appuyez sur .

Application d’un style aux boutons

You can use a custom theme to apply an identical style to all the buttons of the adaptive form and inline styling to apply a style to a specific button. 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 appuyez sur .
Accordéon Propriétés Valeur
Arrière-plan Couleur d’arrière-plan F6921E
de la bordure Couleur de la bordure F6921E
de la bordure Rayon de bordure
  • Haut : 7 px
  • Droite : 7 px
  • Bas : 7 px
  • Gauche : 7 px
Texte Famille de polices Arial
Text (Texte) Couleur de la police FFFFFF
Text (Texte) Taille de la police 18px
  1. 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.

É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. Dans la barre supérieure, sélectionnez l’option Style .
  2. Tap the Attach button and tap the icon. Set the following properties in the Dimensions and Position accordion:
    Propriétés
    Valeur
    Flottant
    Gauche
    Largeur
    10%
  3. Tap the Government approved address proof option and tap the icon. Définissez les propriétés suivantes :
Accordéon Propriétés 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
de la bordure Largeur de bordure 1px
de la bordure Style de la bordure Pleine
de la bordure Couleur de la bordure A7A9AC
de la bordure Rayon de bordure 7px
Text (Texte) Famille de polices Arial
Text (Texte) Couleur de la police BCBEC0
Text (Texte) Taille de la police 18px
Text (Texte) Hauteur de ligne 2
  1. Tap the Submit button and tap the icon. Définissez les propriétés suivantes :
Accordéon Propriétés 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
de la bordure Couleur de la bordure F6921E

É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 au périphérique .
Adobe Typekit est un service de polices web d’Adobe. Vous pouvez configurer et utiliser le service avec les formulaires adaptatifs. Pour utiliser Adobe Typekit dans un formulaire adaptatif :
Typekit est désormais appelé Adobe Fonts et est inclus dans Creative Cloud et d’autres de . En savoir plus .
  1. Create an Adobe Typekit account, create a kit, add font Myriad Pro to the kit, publish the kit, and obtain the Kit ID. Il est nécessaire d’utiliser les polices Adobe Typekit (polices web) dans un formulaire adaptatif.
  2. In the AEM Forms server, navigate to Adobe Experience Manager > Tools > Deployment > Cloud Services . On the Cloud Services page, navigate to Third Party Services > Typekit , and click Configure Now under Typekit. Si une configuration est déjà disponible, cliquez sur le bouton + pour créer une nouvelle instance.
    On the Create Configuration dialog, specify a Title for the configuration, and click Create . Vous êtes redirigé sur la page de configuration. In the Edit Component dialog that appears, provide your Kit ID and click OK .
  3. Configurez un thème de sorte qu’il utilise la configuration Typekit. On the author instance, open Global Theme in the theme editor. In the theme editor, navigate to Theme Options > Configure. In Typekit Configuration field, select the kit, and click Save .
    The fonts added to the Typekit are available for selection in the Text accordion of all the components.