form.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Design</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .star-rating {
            display: flex;

        }

        .star-rating input[type="radio"] {
            display: none;
        }

        .star-rating label {
            font-size: 30px;
            color: gold;
            cursor: pointer;
            padding: 5px;
        }
        label{
            font-weight: bold ;
            padding-top: 10px;
        }
        .required:after {
    content:" *";
    color: red;
  }

  table.table-striped th {
    width: 15%; /* Adjust this value as needed */
  }
  .tablecenter {
    text-align: center;
  }
    </style>
</head>

<body>
    <div class="container m-5">
        <form action="#">

            <div class="row g-3 ">
                <label class="form-label required">Name </label>
                <div class="col-3">
                    <input type="text" class="form-control">
                <p>First</p>
                </div>
                <div class="col-3">
                    <input type="text" class="form-control">
                    <p>Last</p>
                </div>

            </div>
            <div class="row">
                <div class="col-6">
                    <label  class="form-label required">Email </label>
                    <input type="email" class="form-control">
                </div>
            </div>
           
            <div >
                <label for=""  class="form-label required">Your Experience </label>
                <div class="star-rating">
                <input type="radio" id="star1" name="rating" value="1" checked>
                <label for="star1">&#9733;</label>
                <input type="radio" id="star2" name="rating" value="2" checked>
                <label for="star2">&#9733;</label>
                <input type="radio" id="star3" name="rating" value="3" checked>
                <label for="star3">&#9733;</label>
                <input type="radio" id="star4" name="rating" value="4" checked>
                <label for="star4">&#9733;</label>
                <input type="radio" id="star5" name="rating" value="5" checked>
                <label for="star5">&#9733;</label>
            </div>
        </div>
<p>Overall, how would you rate you experience with us?</p>
<label  class="required">How satisfied are you with </label>
<table class="table table-striped">
    <thead>
        <tr>
          <th scope="col">  </th>
          <th class="tablecenter">Very Unsatisfied</th>
          <th class="tablecenter"> Unsatisfed</th>
          <th class="tablecenter"> Normal </th>
          <th class="tablecenter">satisfied</th>
          <th class="tablecenter"> Very satisfied</th>
        </tr>
      </thead>
    <tr>
      
        <th >Purchase</th>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        
    </tr>
    <tr>
      
        <th>Service</th>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        
    </tr>
    <tr>
      
        <th>Company Overall</th>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        
    </tr>
  </table>

  <label class="required">How likely are you to </label>
<table class="table table-striped">
    <thead>
        <tr>
          <th scope="col">  </th>
          <th class="tablecenter">Very Unlikely </th>
          <th class="tablecenter"> Unlikely </th>
          <th class="tablecenter"> Normal </th>
          <th class="tablecenter">likely </th>
          <th class="tablecenter"> Very likely </th>
        </tr>
      </thead>
    <tr>
      
        <th >Buy from us again</th>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        
    </tr>
    <tr>
      
        <th >Recommend our<br> product to others</th>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        
    </tr>
    <tr>
      
        <th>Recommend our<br> company to otherrs</th>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
        <td class="tablecenter"><input type="radio"  name="" id=""></td>
    </tr>
  </table>

  <div class="row  ">
    <label class="form-label">Additional comments or suggestions</label>
    <div class="col-12">
        <textarea class="textarea  form-control p-5"> </textarea>
    </div>
   

</div>
<input type="submit" value="Submit" class="mt-4 p-3">
  
 
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
</body>

</html>