Feedback form HTML template

A short feedback form for hearing from customers after a purchase, a support case or a visit. The rating dropdown gives you something you can count; the comment box gives you the words behind the number.

The form

The HTML

<style>
  .hf-form { display: grid; gap: 0.75rem; max-width: 28rem; font-family: system-ui, sans-serif; }
  .hf-form label { font-weight: 600; font-size: 0.9rem; }
  .hf-form input, .hf-form textarea, .hf-form select {
    width: 100%; padding: 0.5rem 0.6rem; font: inherit;
    border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
  }
  .hf-form button {
    justify-self: start; padding: 0.55rem 1.4rem; font: inherit; font-weight: 600;
    background: #0b6e4f; color: #fff; border: none; border-radius: 6px; cursor: pointer;
  }
  .hf-hp { position: absolute; left: -9999px; }
</style>

<form class="hf-form" action="https://example.com/your-endpoint" method="POST">
  <label for="how-satisfied-were-you">How satisfied were you?</label>
  <select id="how-satisfied-were-you" name="how-satisfied-were-you" required>
    <option>Very satisfied</option>
    <option>Satisfied</option>
    <option>Neutral</option>
    <option>Dissatisfied</option>
    <option>Very dissatisfied</option>
  </select>
  <label for="what-went-well-or-what-should-we-improve">What went well — or what should we improve?</label>
  <textarea id="what-went-well-or-what-should-we-improve" name="what-went-well-or-what-should-we-improve" rows="5" required></textarea>
  <label for="email-if-you-d-like-a-reply">Email (if you’d like a reply)</label>
  <input type="email" id="email-if-you-d-like-a-reply" name="email-if-you-d-like-a-reply">
  <!-- honeypot: humans never see this; bots fill it in. Drop submissions where it has a value. -->
  <input class="hf-hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Send feedback</button>
</form>

Fields in this template

• How satisfied were you? — dropdown (Very satisfied, Satisfied, Neutral, Dissatisfied, Very dissatisfied), required
• What went well — or what should we improve? — multi-line text, required
• Email (if you’d like a reply) — email, optional

Tips for a feedback form that works

• Make the email field optional — anonymous feedback is more honest, and requiring contact details suppresses criticism.
• Ask one open question, not five. Completion drops fast with each added textarea.
• Close the loop: when feedback leads to a change, say so publicly. It’s the strongest signal that filling in the form matters.

Questions

Should feedback be anonymous?

Give people the choice: keep the email field optional. You’ll get more candid answers, and those who want a reply can still leave an address.

Why a dropdown instead of star ratings?

A labeled dropdown is unambiguous, accessible and needs no JavaScript. If you later want clickable stars, they can post the same field name to the same endpoint.

From the same maker

Need more than a form?

Tentmaker Stores gives you a complete online store — product pages, checkout and everything in between. Built for small makers and niche sellers.