Copy a feedback form template with a rating and a comment box
This feedback form asks for a rating from 1 to 5, an optional comment and an optional email, using native radio buttons in an accessible fieldset. Each response is stored by FormThunder and emailed to you, and you can export the results to CSV from the dashboard. It works on the free plan, in any site that outputs HTML.
Updated
Preview
This preview is switched off, so nothing here sends.
Copy the code
Replace YOUR_ACCESS_KEY with your own key. The classes use Tailwind's stock colours, so they work in any Tailwind project.
<form action="https://formthunder.com/submit" method="POST" class="mx-auto max-w-md space-y-4">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="hidden" name="subject" value="New feedback">
<input type="checkbox" name="botcheck" class="hidden" tabindex="-1" autocomplete="off">
<fieldset>
<legend class="block text-sm font-medium text-slate-900">How was your experience?</legend>
<div class="mt-2 flex gap-4">
<label class="flex items-center gap-1.5 text-sm text-slate-700"><input type="radio" name="rating" value="1" required> 1</label>
<label class="flex items-center gap-1.5 text-sm text-slate-700"><input type="radio" name="rating" value="2"> 2</label>
<label class="flex items-center gap-1.5 text-sm text-slate-700"><input type="radio" name="rating" value="3"> 3</label>
<label class="flex items-center gap-1.5 text-sm text-slate-700"><input type="radio" name="rating" value="4"> 4</label>
<label class="flex items-center gap-1.5 text-sm text-slate-700"><input type="radio" name="rating" value="5"> 5</label>
</div>
</fieldset>
<div>
<label for="comment" class="block text-sm font-medium text-slate-900">What could be better?</label>
<textarea id="comment" name="comment" rows="4" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none"></textarea>
</div>
<div>
<label for="fb-email" class="block text-sm font-medium text-slate-900">Email, if you'd like a reply</label>
<input id="fb-email" name="email" type="email" autocomplete="email" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
</div>
<button type="submit" class="w-full rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-700">Send feedback</button>
</form>The fields that matter
- rating
Radios sharing one name send one value.
requiredon the first radio makes the whole group required.- page
Add this as a hidden field holding the page URL, so you know what the feedback is about. The referrer is stored with the submission as well.
Adapting it
- Keep the email optional. Forcing it cuts honest feedback, and people who want a reply will give it.
- A short subject template such as
Feedback: {{rating}} out of 5makes your inbox easy to scan.
Questions
Can I see the average rating?
Not in the dashboard. Export to CSV or send responses to Google Sheets on Pro, then calculate it there.
Can feedback be anonymous?
Leave out the email field and it's not asked for. FormThunder still stores a hash of the IP address for rate limiting and blocks.
Get a key and make this form send
This template works on the free plan, up to 250 submissions a month.