Styles intégrés des composants de formulaire adaptatif inline-styling-of-adaptive-form-components
Adobe recommande d’utiliser la capture de données moderne et extensible. Composants principauxpour création d’un Forms adaptatifou Ajout de Forms adaptatif à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de Forms adaptatif, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’approche plus ancienne de la création de Forms adaptatif à l’aide de composants de base.
Vous pouvez définir l’aspect général et le style d’un formulaire adaptatif en spécifiant les styles à l’aide d’un éditeur de thèmes. En outre, vous pouvez appliquer des styles CSS intégrés à différents composants de formulaire adaptatif et prévisualiser les modifications apportées à la volée. Les styles intégrés remplacent les styles fournis dans le thème.
Application des propriétés de style CSS intégré apply-inline-css-properties
Pour ajouter des styles intégrés à un composant :
-
Ouvrez votre formulaire dans l’éditeur de formulaires, puis choisissez le mode Style. Pour passer en mode Style, dans la barre d’outils de la page, sélectionnez > Style.
-
Sélectionnez un composant dans la page, puis cliquez sur le bouton Modifier . . Les propriétés de style s’ouvrent dans la barre latérale.
Vous pouvez également sélectionner des composants dans l’arborescence de hiérarchie de formulaire dans la barre latérale. L’arborescence de hiérarchie de formulaires est disponible sous forme d’objets de formulaire dans la barre latérale.
Dans le mode Style, vous pouvez afficher les composants répertoriés sous Objets de formulaire. Cependant, la liste Objets de formulaire dans la barre latérale répertorie les composants tels que les champs et les panneaux. Les champs et les panneaux sont des composants génériques qui peuvent contenir des composants tels que des zones de texte et des boutons radio.
Lorsque vous sélectionnez un composant dans la barre latérale, vous voyez tous les sous-composants répertoriés et les propriétés du composant sélectionné. Vous pouvez sélectionner un sous-composant spécifié et lui appliquer une mise en forme.
-
Cliquez sur un onglet de la barre latérale pour spécifier les propriétés CSS. Vous pouvez spécifier des propriétés telles que :
- Dimensions et position (paramètre d’affichage, remplissage, hauteur, largeur, marge, position, index z, flottant, clair, débordement)
- Texte (famille de polices, épaisseur, couleur, taille, hauteur de ligne et alignement)
- Arrière-plan (image et gradient, couleur d’arrière-plan)
- Bordure (largeur, style, couleur, rayon)
- Effets (ombre, opacité)
- Avancé (permet de saisir un CSS personnalisé pour le composant)
-
De même, vous pouvez appliquer des styles pour d’autres parties d’un composant tels que Widget, Légende et Aide.
-
Sélectionner Terminé pour confirmer les modifications ou Annuler pour ignorer les modifications.
Exemple : styles intégrés pour un composant de champ example-inline-styles-for-a-field-component
Les images suivantes illustrent une zone de texte avant et après l’application des styles intégrés.
Composant de zone de texte avant d’appliquer les propriétés de style intégré
Notez la modification du style de la zone de texte comme illustré ci-dessous après l’application des propriétés CSS suivantes.
Composant de zone de texte après application des propriétés de style intégré
En suivant les étapes ci-dessus, vous pouvez sélectionner et mettre en forme d’autres composants, tels que les panneaux, les boutons d’envoi et les boutons radio.
Copie et collage de styles copy-paste-styles
Vous pouvez également copier un style et le coller d’un composant à un autre dans un formulaire adaptatif. Dans le Style en mode , sélectionnez le composant, puis cliquez sur l’icône Copier .
Sélectionnez l’autre composant du même type, puis cliquez sur l’icône Coller . pour copier le style. Vous pouvez également sélectionner l’icône Effacer le style . pour effacer le style appliqué.
Définition des styles pour les différents états d’un composant set-styles-for-states
Vous pouvez définir des styles pour différents états d’un type de composant. Les différents états sont les suivants : Activé, Désactivé, Survol, Erreur, Succès et Obligatoire.
Pour définir la mise en forme d’un état d’un composant :
-
Dans le Style en mode , sélectionnez le composant, puis cliquez sur l’icône Modifier .
-
Sélectionnez l’état du composant à l’aide de la liste déroulante État.
-
Définissez la mise en forme de l’état sélectionné du composant et sélectionnez pour enregistrer les propriétés.
Vous pouvez également simuler les états de succès et d’erreur. Cliquez sur l’icône Développer pour afficher le Simuler la réussite et Simuler une erreur options.
Voir également see-also
- Créer un formulaire adaptatif AEM
- Ajouter un formulaire adaptatif AEM à une page AEM Sites
- Appliquer des thèmes à un formulaire adaptatif AEM
- Ajouter des composants à un formulaire adaptatif AEM
- Utiliser reCAPTCHA dans un formulaire adaptatif AEM
- Générer une version PDF (document d’enregistrement) d’un formulaire adaptatif AEM
- Traduire un formulaire adaptatif AEM
- Activer Adobe Analytics sur un formulaire adaptatif pour suivre son utilisation
- Connecter un formulaire adaptatif à Microsoft SharePoint
- Connecter un formulaire adaptatif à Microsoft Power Automate
- Connecter un formulaire adaptatif à Microsoft OneDrive
- Connecter un formulaire adaptatif au stockage Blob Azure Microsoft
- Connecter un formulaire adaptatif à Salesforce
- Utiliser Adobe Sign dans un formulaire adaptatif AEM
- Ajouter un nouveau paramètre régional pour un formulaire adaptatif
- Envoyer des données de formulaire adaptatif à une base de données
- Envoyer des données de formulaire adaptatif à un point d’entrée REST
- Envoyer des données de formulaire adaptatif à un workflow AEM
- Utiliser le Portail Formulaires pour répertorier des formulaires adaptatifs AEM sur un site web AEM