0
HomeSnippetsFeedback form HTML template
HTML snippet · Free · Copy-paste

Feedback form HTML template

Standard product-feedback form: rating, category, comments. Copy either version below.

The code

<form class="lf-form" action="/api/feedback" method="POST">
  <div class="field">
    <label for="f-rating">Overall rating (1–5) *</label>
    <input id="f-rating" name="rating" type="number" placeholder="5" min="1" max="5" required />
  </div>
  <div class="field">
    <label for="f-category">Category *</label>
    <select id="f-category" name="category" required>
      <option value="" disabled selected>Choose…</option>
      <option value="Bug report">Bug report</option>
      <option value="Feature request">Feature request</option>
      <option value="General feedback">General feedback</option>
      <option value="Praise">Praise</option>
    </select>
  </div>
  <div class="field">
    <label for="f-comments">What's on your mind? *</label>
    <textarea id="f-comments" name="comments" rows="5" placeholder="Tell us what you think…" required></textarea>
  </div>
  <div class="field">
    <label for="f-email">Your email (optional, for a reply)</label>
    <input id="f-email" name="email" type="email" placeholder="you@example.com" autocomplete="email" />
  </div>

  <button type="submit">Send feedback</button>
</form>

<style>
.lf-form { max-width: 480px; margin: 0 auto; font-family: system-ui, sans-serif; }
.lf-form .field { margin-bottom: 1rem; }
.lf-form label, .lf-form legend { display: block; font-weight: 500; margin-bottom: 0.35rem; font-size: 0.9rem; }
.lf-form input, .lf-form select, .lf-form textarea {
  width: 100%; padding: 0.65rem 0.75rem; font-size: 1rem;
  border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff;
  font-family: inherit;
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus {
  outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb;
}
.lf-form .checkbox, .lf-form .radio { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.lf-form .checkbox input, .lf-form .radio input { width: auto; }
.lf-form button {
  width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600;
  color: #fff; background: #2563eb; border: 0; border-radius: 0.5rem; cursor: pointer;
}
.lf-form button:hover { background: #1d4ed8; }
</style>

Live preview

Rendered in a sandboxed iframe — exactly what you'll get when you paste the snippet.

Frequently asked questions

How do I show stars instead of a number?

Use 5 radio inputs styled with a star font/SVG and the classic CSS sibling trick (label:hover ~ label). LemForms has a native star-rating field that ships styled.

Skip the HTML — build this in 30 seconds

LemForms gives you the same form with a real backend: submissions dashboard, email notifications, conditional logic, file uploads, webhooks, and Stripe payments. No code.

Try LemForms free

Related snippets

  • Signup form HTML template
    Free signup form HTML template — plain HTML/CSS and Tailwind versions, accessible labels, working validation. Copy, paste, ship.
  • Login form HTML template
    Free login form HTML template with accessible labels, remember-me checkbox, and forgot-password link. Plain HTML and Tailwind variants.
  • Contact form HTML template
    Accessible contact form HTML template you can copy in under a minute. Plain HTML/CSS and Tailwind versions, with name, email, subject, and message fields.
  • Subscription form HTML template
    Email subscription form HTML template with plan selector, GDPR consent checkbox, and accessible labels. Copy-paste ready.
  • Booking form HTML template
    Free booking form HTML template with native date + time pickers, party size, and notes field. Plain HTML and Tailwind variants.
  • Survey form HTML template
    Free survey form HTML template with rating scale, multiple-choice, and open-ended fields. Accessible, mobile-friendly, copy-paste ready.