Si vous utilisez le champ Rating/CSAT dans votre formulaire, vous souhaiterez peut-être que ses icônes correspondent mieux aux couleurs de votre marque ou à votre design global. Par défaut, ces icônes utilisent le style standard de Formaloo, mais dans certains cas (thèmes sombres, image de marque personnalisée ou besoins d’accessibilité), vous pouvez vouloir ajuster leur apparence.
Dans ce guide, nous vous montrons précisément comment personnaliser la couleur des icônes du champ Rating/CSAT (étoiles, cœurs, etc.) avec quelques lignes de CSS. Vous apprendrez à modifier leur couleur par défaut ou à appliquer des effets au survol, pour que votre formulaire ait exactement l’apparence souhaitée.
Ce guide vous sera utile si vous souhaitez :
Harmoniser les icônes de notation avec les couleurs de votre marque
Modifier l’apparence des icônes au survol
Styliser un champ de notation spécifique différemment des autres
💡 Si vous découvrez le CSS personnalisé dans Formaloo, ces guides peuvent vous aider :
Comment cibler n’importe quel champ de formulaire avec du CSS et du JS personnalisés (à l’aide des ID de champ)
Apprenez les bases de la sélection de champs spécifiques
Les extraits CSS personnalisés les plus demandés
Des exemples de style prêts à l’emploi
Noms de classes CSS pris en charge dans Formaloo
Stylisez des composants et des sections entières du formulaire
Ces ressources vous aideront à styliser non seulement les notations, mais aussi les boutons, les zones de saisie, les mises en page et d’autres éléments de vos formulaires.
Étape 1 : attribuer un ID à votre champ
Ouvrez d’abord votre éditeur de formulaire et sélectionnez le champ de notation à personnaliser.
Dans les paramètres du champ, ajoutez un ID de champ unique, par exemple : csat_field
Cet ID servira à cibler le champ avec du CSS.
Étape 2 : ouvrir la section Custom CSS
Dans l’éditeur de formulaire, accédez à Design → Custom CSS :
C’est ici que vous ajouterez votre code CSS.
3. Ajouter du CSS pour styliser les différents états
Utilisez les exemples ci-dessous comme point de départ. Veillez à remplacer "your_field_id" par l’ID que vous avez réellement attribué, par ex. : "csat_field".
État par défaut
[data-field-id="your_field_id"] button svg *
{
fill: #D77094 !important;
stroke: #D77094 !important;
}
Au survol
[data-field-id="your_field_id"] button:hover svg *
{
fill: #D288A2 !important;
stroke: #D288A2 !important;
}
Personnalisez-le à votre façon
Vous êtes entièrement libre d’adapter ces extraits à votre design :
Modifiez les couleurs avec le code hexadécimal de votre choix 🎨
Utilisez uniquement fill ou uniquement stroke si vous n’avez pas besoin des deux ✏️
Ignorez les effets au survol si vous préférez un rendu plus simple ⏭️
Appliquez des couleurs différentes à différents champs de notation 🌈
Personnaliser les icônes de notation est un moyen simple et efficace de rendre vos formulaires plus soignés et plus fidèles à votre marque. Avec les ID de champ et quelques lignes de CSS, vous obtenez exactement le rendu souhaité, sans expertise en programmation !