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.
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 canvas-drop-down > Style.
Sélectionnez un composant dans la page, puis appuyez 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 :
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.
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.
Sélecteur |
propriété CSS |
Valeur |
Effet |
Champ |
bordure |
Largeur de la bordure = 2px Style de bordure = Plein Couleur de la bordure = #1111 |
Crée une bordure large noire 2-px autour du champ |
Zone de texte |
background-color |
#6495ED |
Modifie la couleur d’arrière-plan en CornflowerBlue (#6495ED) Remarque : vous pouvez spécifier un nom de couleur ou son code hexadécimal dans le champ Valeur. |
Libellé |
Dimensions et position > largeur |
100 px |
Définit la largeur sur 100 px pour le libellé. |
Icône d’aide du champ | Texte > Couleur de la police | #2ECC40 | Modifie la couleur de la face de l’icône d’aide. |
Description longue |
text-align |
centre |
Aligne la description longue pour faciliter le centrage. |
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.
Les propriétés de style varient en fonction du composant sélectionné.
Vous pouvez également copier un style et le coller d’un composant à un autre dans un formulaire adaptatif. En mode Style, appuyez sur le composant, puis sur l’icône Copier .
Appuyez sur l’autre composant du même type, puis sur l’icône Coller pour coller le style copié. Vous pouvez également appuyer sur l’icône Effacer le style
pour effacer le style appliqué.
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 :
En mode Style, appuyez sur le composant, puis 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 appuyez sur pour enregistrer les propriétés.
Vous pouvez également simuler les états de succès et d’erreur. Appuyez sur l’icône Développer pour afficher les options Simuler la réussite et Simuler l’erreur.