Styles intégrés des composants de formulaire adaptatif inline-styling-of-adaptive-form-components
Vous pouvez définir l’aspect général et le style d’un formulaire adaptatif en spécifiant les styles à l’aide de éditeur de thèmes. Vous pouvez également appliquer des styles CSS intégrés à des composants de formulaire adaptatif individuels et prévisualiser les modifications à 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 choisir le mode Style, dans la barre d’outils de la page, appuyez sur
-
Sélectionnez un composant dans la page, puis appuyez sur le bouton Modifier
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.
Vous pouvez également sélectionner un composant 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, tous les sous-composants sont répertoriés et les propriétés du composant sélectionné s’affichent. Vous pouvez sélectionner un sous-composant spécifique et le mettre 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.
-
Appuyez sur Terminé pour confirmer les modifications ou sur Annuler pour annuler 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.
Figure : 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.