Comment créer un système de notation par étoiles dans Webflow avec Finsweet ?
Apprenez à créer un composant de notation par étoiles dans un formulaire Webflow avec Finsweet Form Star Rating.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un composant de notation par étoiles dans un formulaire Webflow avec Finsweet Attributes Form Star Rating.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-starrating-element | Form Block ou section | component |
| fs-starrating-element | Chaque étoile (Radio Button) | star |
| fs-starrating-active | Classe CSS active | Nom de la classe Webflow à appliquer |
| fs-starrating-value | Chaque étoile | 1, 2, 3, 4 ou 5 |
1. Ajoutez le script dans le head
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-starrating@1/starrating.js" defer>script>2. Créez la structure des étoiles
Dans votre formulaire Webflow, ajoutez 5 Radio Buttons dans le même groupe (même Name). Sur le conteneur parent, ajoutez fs-starrating-element="component". Sur chaque Radio Button, ajoutez fs-starrating-element="star" et fs-starrating-value="[1 à 5]".
3. Créez vos icônes étoiles dans Webflow
Masquez les radio buttons natifs (opacity: 0, position: absolute) et créez des icônes étoiles SVG ou des emojis à côté de chaque radio button. Finsweet applique la classe active sur les étoiles sélectionnées et toutes celles en dessous (effet de remplissage progressif).
4. Définissez la classe active
Créez une classe Webflow pour l'état sélectionné de l'étoile (ex: couleur dorée). Ajoutez l'attribut fs-starrating-active="nom-de-votre-classe" sur le conteneur parent. Finsweet applique cette classe automatiquement au survol et à la sélection.
Conclusion
Finsweet Star Rating ajoute un composant d'évaluation natif sans JavaScript custom. Cas d'usage :
- Formulaire de satisfaction client post-achat
- Évaluation d'un produit ou service dans un formulaire de contact
- Sondage NPS avec notation visuelle
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
