Survey Templates
HTML Survey Form Templates
Collection of customizable survey form templates with modern designs. Find responsive feedback forms with complete code samples.
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-6">Customer Feedback Survey</h2>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">How satisfied are you with our service?</label>
<div class="mt-2 space-y-2">
<div class="flex items-center">
<input type="radio" name="satisfaction" value="5" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Very Satisfied</label>
</div>
<div class="flex items-center">
<input type="radio" name="satisfaction" value="4" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Satisfied</label>
</div>
<div class="flex items-center">
<input type="radio" name="satisfaction" value="3" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Neutral</label>
</div>
<div class="flex items-center">
<input type="radio" name="satisfaction" value="2" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Dissatisfied</label>
</div>
<div class="flex items-center">
<input type="radio" name="satisfaction" value="1" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Very Dissatisfied</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">What aspects of our service did you like?</label>
<div class="mt-2 space-y-2">
<div class="flex items-center">
<input type="checkbox" name="liked_aspects[]" value="quality" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Product Quality</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="liked_aspects[]" value="customer_service" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Customer Service</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="liked_aspects[]" value="price" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Price</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="liked_aspects[]" value="delivery" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Delivery Speed</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Any additional comments or suggestions?</label>
<textarea name="comments" rows="4" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500"></textarea>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
Submit Feedback
</button>
</div>
</div>
</form>Colors
Typography
<form action="https://formsubmit.co/[email protected]" method="POST" class="max-w-2xl mx-auto p-8 bg-white rounded-xl shadow-lg">
<div class="flex justify-center mb-8">
<div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
</div>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Product Name</label>
<select name="product" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Select a product</option>
<option value="product1">Product 1</option>
<option value="product2">Product 2</option>
<option value="product3">Product 3</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Rate the product quality</label>
<div class="mt-2 flex items-center space-x-2">
<input type="range" name="quality_rating" min="1" max="5" class="w-full h-2 bg-amber-200 rounded-lg appearance-none cursor-pointer">
<span class="text-sm text-gray-600">1-5</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Would you recommend this product?</label>
<div class="mt-2 flex items-center space-x-4">
<div class="flex items-center">
<input type="radio" name="recommend" value="yes" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Yes</label>
</div>
<div class="flex items-center">
<input type="radio" name="recommend" value="maybe" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Maybe</label>
</div>
<div class="flex items-center">
<input type="radio" name="recommend" value="no" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">No</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">What features do you use most?</label>
<div class="mt-2 grid grid-cols-2 gap-2">
<div class="flex items-center">
<input type="checkbox" name="features[]" value="feature1" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Feature 1</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="features[]" value="feature2" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Feature 2</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="features[]" value="feature3" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Feature 3</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="features[]" value="feature4" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Feature 4</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Detailed Feedback</label>
<textarea name="feedback" rows="4" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500"></textarea>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
Submit Product Feedback
</button>
</div>
</div>
</form>Colors
Typography
<div class="max-w-2xl mx-auto p-8 bg-white rounded-xl shadow-lg">
<form action="https://formsubmit.co/[email protected]" method="POST" class="space-y-8">
<!-- Progress Bar -->
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div class="text-right">
<span class="text-xs font-semibold inline-block text-amber-600">
Page <span class="page-number">1</span> of 3
</span>
</div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-100">
<div class="progress shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-600" style="width: 33%"></div>
</div>
</div>
<!-- Page 1: Basic Information -->
<div class="page page-1">
<h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Age Group</label>
<select name="age_group" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Select age group</option>
<option value="18-24">18-24</option>
<option value="25-34">25-34</option>
<option value="35-44">35-44</option>
<option value="45+">45+</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">How did you hear about us?</label>
<select name="source" required class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500">
<option value="">Select source</option>
<option value="social">Social Media</option>
<option value="search">Search Engine</option>
<option value="friend">Friend/Family</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<!-- Page 2: Usage Patterns -->
<div class="page page-2 hidden">
<h3 class="text-lg font-medium text-gray-900 mb-4">Usage Patterns</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">How often do you use our service?</label>
<div class="mt-2 space-y-2">
<div class="flex items-center">
<input type="radio" name="usage_frequency" value="daily" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Daily</label>
</div>
<div class="flex items-center">
<input type="radio" name="usage_frequency" value="weekly" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Weekly</label>
</div>
<div class="flex items-center">
<input type="radio" name="usage_frequency" value="monthly" class="h-4 w-4 text-amber-600 border-gray-300 focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Monthly</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">What time of day do you typically use our service?</label>
<div class="mt-2 space-y-2">
<div class="flex items-center">
<input type="checkbox" name="usage_time[]" value="morning" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Morning</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="usage_time[]" value="afternoon" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Afternoon</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="usage_time[]" value="evening" class="h-4 w-4 text-amber-600 border-gray-300 rounded focus:ring-amber-500">
<label class="ml-3 text-sm text-gray-700">Evening</label>
</div>
</div>
</div>
</div>
</div>
<!-- Page 3: Feedback -->
<div class="page page-3 hidden">
<h3 class="text-lg font-medium text-gray-900 mb-4">Your Feedback</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">How likely are you to recommend us?</label>
<input type="range" name="recommendation_score" min="0" max="10" class="mt-2 w-full h-2 bg-amber-200 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-600 mt-1">
<span>Not likely</span>
<span>Very likely</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">What could we improve?</label>
<textarea name="improvements" rows="4" class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500"></textarea>
</div>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex justify-between space-x-4">
<button type="button" class="prev-page hidden px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
Previous
</button>
<button type="button" class="next-page flex-1 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
Next
</button>
<button type="submit" class="submit-survey hidden flex-1 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500">
Submit Survey
</button>
</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
const pages = form.querySelectorAll('.page');
const progress = form.querySelector('.progress');
const pageNumber = form.querySelector('.page-number');
const prevButton = form.querySelector('.prev-page');
const nextButton = form.querySelector('.next-page');
const submitButton = form.querySelector('.submit-survey');
let currentPage = 1;
function updatePage(page) {
pages.forEach(p => p.classList.add('hidden'));
form.querySelector('.page-' + page).classList.remove('hidden');
pageNumber.textContent = page;
progress.style.width = ((page - 1) / (pages.length - 1) * 100) + '%';
prevButton.classList.toggle('hidden', page === 1);
nextButton.classList.toggle('hidden', page === pages.length);
submitButton.classList.toggle('hidden', page !== pages.length);
}
nextButton.addEventListener('click', () => {
if (currentPage < pages.length) {
currentPage++;
updatePage(currentPage);
}
});
prevButton.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
updatePage(currentPage);
}
});
form.addEventListener('submit', (e) => {
e.preventDefault();
// Here you would typically validate and submit the form
alert('Survey submitted successfully!');
});
});
</script>Colors
Typography
Ready to use survey templates?
Get started with FormSubmit - no backend required!