Feedback Form in HTML with Star Rating

Are you looking for feedback form design? If yes, then you are in the right place. This tutorial explains how to create a feedback form with a star rating system using HTML and CSS. Besides the star-rating, we’ll also add a scale-rating, message box (textarea) in this feedback form.

Unlike other HTML designed forms such as the contact us form or CSS login form, a feedback form is a little bit different to style. Because we have to add some additional elements (like the star rating) in such forms.

The star and scale rating system used in this feedback form template is based on HTML radion input and pure CSS. Anyhow, you can get the value of the checked radio in JavaScript/jQuery and submit (to the database) along with the user/customer feedback.

HTML Structure for Feedback Form

The very first and most important thing for getting positive feedback from your users/customers are sentences that encourage users to give their opinion. You must need to place these sentences before starting the feedback form. We have already placed a little paragraph in the below code for encouraging users.

In order to create a feedback form, create a div element with a class name "feedback" , and place an HTML form tag with the following mentioned elements:

<div class="feedback">
<p>Dear Customer,<br>
Thank you for getting your car services at our workshop. We would like to know how we performed. Please spare some moments to give us your valuable feedback as it will help us in improving our service.</p>

<h4>Please rate your service experience for the following parameters</h4>

<form method="post" action="#action-url">
<label>1. Your overall experience with us ?</label><br>
  
<span class="star-rating">
  <input type="radio" name="rating1" value="1"><i></i>
  <input type="radio" name="rating1" value="2"><i></i>
  <input type="radio" name="rating1" value="3"><i></i>
  <input type="radio" name="rating1" value="4"><i></i>
  <input type="radio" name="rating1" value="5"><i></i>
</span>

  <div class="clear"></div> 
  <hr class="survey-hr">
<label>2. Friendliness and courtesy shown to you while recieving your vehicle</label><br>
<span class="star-rating">
  <input type="radio" name="rating2" value="1"><i></i>
  <input type="radio" name="rating2" value="2"><i></i>
  <input type="radio" name="rating2" value="3"><i></i>
  <input type="radio" name="rating2" value="4"><i></i>
  <input type="radio" name="rating2" value="5"><i></i>
</span>


  <div class="clear"></div> 
  <hr class="survey-hr">
<label>3. Friendliness and courtesy shown to you while delivery of your vehicle</label><br><br/>
  <div style="color:grey">
    <span style="float:left">
     POOR
    </span>
    <span style="float:right">
      BEST
    </span>
    
  </div>
<span class="scale-rating">
  <label value="1">
  <input type="radio" name="rating" >
  <label style="width:100%;"></label>
  </label>
  <label value="2">
  <input type="radio" name="rating" >
  <label style="width:100%;"></label>
  </label>
  <label value="3">
  <input type="radio" name="rating">
  <label style="width:100%;"></label>
  </label>
  <label value="4">
  <input type="radio" name="rating">
  <label style="width:100%;"></label>
  </label>
  <label value="5">
  <input type="radio" name="rating">
  <label style="width:100%;"></label>
  </label>
  <label value="6">
  <input type="radio" name="rating">
  <label style="width:100%;"></label>
  </label>
  <label value="7">
  <input type="radio" name="rating">
  <label style="width:100%;"></label>
  </label>
  <label value="8">
  <input type="radio" name="rating">
  <label style="width:100%;"></label>
  </label>
  <label value="9">
  <input type="radio" name="rating">
  <label style="width:100%;"></label>
  </label>
  <label value="10">
  <input type="radio" name="rating" value="10">
  <label style="width:100%;"></label>
  </label>
</span>

  <div class="clear"></div> 
  <hr class="survey-hr"> 
<label for="m_3189847521540640526commentText">4. Any Other suggestions:</label><br/><br/>
<textarea cols="75" name="commentText" rows="5" style="100%"></textarea><br>
<br>
  <div class="clear"></div> 
<input style="background:#43a7d5;color:#fff;padding:12px;border:0" type="submit" value="Submit your review"> 
</form>
</div>

If you want to add more star rating parameters, just copy/paste the span element (that’s class “star-rating”). Similarly, you can add more than one scale rating element as described above.

The CSS Styles

In CSS, first of all, specify styles for the container of the feedback form. Set its max-width, background color, padding, and margin values as described below.

.feedback{
    width: 100%;
    max-width: 780px;
    background: #fff;
    margin: 0 auto;
    padding: 15px;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.3);
}

As we used thematic break (hr tag) between the form’s elements, so define its custom styles to reduce the default thickness of the separating line.

.survey-hr{
  margin:10px 0;
  border: .5px solid #ddd;
}

After that, define the CSS styles for the form input and textarea element. Keep 100% width in order to make these inputs responsive.

.feedback form input,
.feedback form textarea{
    width: 100%;
    border: 1px solid #ddd;
}

Feedback Form Star Rating CSS

After defining the basic styles for the form, now we’ll specify the CSS styles for the star rating element. For this purpose, target the "star-rating" the class (that is the common class for the star rating’s container) and define styles as follows:

.star-rating {
   margin: 25px 0 0px;
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 175px;
  height: 35px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}

Similarly, add the following snippet for the selected star. You can set the custom background image for stars if you want to have a custom star-rating system.

.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}

The radio inputs are used for the selection of the stars. Target the star rating input and display it as an inline-block element. Likewise, define width, height, and keep the position value “relative”. Here, the important thing is the CSS opacity property which should be 0. We’ll change the opacity on hover and checked event in order to display the active star.

.star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}

Now, it’s time to display the active star on hover and checked pseudo-class. So, specify the CSS selectors and styles as follows:

.star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}

In the same way, define the CSS styles for the scale rating system. You can set the custom values for the width and height if you want to increase/decrease the choice box size.

.choice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 20px;
  display: block;
}
span.scale-rating{
margin: 5px 0 15px;
    display: inline-block;
   
    width: 100%;
   
}
span.scale-rating>label {
  position:relative;
    -webkit-appearance: none;
  outline:0 !important;
    border: 1px solid grey;
    height:33px;
    margin: 0 5px 0 0;
  width: calc(10% - 7px);
    float: left;
  cursor:pointer;
}

Likewise, specify styles for choice box label element as follows:

span.scale-rating label {
  position:relative;
    -webkit-appearance: none;
  outline:0 !important;
    height:33px;
      
    margin: 0 5px 0 0;
  width: calc(10% - 7px);
    float: left;
  cursor:pointer;
}

Finally, add the following CSS styles to make the scale rating activated. If you want to customize the choice boxes, you can set the custom values for the background color, border, width, and height property.

span.scale-rating input[type=radio] {
  position:absolute;
    -webkit-appearance: none;
  opacity:0;
  outline:0 !important;
    /*border-right: 1px solid grey;*/
    height:33px;
 
    margin: 0 5px 0 0;
  
  width: 100%;
    float: left;
  cursor:pointer;
  z-index:3;
}
span.scale-rating label:hover{
background:#fddf8d;
}
span.scale-rating input[type=radio]:last-child{
border-right:0;
}
span.scale-rating label input[type=radio]:checked ~ label{
    -webkit-appearance: none;

    margin: 0;
  background:#fddf8d;
}
span.scale-rating label:before
{
  content:attr(value);
    top: 7px;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;
  z-index:2;
}

You have done it! I hope you have successfully created a feedback form with the star rating system in your HTML project. If you have any questions or suggestions, feel free to comment below.