simple feedback form with star rating using HTML CSS
ultimate-bundle-horizontal-99

Collecting user feedback is crucial for improving your website, service, or product. A star rating system is a quick and visually engaging way to let users rate their experience. In this blog post, we’ll create a simple feedback form with star ratings using only HTML and CSS, no JavaScript required.

This tutorial is perfect for beginners and ideal for contact pages, product reviews, or service ratings.

We’ll design a clean feedback form that includes:

  • A star rating system using radio inputs
  • A text feedback field
  • A submit button

Step 1: HTML Structure

Here’s the HTML code for the feedback form with a star rating system:

<div class="feedback-container">
  <form class="feedback-form">
    <h2>How was your experience?</h2>

    <div class="stars">
      <input type="radio" name="rating" id="star5" value="5">
      <label for="star5" title="Excellent">★</label>

      <input type="radio" name="rating" id="star4" value="4">
      <label for="star4" title="Very Good">★</label>

      <input type="radio" name="rating" id="star3" value="3">
      <label for="star3" title="Good">★</label>

      <input type="radio" name="rating" id="star2" value="2">
      <label for="star2" title="Fair">★</label>

      <input type="radio" name="rating" id="star1" value="1">
      <label for="star1" title="Poor">★</label>
    </div>

    <textarea rows="4" placeholder="Share your feedback..."></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

Step 2: CSS Styling

Now, let’s make the form look clean and professional using CSS:

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f8f9fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
}

/* Container */
.feedback-container {
  background: #ffffff;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
}

/* Form */
.feedback-form h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
}

.feedback-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  margin: 20px 0;
  resize: vertical;
}

/* Button */
.feedback-form button {
  width: 100%;
  padding: 12px;
  border: none;
  background: #28a745;
  color: #fff;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.feedback-form button:hover {
  background: #218838;
}

/* Star Rating */
.stars {
  direction: rtl;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.stars input {
  display: none;
}

.stars label {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
  transition: color 0.3s ease;
}

.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label {
  color: #ffc107;
}

How It Works

The Star Rating System:

  • We use radio buttons (<input type="radio">) for each star, but hide them with display: none.
  • Each radio input is paired with a <label> element displaying the ★ (Unicode star).
  • The trick: Using direction: rtl and ~ (sibling selector) to apply styles in reverse order — clicking a star highlights it and all stars before it.
  • On hover, stars temporarily highlight to give visual feedback.

Textarea for Feedback:

A simple <textarea> allows users to leave additional comments. You can later connect this to your backend or services like Formspree or Google Forms.

Submit Button:

A styled button to submit the form (currently non-functional unless connected to a form handler or JS script).

Conclusion

Creating a feedback form with star ratings in HTML and CSS is simple yet effective. This design can be easily reused on blogs, product pages, landing pages, or customer support portals. No need for frameworks — just clean, semantic code.

If you liked this tutorial, explore more of Simple Contact Form. Stay tuned for more beginner-friendly web development tips!

Popular Downloads