Customer feedback is invaluable for improving your product or service. This free HTML feedback form template gives you a professional way to collect customer ratings, reviews, suggestions, and satisfaction data. The template includes star ratings, category selection, recommendation fields, and a message area—all with clean, modern styling that works on any device.
Here’s the complete, production-ready feedback form. Copy all the code and save it as an HTML file:
<!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> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 40px 20px; } .container { max-width: 650px; margin: 0 auto; background: white; padding: 45px; border-radius: 12px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15); } h1 { color: #1a1a1a; margin-bottom: 10px; font-size: 30px; } .subtitle { color: #666; margin-bottom: 32px; font-size: 15px; line-height: 1.6; } .form-group { margin-bottom: 28px; } label { display: block; margin-bottom: 12px; color: #333; font-weight: 500; font-size: 14px; } input[type="text"], input[type="email"], select, textarea { width: 100%; padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-family: inherit; transition: all 0.3s ease; } input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } textarea { resize: vertical; min-height: 110px; } .optional { color: #999; font-size: 13px; font-weight: 400; } .required { color: #e74c3c; } /* Rating Stars */ .rating-group { display: flex; gap: 10px; align-items: center; } .star-rating { display: flex; gap: 8px; font-size: 28px; } input[type="radio"] { display: none; } .star-label { cursor: pointer; color: #ddd; transition: all 0.2s ease; } input[type="radio"]:checked ~ .star-label, .star-label:hover, .star-label:hover ~ .star-label { color: #ffc107; } .star-container { display: flex; gap: 8px; flex-direction: row-reverse; justify-content: flex-end; } /* Yes/No Radio Buttons */ .radio-group { display: flex; gap: 30px; align-items: center; } .radio-option { display: flex; align-items: center; gap: 8px; } input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: #667eea; } .radio-label { margin: 0; cursor: pointer; font-weight: 400; } button { width: 100%; padding: 14px; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } button:hover { background: #5568d3; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } button:active { transform: scale(0.98); } .success-message { display: none; background: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 16px; border-radius: 8px; margin-bottom: 20px; } @media (max-width: 600px) { .container { padding: 30px 20px; } h1 { font-size: 26px; } .radio-group { gap: 20px; } } </style> </head> <body> <div class="container"> <h1>Share Your Feedback</h1> <p class="subtitle">Your feedback helps us improve. Please take a moment to share your thoughts and experiences.</p> <div class="success-message" id="successMessage"> Thank you for your feedback! We appreciate you taking the time to help us improve. </div> <form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST"> <div class="form-group"> <label for="name">Your Name <span class="optional">(Optional)</span></label> <input type="text" id="name" name="name"> </div> <div class="form-group"> <label for="email">Your Email <span class="optional">(Optional)</span></label> <input type="email" id="email" name="email"> </div> <div class="form-group"> <label for="category">What is your feedback about? <span class="required">*</span></label> <select id="category" name="category" required> <option value="">Select a category</option> <option value="Product Quality">Product Quality</option> <option value="Service Experience">Service Experience</option> <option value="Website/App">Website/App</option> <option value="Customer Support">Customer Support</option> <option value="Pricing">Pricing</option> <option value="General Feedback">General Feedback</option> <option value="Other">Other</option> </select> </div> <div class="form-group"> <label for="rating">How would you rate your experience? <span class="required">*</span></label> <div class="star-container"> <label class="star-label" for="star5">★</label> <input type="radio" id="star5" name="rating" value="5" required> <label class="star-label" for="star4">★</label> <input type="radio" id="star4" name="rating" value="4"> <label class="star-label" for="star3">★</label> <input type="radio" id="star3" name="rating" value="3"> <label class="star-label" for="star2">★</label> <input type="radio" id="star2" name="rating" value="2"> <label class="star-label" for="star1">★</label> <input type="radio" id="star1" name="rating" value="1"> </div> </div> <div class="form-group"> <label for="message">Your Feedback <span class="required">*</span></label> <textarea id="message" name="message" required placeholder="Please share your thoughts, suggestions, or any issues you experienced..."></textarea> </div> <div class="form-group"> <label>Would you recommend us to others? <span class="required">*</span></label> <div class="radio-group"> <div class="radio-option"> <input type="radio" id="recommend-yes" name="recommendation" value="Yes" required> <label for="recommend-yes" class="radio-label">Yes</label> </div> <div class="radio-option"> <input type="radio" id="recommend-no" name="recommendation" value="No"> <label for="recommend-no" class="radio-label">No</label> </div> </div> </div> <button type="submit">Submit Feedback</button> </form> </div> <script> document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); fetch(this.action, { method: this.method, body: formData }).then(response => { if (response.ok) { document.getElementById('successMessage').style.display = 'block'; this.reset(); window.scrollTo({ top: 0, behavior: 'smooth' }); } }).catch(error => console.error('Error:', error)); }); </script> </body> </html>
Getting your feedback form live takes just three simple steps:
Step 1: Copy the Code
Select all the HTML code above and paste it into a new text file. Save it with a .html extension (such as feedback-form.html). Open the file in your browser to preview how it looks.
Step 2: Create a FormBackend Account Visit FormBackend.com and create a free account. This service captures all feedback submissions and sends them to your email automatically. You’ll get a unique form ID after setting up your form.
Step 3: Update Your Form Action
Replace YOUR_FORM_ID with your actual FormBackend ID. Your action URL should look like https://www.formbackend.com/f/abc123xyz789. Save the file and test it with a sample submission.
A lightweight version focusing on satisfaction ratings:
<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST"> <div class="form-group"> <label for="email">Email <span class="optional">(Optional)</span></label> <input type="email" id="email" name="email"> </div> <div class="form-group"> <label>How satisfied are you? <span class="required">*</span></label> <div class="star-container"> <label class="star-label" for="star5">★</label> <input type="radio" id="star5" name="rating" value="5" required> <label class="star-label" for="star4">★</label> <input type="radio" id="star4" name="rating" value="4"> <label class="star-label" for="star3">★</label> <input type="radio" id="star3" name="rating" value="3"> <label class="star-label" for="star2">★</label> <input type="radio" id="star2" name="rating" value="2"> <label class="star-label" for="star1">★</label> <input type="radio" id="star1" name="rating" value="1"> </div> </div> <div class="form-group"> <label for="comment">Additional Comments</label> <textarea id="comment" name="comment" placeholder="Tell us more (optional)..."></textarea> </div> <button type="submit">Submit Rating</button> </form>
Net Promoter Score survey with 0-10 scale:
<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST"> <div class="form-group"> <label for="email">Email <span class="optional">(Optional)</span></label> <input type="email" id="email" name="email"> </div> <div class="form-group"> <label>How likely are you to recommend us? (0-10) <span class="required">*</span></label> <div class="radio-group" style="flex-wrap: wrap; gap: 12px;"> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps0" name="nps" value="0" required> <label for="nps0" class="radio-label">0</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps1" name="nps" value="1"> <label for="nps1" class="radio-label">1</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps2" name="nps" value="2"> <label for="nps2" class="radio-label">2</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps3" name="nps" value="3"> <label for="nps3" class="radio-label">3</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps4" name="nps" value="4"> <label for="nps4" class="radio-label">4</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps5" name="nps" value="5"> <label for="nps5" class="radio-label">5</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps6" name="nps" value="6"> <label for="nps6" class="radio-label">6</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps7" name="nps" value="7"> <label for="nps7" class="radio-label">7</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps8" name="nps" value="8"> <label for="nps8" class="radio-label">8</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps9" name="nps" value="9"> <label for="nps9" class="radio-label">9</label> </div> <div class="radio-option" style="flex: 0 0 18%;"> <input type="radio" id="nps10" name="nps" value="10"> <label for="nps10" class="radio-label">10</label> </div> </div> </div> <div class="form-group"> <label for="reason">Why did you choose this score?</label> <textarea id="reason" name="reason" placeholder="Help us understand your rating..."></textarea> </div> <button type="submit">Submit Survey</button> </form>
Detailed product review with name and ratings:
<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST"> <div class="form-group"> <label for="productName">Product Name <span class="required">*</span></label> <input type="text" id="productName" name="productName" placeholder="What product are you reviewing?" required> </div> <div class="form-group"> <label for="reviewerName">Your Name <span class="required">*</span></label> <input type="text" id="reviewerName" name="reviewerName" required> </div> <div class="form-group"> <label for="email">Email <span class="required">*</span></label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label>Overall Rating <span class="required">*</span></label> <div class="star-container"> <label class="star-label" for="star5">★</label> <input type="radio" id="star5" name="rating" value="5" required> <label class="star-label" for="star4">★</label> <input type="radio" id="star4" name="rating" value="4"> <label class="star-label" for="star3">★</label> <input type="radio" id="star3" name="rating" value="3"> <label class="star-label" for="star2">★</label> <input type="radio" id="star2" name="rating" value="2"> <label class="star-label" for="star1">★</label> <input type="radio" id="star1" name="rating" value="1"> </div> </div> <div class="form-group"> <label for="review">Write Your Review <span class="required">*</span></label> <textarea id="review" name="review" required placeholder="Share your honest review, pros, cons, and overall thoughts..."></textarea> </div> <button type="submit">Submit Review</button> </form>
Change the Star Color
The stars use color: #ffc107; when selected. Change this hex code to match your brand colors. Update both the .star-label:hover and input[type="radio"]:checked states.
Modify Categories Edit the feedback category dropdown to match your business. Replace the options with relevant categories for your specific product or service.
Add or Remove Rating Questions The star rating and recommendation fields are independent. You can remove either one, or duplicate the star rating section for multiple rating questions.
Make All Fields Optional
Remove the required attribute from any field you want to make optional. Remove the <span class="required">*</span> from the label.
Change Text and Styling
Update button colors, gradients, and fonts by editing the CSS. The background gradient is defined in the body style—change #667eea and #764ba2 to your brand colors.
Is this feedback form template free? Yes, completely. The HTML template is free to use and modify. FormBackend, which captures submissions, offers a free tier with up to 50 submissions per month. Paid plans support higher submission volumes.
Can I make the form anonymous? Yes. The name and email fields are marked as optional, so users can submit feedback without providing identifying information. To make it fully anonymous, you can remove the name and email fields entirely.
How do I analyze feedback responses? FormBackend sends each submission to your email, and you can also log into your FormBackend dashboard to view all responses. From there, you can export feedback to a spreadsheet (CSV) for analysis, filtering, and categorization.
Can I embed this in an email newsletter? Not directly—forms don’t work inside email bodies for security reasons. However, you can include a link in your email that points to a page containing this form, or use an email service like ConvertKit or Substack that has built-in feedback collection.
Customize this template with your brand colors and feedback categories, then add it to your website, app, or email campaigns. See our contact form generator for tools to create forms visually, or check our guides for tips on collecting and analyzing customer feedback effectively.
Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:
Need a custom form? Use our HTML form generator to build one visually.
Get a free HTML feedback form template to collect customer feedback, reviews, and suggestions. Copy-paste ready with rating fields and modern styling.
