Feedback form template

Free customer feedback form
template, HTML and React.

An online feedback form customers can finish in under a minute: a rating, what went well, what could be better, and a checkbox for whether you may follow up. Use it as is, or open the designer to change the questions.

Use this template Preview the template

250 submissions/month free. No credit card required.

Preview, restyle and copy the code.

Preview only. Nothing is sent from this page.

Your feedback form, ready to make your own.

The code includes the fields, the CSS for the style you chose and a hidden anti-spam field. Replace the placeholder endpoint with your own before publishing, or open it in the designer to change fields, colors and wording without touching code.

Customize in Form Koi

feedback-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #f6f7fb; color: #2b2d42; font: 16px/1.5 system-ui, sans-serif; border: 1px solid #2b2d4230; border-radius: 14px; }
.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.formkoi-form > p { margin: 0 0 18px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.formkoi-field--half { grid-column: span 1; }
.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 14px; background: #2b2d4212; color: #2b2d42; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #2b2d4280; }
.formkoi-fields input[type=file] { padding: 10px; }
.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.formkoi-choices legend { padding: 0; margin-bottom: 6px; }
.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.formkoi-choices label + label { margin-top: 8px; }
.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #4f46e5; }
.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }
.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 10px; padding: 12px 22px; border: 0; border-radius: 14px; background: #4f46e5; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.formkoi-fields button:hover { filter: brightness(.94); }
.formkoi-fields :focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="How did we do?">
<h2>How did we do?</h2>
<p>Your feedback shapes what we build next.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <fieldset class="formkoi-field formkoi-choices">
    <legend>Overall rating</legend>
    <label><input type="radio" name="rating" value="5 – Excellent" required> 5 – Excellent</label>
    <label><input type="radio" name="rating" value="4 – Good" required> 4 – Good</label>
    <label><input type="radio" name="rating" value="3 – Okay" required> 3 – Okay</label>
    <label><input type="radio" name="rating" value="2 – Poor" required> 2 – Poor</label>
    <label><input type="radio" name="rating" value="1 – Bad" required> 1 – Bad</label>
  </fieldset>
  <div class="formkoi-field">
  <label for="went_well">What went well?</label>
  <textarea id="went_well" name="went_well" required></textarea>
  </div>
  <div class="formkoi-field">
  <label for="message">What could be better?</label>
  <textarea id="message" name="message"></textarea>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name">
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email">
  </div>
  <div class="formkoi-field">
  <label class="formkoi-check"><input type="checkbox" id="follow_up" name="follow_up" value="yes"> You may contact me about this feedback</label>
  </div>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

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

New to connecting a form? The HTML contact form guide and the React contact form guide walk through pointing any of these templates at your endpoint.

Fields in this customer feedback form.

Name and email are optional, so people can be candid without identifying themselves. The follow-up checkbox lets people say whether they want a reply. Check that preference and the supplied address before following up.

Label	Field name	Type	Required
Overall rating	`rating`	Multiple choice: 5 – Excellent, 4 – Good, 3 – Okay, 2 – Poor, 1 – Bad	Yes
What went well?	`went_well`	Long text	Yes
What could be better?	`message`	Long text	No
Your name	`name`	Short text	No
Email address	`email`	Email	No
You may contact me about this feedback	`follow_up`	Single checkbox	No

Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.

Make it yours in minutes.

Change fields without code

Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.

Explore

Match your website

Pick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.

Connect one endpoint

Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.

Explore

Related templates.

Frequently asked questions

Feedback form
questions.

Can feedback stay anonymous?

Yes. Name and email are optional in this template. Remove them entirely if you prefer.

Can I filter by rating?

Ratings arrive as text values. Route low ratings to a manager with a routing rule, or read them through the management API.

Can I embed it in my app?

Yes. Use the React version for a component with loading and error states, or the HTML version anywhere else.

Can I create my own feedback form from this one?

Yes. Open it in the designer to change the rating scale, add a product or location dropdown, or turn a question into multiple choice. Every named field arrives with the response.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free customer feedback formtemplate, HTML and React.