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> </div> <textarea cols="30" rows="6" placeholder="Tell us about your experience!"></textarea> <div class="feedback-submit-btn">Send</div> </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("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
* {
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.
