Discover how to build a Bootstrap 5 Feedback form utilizing HTML, CSS, and JavaScript. This comprehensive guide includes a star rating feature, an appealing user interface, and a confirmation message that appears after submission.
What is Feedback Star Rating with detailed explanation:
Feedback star ratings are vital in the digital age, guiding consumers in their purchasing decisions across various platforms. They typically range from one to five stars, providing a quick visual summary of customer satisfaction and experiences. High ratings build trust and credibility for businesses, influencing consumer choices and encouraging competition for better quality. However, challenges such as subjectivity, bias, fake reviews, and lack of context can effect the reliability of these ratings.
Consumers are advised to look beyond the stars, read written reviews and consider the number of ratings for reliability. Business should encourage honest feedback, respond to reviews, and use insights for improvements. Overall, understanding and utilizing feedback star ratings effectively remains essential for informed decision-making and enhancing service quality.
Let’s begin, how to build a Bootstrap 5 Feedback star rating form utilizing HTML, CSS, and JavaScript. The form will feature a star rating system, a responsive design, and a pop-up notification upon submission.
- HTML CODE
Develop a straightforward feedback form that includes a star rating and a submit button. Here is a comprehensive overview summary:
The HTML document declares it as an HTML5 document in English, includes a head section that manages text encoding, responsiveness, and the document title. It incorporates external CSS and libraries for styling with Bootstrap and star icons for rating, popup notifications, improved typography, and additional custom CSS for further styling.
The Feedback form UI includes a custom container with a bold title and subheading, a star rating system using Font Awesome icons for ratings, a feedback form with Bootstrap styling, and a full-width submit button, all managed by a custom JavaScript file for handling ratings and form submission.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Form | Coding Jasim</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sectionFeedback">
<h4 class="fw-bold">Your Feedback is Important to Us! 🌟</h4>
<p class="text-muted">Rate your experience</p>
<div class="star-rating my-3">
<i class="fa fa-star" data-value="1"></i>
<i class="fa fa-star" data-value="2"></i>
<i class="fa fa-star" data-value="3"></i>
<i class="fa fa-star" data-value="4"></i>
<i class="fa fa-star" data-value="5"></i>
</div>
<form id="formFeedback">
<div class="mb-3">
<textarea class="form-control" rows="4" placeholder="Please Share your thoughts..." required></textarea>
</div>
<button type="submit" class="btn btn-submit w-100">Send Feedback</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>- CSS CODE
We will incorporate some CSS styles to enhance the visual appeal of the form. Below is an summary overview.
The body of the page is styled with a blue background (#050a53) and occupies the full viewport height using flexbox for centered. A feedback card is designed with a maximum width of 500px, white background, rounded corners and a subtle shadow for depth.
The star rating section features stars visibility with gray as default color and gold for active selections. While a submit button with white text and rounded corners, including hover effect that change color in background. Overall, the design emphasizes a modern look with responsive elements and clear interactivity.
body {
background: #050a53;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', Courier, monospace;
}
.sectionFeedback {
max-width: 500px;
padding: 20px;
border-radius: 12px;
background: rgb(254, 253, 254);
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
text-align: center;
}
.star-rating {
font-size: 24px;
cursor: pointer;
}
.star-rating i {
color: #ccc;
transition: 0.3s;
}
.star-rating i.active {
color: #ffd700;
}
.btn-submit {
background: #026b09;
color: white;
border: none;
padding: 10px;
font-size: 16px;
border-radius: 5px;
transition: 0.3s;
}
.btn-submit:hover {
background: #0e414a;
color: white;
}- JavaScript
Now, let’s incorporate JavaScript to: Emphasize stars upon clicking and Display a success notification when the form is submitted. Here’s a detailed explanation summary.
This script runs after the HTML content is fully loaded to avoid errors in selecting elements. It collects all star elements and initializes the selected rating to zero. Click events are added to each star, allowing users to select a rating, which updates the selected rating value and highlights the corresponding stars.
Upon form submission, the script checks if a ratings is selected and displays a warning if not, utilizing SweetAlerts for alerts. Displaying success popup upon submission successful. Then resets the form and star ratings and selectedRatign to 0 for future feedback.
document.addEventListener("DOMContentLoaded", function () {
const ratingStars = document.querySelectorAll(".star-rating i");
let selectedRating = 0;
ratingStars.forEach(star => {
star.addEventListener("click", function () {
selectedRating = this.getAttribute("data-value");
ratingStars.forEach(s => s.classList.remove("active"));
for (let i = 0; i < selectedRating; i++) {
ratingStars[i].classList.add("active");
}
});
});
document.getElementById("formFeedback").addEventListener("submit", function (e) {
e.preventDefault();
if (selectedRating === 0) {
Swal.fire({
icon: 'warning',
title: 'Oops...',
text: 'Please choose stars rating before submitting!',
});
return;
}
Swal.fire({
icon: 'success',
title: 'Thank You!',
text: 'Your feedback has been successfully submitted.',
confirmButtonColor: '#19707F'
});
this.reset();
ratingStars.forEach(s => s.classList.remove("active"));
selectedRating = 0;
});
});You have successfully developed a Bootstrap 5 Feedback Form that features a star rating, an attractive design, and a success popup using HTML, CSS, and JavaScript.
This form is completely responsive, contemporary, and user-friendly. You can incorporate into any website or project to gather user feedback.