Feedback forms are essential for businesses to gather valuable insights from their users. Adding star ratings to feedback forms can make the process more engaging and intuitive for users. In this guide, we'll walk through the process of creating a feedback form with star ratings using HTML, CSS, and JavaScript.
Demo here
Step 1: HTML Structure ☠
First, let's define the structure of our feedback form in HTML. We'll create a simple form with star ratings and a textarea for additional comments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="feedback-form">
<h2>Feedback Form</h2>
<form id="feedbackForm">
<div class="rating">
<!-- Notice that the stars are in reverse order -->
<input type="radio" id="star5" name="rating" value="5">
<label for="star5">★</label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4">★</label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3">★</label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2">★</label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1">★</label>
</div>
<div class="comment">
<label for="comment">Tell us more:</label><br>
<textarea id="comment" name="comment"></textarea>
</div>
<button type="submit" class="submit-btn">Submit</button>
</form>
</div>
<script src="./script.js"></script>
</body>
</html>
Step 2: CSS Styling 💅
Next, let's add some CSS styles to make our feedback form visually appealing. We'll style the star ratings and the textarea.
body {
font-family: Arial, sans-serif;
}
.feedback-form {
max-width: 400px;
margin: 0 auto;
}
.rating {
margin-bottom: 20px;
display: flex;
flex-direction: row-reverse; /* this is the magic */
justify-content: flex-end;
}
.rating input {
display: none;
}
.rating label {
font-size: 24px;
cursor: pointer;
}
.rating label:hover,
.rating label:hover ~ label { /* reason why the stars are in reverse order in the html */
color: orange;
}
.rating input:checked ~ label {
color: orange;
}
.comment {
margin-bottom: 20px;
}
.comment textarea {
width: 100%;
height: 100px;
resize: none;
}
.submit-btn {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
}
Note: "~" is the Subsequent sibling combinator a CSS selector, which only allows us to select the subsequent siblings in the html order, there is no selector or combinator which lets us select the preceding siblings and this is why we wrote the stars in reverse order in the HTML file.
Step 3: JavaScript Functionality 🧩
Finally, let's add JavaScript code to handle the form submission.
document.getElementById("feedbackForm").addEventListener("submit", function (event) {
event.preventDefault();
var rating = document.querySelector('input[name="rating"]:checked').value;
var comment = document.getElementById("comment").value;
// Here you can handle the submission, for now just logging the values
console.log("Rating: ", rating);
console.log("Comment: ", comment);
// You can send this data to the server using AJAX or other methods
// For simplicity, I'm just logging it here
});
Conclusion 🎉
In this tutorial, we've learned how to create a feedback form with star ratings using HTML, CSS, and JavaScript. By following these steps, you can easily implement a user-friendly feedback mechanism on your website or web application, allowing users to provide valuable input in a visually appealing way.
Feel free to customize and expand upon this template to fit the specific requirements of your project. Happy coding! 😊
Demo here
Top comments (0)