<!DOCTYPE html>
<html>
  <head>
    <title>Customer Satisfaction Survey</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">

  </head>
  <body>
    <form>
      <h1>Customer Satisfaction Survey</h1>
     <p>How satisfied are you with our product/service?</p>
      <input type="radio" name="satisfaction" value="very-satisfied" id="very-satisfied"><label for="very-satisfied">Very Satisfied</label>
      <input type="radio" name="satisfaction" value="satisfied" id="satisfied"><label for="satisfied">Satisfied</label>
      <input type="radio" name="satisfaction" value="neutral" id="neutral"><label for="neutral">Neutral</label>
      <input type="radio" name="satisfaction" value="unsatisfied" id="unsatisfied"><label for="unsatisfied">Unsatisfied</label>
      <input type="radio" name="satisfaction" value="very-unsatisfied" id="very-unsatisfied"><label for="very-unsatisfied">Very Unsatisfied</label>
      
      
      <p>How would you rate the quality of our product/service?</p>
      <input type="radio" name="quality" value="excellent" id="excellent"><label for="excellent">Excellent</label>
      <input type="radio" name="quality" value="good" id="good"><label for="good">Good</label>
      <input type="radio" name="quality" value="fair" id="fair"><label for="fair">Fair</label>
      <input type="radio" name="quality" value="poor" id="poor"><label for="poor">Poor</label>
      
      
     <p>How satisfied are you with our customer service?</p>
      <input type="radio" name="service" value="excellent" id="excellent"><label for="excellent">Excellent</label>
      <input type="radio" name="service" value="good" id="good"><label for="good">Good</label>
      <input type="radio" name="service" value="fair" id="fair"><label for="fair">Fair</label>
      <input type="radio" name="service" value="poor" id="poor"><label for="poor">Poor</label>

      <p>What do you think about the picing?</p>
      <input type="radio" name="pricing" value="affordable" id="affordable"><label for="affordable">Very Affordable</label>
      <input type="radio" name="pricing" value="suitable" id="suitable"><label for="suitable">Suitable</label>
      <input type="radio" name="pricing" value="good" id="good"><label for="good">Good Price</label>
      <input type="radio" name="pricing" value="expensive" id="expensive"><label for="expensive">Too Expensive</label>


      
      <p>Would you recommend our product/service to others?</p>
      <input type="radio" name="recommendation" value="yes" id="yes"><label for="yes">Yes</label>
      <input type="radio" name="recommendation" value="no" id="no"><label for="no">No</label>
      <p>How was your experience?</p>
      <div class="rating-box">
        <div class="stars">
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        </div>
      </div>
      <p>Do you have any comments or suggestions for how we can improve our product/service?</p>
      <textarea name="comments" id="comments"></textarea>
      <div> 
        <button type="button"><span></span>Submit</button>  
      </div> 
    </form>

    <script src="main.js"></script>
  </body>
</html>


body {
    font-family: Arial, sans-serif;
   background: linear-gradient(45deg, #d3155ec7, #388cadc0);
    background-size: cover;
    background-position: center;
    
    min-height: 200px;
}
  
  form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #528ec78e;
    backdrop-filter: blur(.4rem);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  h1, h2, p {
    margin: 0 0 10px;
  }
  p{
    color: rgb(30, 40, 41);
    font-size: 19px;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
  }
  span{
    color: rgb(44, 43, 42);
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
  }
  
  h1 {
    text-align: center;
    color:rgb(16, 25, 43);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  label {
    display: inline-block;
    margin-bottom: 10px;
    color: rgb(44, 43, 42);
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
  }
  label:hover{
    color: #4f1bc7;
  }
  
  input[type="radio"] {
    margin-right: 10px;
    display: inline-block;
  }
  .rating-box{
    position: relative;
    background: rgba(173, 169, 169, 0.705);
    padding: 25px 50px 35px;
    border-radius: 25px;
    box-shadow: 0 5px 10px rgb(0, 0, 0, 0.05);
  }
  .rating-box .stars{
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .stars i{
    color: #ebe5e5;
    font-size: 35px;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .stars i.active{
    color: #ffd51a;
  }
  
  textarea {
    width: 100%;
    height: 100px;
    background-color: rgba(197, 184, 184, 0.575);
    border: none;
  }
  button{
    width: 200px;
    padding: 15px 0;
    text-align: center;
    margin: 20px 10px;
    border-radius: 25px;
    font-weight: bold;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  span{
    background: #009688;
    height: 100%;
    width: 0;
    border-radius: 25px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: 0.5s;
  }
  button:hover span{
    width: 100%;
  }
  button:hover{
    border: none;
    
  }
  


const stars = document.querySelectorAll(".stars i");

stars.forEach((star, index1) => {
  star.addEventListener("click", () => {
    stars.forEach((star, index2) => {
      index1 >= index2 ? star.classList.add("active") : star.classList.remove("active");
    })
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.