Create Bootstrap 5 Feedback Form using HTML, CSS, & JavaScript

Faraz

By Faraz -

Learn how to create a Bootstrap 5 feedback form using HTML, CSS, and JavaScript. Step-by-step guide with a star rating, stylish UI, and a success message popup.

Join us on Telegram
create-bootstrap-5-feedback-form-using-html-css-and-javascript.webp
Read Alsohow-to-create-a-medical-newsletter-with-html-and-css.webpHow to Create a Medical Email Newsletter with HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

A feedback form helps collect user opinions, suggestions, or reviews about a product or service. A well-designed form improves user interaction and provides valuable insights.

In this guide, you will learn how to create a Bootstrap 5 feedback form using HTML, CSS, and JavaScript. The form will have a star rating system, a responsive layout, and a popup message on submission.

Prerequisites

Before starting, make sure you have:

  • Basic knowledge of HTML, CSS, and JavaScript
  • A text editor (VS Code, Sublime Text, etc.)
  • A web browser for testing

Source Code

Step 1 (HTML Code):

Create a simple feedback form with a star rating and a submit button. Below is a detailed breakdown of each section:

1. HTML Document Structure

<!DOCTYPE html>
<html lang="en">
  • <!DOCTYPE html>: Declares this as an HTML5 document.
  • <html lang="en">: Defines the document's language as English.

2. Head Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Feedback Form</title>
  • <meta charset="UTF-8">: Ensures proper text encoding (supports special characters).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsiveness on mobile devices.
  • <title>Bootstrap Feedback Form</title>: Defines the title shown in the browser tab.

3. External CSS and Libraries

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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">
  • Bootstrap 5 CSS: Styles the form using Bootstrap.
  • Font Awesome: Provides star icons for rating.
  • SweetAlert2: Adds popup notifications after form submission.
  • Google Fonts (Poppins): Improves the typography of the form.
  • styles.css: A custom CSS file for additional styling.

4. Feedback Form UI

<body>
<div class="feedback-card">
    <h4 class="fw-bold">We Value Your Feedback! 🌟</h4>
    <p class="text-muted">Rate your experience</p>
  • <div class="feedback-card">: A custom container for the feedback form.
  • <h4 class="fw-bold">: Displays a bold title ("We Value Your Feedback! 🌟").
  • <p class="text-muted">: Adds a subheading ("Rate your experience").

5. Star Rating System

<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>
  • <div class="star-rating">: A section for the star rating system.
  • <i class="fa fa-star" data-value="X">:
  • Uses Font Awesome icons for stars ⭐.
  • data-value="X" assigns a numeric value (1-5) to each star.

6. Feedback Form

<form id="feedbackForm">
        <div class="mb-3">
            <textarea class="form-control" rows="4" placeholder="Write your feedback..." required></textarea>
        </div>
        <button type="submit" class="btn btn-submit w-100">Submit Feedback</button>
    </form>
</div>
  • <form id="feedbackForm">: Defines the feedback form.
  • <textarea class="form-control">: Allows users to type feedback (Bootstrap styling applied).
  • <button type="submit" class="btn btn-submit w-100">Submit Feedback</button>:
  • A styled submit button (w-100 makes it full-width).

7. JavaScript File

<script src="script.js"></script>
</body>
</html>
  • script.js: A custom JavaScript file to handle star rating and form submission.
Read Alsocarousel.pngCreate a Carousel Slider Using HTML and Pure CSS

Step 2 (CSS Code):

We will add some CSS styles to make the form look more attractive. Below is a breakdown of each section:

1. Styling the Body

body {
  background: #19707f;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', Courier, monospace;
}
  • Background color: #19707f (teal color) sets the page background.
  • Full-page height: height: 100vh; makes the body take up the entire viewport height.
  • Flexbox centering:
    • display: flex; enables flexbox layout.
    • justify-content: center; centers the content horizontally.
    • align-items: center; centers the content vertically.
  • Font-family: Uses 'Poppins' (modern look), with Courier & monospace as fallback fonts.

2. Styling the Feedback Card

.feedback-card {
  max-width: 500px;
  padding: 20px;
  border-radius: 12px;
  background: white;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
}
  • max-width: 500px;: Limits the width to 500px (responsive).
  • padding: 20px;: Adds spacing inside the card.
  • border-radius: 12px;: Gives rounded corners.
  • background: white;: Sets the card background to white.
  • box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);:
  • Adds a subtle shadow effect for depth.
  • text-align: center;: Centers the text inside the card.

3. Styling the Star Rating Section

.star-rating {
  font-size: 24px;
  cursor: pointer;
}
  • font-size: 24px;: Increases star size for better visibility.
  • cursor: pointer;: Changes the cursor to pointer when hovering (indicates interactivity).

4. Styling Individual Stars

.star-rating i {
  color: #ccc;
  transition: 0.3s;
}
  • color: #ccc;: Sets the default star color to gray.
  • transition: 0.3s;: Smooth color transition on hover or click.

Active Star Styling (Selected Stars)

.star-rating i.active {
  color: #ffd700; 
}
  • color: #ffd700;: Changes active stars to gold (#ffd700).

5. Styling the Submit Button

