Designing a Star Rating Feedback Form with HTML & CSS

Feedback is essential for improving any product or service. One effective way to collect feedback is by using a star rating system in your HTML forms. In this blog post, we will walk you through the process of creating a feedback form with a star rating feature. This simple but powerful addition can help you gather valuable insights from your users. Let’s get started!

Step 1: Set Up the HTML Structure

Begin by creating a basic HTML structure for your feedback form. In this HTML structure, we’ve created a form that includes a textarea for feedback and a star rating system using radio buttons and labels.

<div class="feedback-wrapper">
<div class="feedback-title">Rate your experience</div>
<div class="feedback-content">We highly value your feedback! Kindly take a moment to rate your experience and provide us with your valuable feedback.</div>
<div class="feedback-rate-box">
<input type="radio" name="feedback-star" id="feedback-star0"/>
<label class="feedback-star" for="feedback-star0"></label>
<input type="radio" name="feedback-star" id="feedback-star1"/>
<label class="feedback-star" for="feedback-star1"></label>
<input type="radio" name="feedback-star" id="feedback-star2" checked="checked"/>
<label class="feedback-star" for="feedback-star2"></label>
<input type="radio" name="feedback-star" id="feedback-star3"/>
<label class="feedback-star" for="feedback-star3"></label>
<input type="radio" name="feedback-star" id="feedback-star4"/>
<label class="feedback-star" for="feedback-star4"></label>
<textarea cols="30" rows="6" placeholder="Tell us about your experience!"></textarea>
<div class="feedback-submit-btn">Send</div>

Step 2: Style the Form with CSS

In this CSS code, we’ve added styles to create an attractive and user-friendly feedback form. We’ve centered the form, styled the text and input fields, and made the star rating visually appealing.

@charset "UTF-8";
@import url(";700&display=swap");
@import url("");

* {
box-sizing: border-box;
html {
font-size: 6.25vmax;
@media (max-width: 992px) {
html {
font-size: 60px;
body {
min-height: 100vh;
padding: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
color: #222;
font-size: 0.24rem;
font-family: "Space Grotesk", sans-serif;
/* Updated background color */
background-color: #0206066e;
.feedback-wrapper {
width: 6rem;
padding: 0.3rem 0.6rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
border-radius: 0.25rem;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
/* Updated background color */
background-color: #0206066e;
z-index: 1;
.feedback-wrapper .feedback-title {
font-weight: bold;
font-size: 0.36rem;
.feedback-wrapper .feedback-content {
line-height: 1.6;
color: #555;
.feedback-rate-box {
display: flex;
flex-direction: row-reverse;
gap: 0.1rem;
.feedback-rate-box input {
display: none;
.feedback-rate-box input:hover ~ .feedback-star:before {
color: rgba(255, 204, 51, 0.5);
.feedback-rate-box input:active + .feedback-star:before {
transform: scale(0.9);
.feedback-rate-box input:checked ~ .feedback-star:before {
color: #ffcc33;
text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.8);
.feedback-rate-box .feedback-star:before {
content: "★";
display: inline-block;
font-family: "Potta One", cursive;
font-size: 0.6rem;
cursor: pointer;
color: #0000;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
background-color: #aaa;
background-clip: text;
-webkit-background-clip: text;
transition: all 0.3s;
textarea {
border: none;
resize: none;
width: 100%;
padding: 0.2rem;
color: inherit;
font-family: inherit;
line-height: 1.5;
border-radius: 0.2rem;
box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.3), inset -2px -2px 8px rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.3);
textarea::placeholder {
color: #aaa;
textarea:focus {
outline-color: #ffcc33;
.feedback-submit-btn {
padding: 0.2rem 0.5rem;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.8);
border-radius: 1rem;
cursor: pointer;
background-color: #ffcc33;
transition: all 0.2s;
.feedback-submit-btn:active {
transform: translate(2px, 2px);

Designing a Star Rating Feedback Form with HTML & CSS DEMO

You’ve successfully created a feedback form with a star rating system using HTML and CSS. This user-friendly form can help you collect valuable feedback from your website or application users.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment