Here’s a simple user feedback collector implemented in HTML and JavaScript. It collects user feedback via a form, validates input, and displays a thank-you message after submission. You can easily customize or expand it for backend integration if needed.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>User Feedback Collector</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 2em auto;
padding: 1em;
background: #f9f9f9;
}
h2 {
text-align: center;
}
form {
background: white;
padding: 1.5em;
border-radius: 8px;
box-shadow: 0 0 8px #ccc;
}
label {
display: block;
margin-top: 1em;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 0.6em;
margin-top: 0.4em;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
resize: vertical;
}
button {
margin-top: 1.5em;
background-color: #007bff;
color: white;
border: none;
padding: 0.8em 1.5em;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
}
button:hover {
background-color: #0056b3;
}
.thank-you {
text-align: center;
font-size: 1.2em;
color: green;
margin-top: 1.5em;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h2>We Value Your Feedback</h2>
<form id="feedbackForm" novalidate>
<label for="name">Name <span class="error" id="nameError"></span></label>
<input type="text" id="name" name="name" placeholder="Your name" required />
<label for="email">Email <span class="error" id="emailError"></span></label>
<input type="email" id="email" name="email" placeholder="Your email" required />
<label for="rating">How would you rate your experience? <span class="error" id="ratingError"></span></label>
<select id="rating" name="rating" required>
<option value="">--Select rating--</option>
<option value="5">Excellent (5)</option>
<option value="4">Good (4)</option>
<option value="3">Average (3)</option>
<option value="2">Poor (2)</option>
<option value="1">Very Poor (1)</option>
</select>
<label for="comments">Comments or Suggestions</label>
<textarea id="comments" name="comments" rows="5" placeholder="Write your feedback here..."></textarea>
<button type="submit">Submit Feedback</button>
</form>
<div class="thank-you" id="thankYouMessage" style="display:none;">
Thank you for your feedback!
</div>
<script>
const form = document.getElementById('feedbackForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const ratingInput = document.getElementById('rating');
const thankYouMessage = document.getElementById('thankYouMessage');
const nameError = document.getElementById('nameError');
const emailError = document.getElementById('emailError');
const ratingError = document.getElementById('ratingError');
form.addEventListener('submit', function (e) {
e.preventDefault();
let isValid = true;
// Clear previous errors
nameError.textContent = '';
emailError.textContent = '';
ratingError.textContent = '';
// Validate name
if (nameInput.value.trim() === '') {
nameError.textContent = 'Please enter your name';
isValid = false;
}
// Validate email
if (emailInput.value.trim() === '') {
emailError.textContent = 'Please enter your email';
isValid = false;
} else if (!validateEmail(emailInput.value.trim())) {
emailError.textContent = 'Invalid email format';
isValid = false;
}
// Validate rating
if (ratingInput.value === '') {
ratingError.textContent = 'Please select a rating';
isValid = false;
}
if (!isValid) return;
// If valid, show thank you message and reset form
form.style.display = 'none';
thankYouMessage.style.display = 'block';
// Optionally, here you could send data to your server via fetch/ajax
form.reset();
});
function validateEmail(email) {
// Basic email pattern
const pattern = /^[^s@]+@[^s@]+.[^s@]+$/;
return pattern.test(email);
}
</script>
</body>
</html>
This feedback collector includes:
-
Name, email, rating (dropdown), and optional comments
-
Client-side validation with error messages
-
Thank-you message after submission
-
Simple and clean UI
If you want me to add server-side integration or save feedback to a file or database, just let me know.
Leave a Reply