.btn-submit {
  background: #19707f;
  color: white;
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  transition: 0.3s;
}
  • Background color: #19707f (same as body background).
  • Text color: white for contrast.
  • Border: none; (removes default button border).
  • Padding: 10px; (adds space inside the button).
  • Font size: 16px; this makes text more readable.
  • Rounded corners: border-radius: 5px;
  • Smooth transition: transition: 0.3s; for hover effects.

Submit Button Hover Effect

.btn-submit:hover {
  background: #0e414a;
  color: white;
}
  • Background color changes to a darker shade (#0e414a) on hover.
body {
  background: #19707f;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', Courier, monospace;
}
.feedback-card {
  max-width: 500px;
  padding: 20px;
  border-radius: 12px;
  background: white;
  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: #19707f;
  color: white;
  border: none;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  transition: 0.3s;
}
.btn-submit:hover {
  background: #0e414a;
  color: white;
}

Step 3 (JavaScript Code):

Now, let's add JavaScript to: Highlight stars on click and Show a success popup when the form is submitted. Below is a breakdown of each section:

1. Runs When Page Loads

document.addEventListener("DOMContentLoaded", function () {
  • This ensures that the script runs only after the HTML content is fully loaded.
  • Prevents errors when selecting elements.

2. Selecting All Stars

const stars = document.querySelectorAll(".star-rating i");
let selectedRating = 0;
  • stars stores all <i> elements inside .star-rating (i.e., the stars ⭐).
  • selectedRating = 0; means no rating is selected initially.

3. Adding Click Event to Stars

stars.forEach(star => {
    star.addEventListener("click", function () {
  • Loops through each star and adds a click event listener.
  • When a user clicks a star, the function below runs.

4. Storing the Selected Rating

selectedRating = this.getAttribute("data-value");
  • this.getAttribute("data-value") gets the star's rating value (e.g., 1, 2, 3, 4, 5).
  • Saves it in selectedRating.

5. Removing Previous Active Stars

stars.forEach(s => s.classList.remove("active"));
  • Before highlighting the new stars, it removes the "active" class from all stars.

6. Highlighting Selected Stars

for (let i = 0; i < selectedRating; i++) {
    stars[i].classList.add("active");
}
  • Loops from index 0 to selected rating.
  • Adds the active class to change star color (turns gold ⭐).
  • Example: Clicking on the 4th star will highlight stars 1 to 4.

7. Handling Form Submission

document.getElementById("feedbackForm").addEventListener("submit", function (e) {
    e.preventDefault();
  • When the form is submitted, it runs this function.
  • e.preventDefault(); stops the default page refresh.

8. Checking if a Rating is Selected

if (selectedRating === 0) {
    Swal.fire({
        icon: 'warning',
        title: 'Oops...',
        text: 'Please select a star rating before submitting!',
    });
    return;
}
  • If the user tries to submit without selecting a star, it shows a warning popup using SweetAlert2.

9. Showing Success Popup

Swal.fire({
    icon: 'success',
    title: 'Thank You! 🎉',
    text: 'Your feedback has been submitted successfully.',
    confirmButtonColor: '#19707F'
});
  • When feedback is successfully submitted, a success message pops up.

10. Resetting the Form and Stars

this.reset();
stars.forEach(s => s.classList.remove("active"));
selectedRating = 0;
  • It clears the feedback form after submission.
  • Removes the active stars (resets the rating).
  • Sets selectedRating = 0 for the next feedback.
document.addEventListener("DOMContentLoaded", function () {
  const stars = document.querySelectorAll(".star-rating i");
  let selectedRating = 0;

  stars.forEach(star => {
      star.addEventListener("click", function () {
          selectedRating = this.getAttribute("data-value");
          stars.forEach(s => s.classList.remove("active"));
          for (let i = 0; i < selectedRating; i++) {
              stars[i].classList.add("active");
          }
      });
  });

  document.getElementById("feedbackForm").addEventListener("submit", function (e) {
      e.preventDefault();
      if (selectedRating === 0) {
          Swal.fire({
              icon: 'warning',
              title: 'Oops...',
              text: 'Please select a star rating before submitting!',
          });
          return;
      }
      Swal.fire({
          icon: 'success',
          title: 'Thank You! 🎉',
          text: 'Your feedback has been submitted successfully.',
          confirmButtonColor: '#19707F'
      });
      this.reset();
      stars.forEach(s => s.classList.remove("active"));
      selectedRating = 0;
  });
});

Final Output:

create-bootstrap-5-feedback-form-using-html-css-and-javascript.gif
Read Alsohow to create a responsive product showcase carousel using html, css and javascript.pngCreate a Responsive Product Showcase Carousel using HTML, CSS, and JavaScript

Conclusion:

You have successfully created a Bootstrap 5 feedback form with a star rating, stylish design, and a success popup using HTML, CSS, and JavaScript.

This form is fully responsive, modern, and easy to use. You can integrate it into any website or project to collect user feedback.

Want to improve it? You can:

  • Store the feedback in a database using PHP/MySQL
  • Add animations for a better UI experience
  • Customize the design with more colors and icons

Now, go ahead and implement this in your next project!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: bootstrap feedback form, feedback form html, feedback form javascript, star rating form, feedback form design, how to create a feedback form using bootstrap 5, bootstrap 5 feedback form with star rating, create a stylish feedback form with html css and javascript, responsive feedback form using bootstrap 5, feedback form with a popup message in javascript
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