How to Create a Star Rating System in Webflow with Finsweet

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create a star rating component in a Webflow form with Finsweet Attributes Form Star Rating.

1. Add the script in the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-starrating@1/starrating.js" defer>script>

2. Build the star structure

In your Webflow form, add 5 Radio Buttons in the same group (same Name). On the parent container, add fs-starrating-element="component". On each Radio Button, add fs-starrating-element="star" and fs-starrating-value="[1 to 5]".

3. Create your star icons in Webflow

Hide the native radio buttons (opacity: 0, position: absolute) and create SVG star icons or emojis next to each radio button. Finsweet applies the active class to the selected stars and everything below them too (a progressive fill effect).

4. Define the active class

Create a Webflow class for the selected star state (for example, a gold color). Add the fs-starrating-active="your-class-name" attribute to the parent container. Finsweet applies this class automatically on hover and selection.

Conclusion

Finsweet Star Rating adds a native rating component without custom JavaScript. Use cases:

• Post-purchase customer satisfaction form
• Rating a product or service in a contact form
• NPS survey with visual ratings