Testimonial form template

Free testimonial form
template, HTML and React.

Turn a happy customer into a quote for your website. The form asks for their words, a rating and their company and role, and records explicit permission to publish alongside the testimonial.

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 testimonial 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

testimonial-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #fffaf0; color: #483c32; font: 16px/1.5 Georgia, serif; border: 1px solid #483c3230; border-radius: 2px; }
.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 24px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.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: 0; border-bottom: 1px solid #483c3280; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; color: #483c32; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #483c3280; }
.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: #92452e; }
.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: 16px; padding: 12px 22px; border: 0; border-radius: 2px; background: #92452e; 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 #92452e; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Share your experience.">
<h2>Share your experience.</h2>
<p>A few sentences help others decide. Thank you!</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <div class="formkoi-field">
  <label for="company">Company and role</label>
  <input id="company" name="company">
  </div>
  <fieldset class="formkoi-field formkoi-choices">
    <legend>Rating</legend>
    <label><input type="radio" name="rating" value="5 stars" required> 5 stars</label>
    <label><input type="radio" name="rating" value="4 stars" required> 4 stars</label>
    <label><input type="radio" name="rating" value="3 stars" required> 3 stars</label>
  </fieldset>
  <div class="formkoi-field">
  <label for="message">Your testimonial</label>
  <textarea id="message" name="message" placeholder="What problem did we solve, and what changed?" required></textarea>
  </div>
  <div class="formkoi-field">
  <label class="formkoi-check"><input type="checkbox" id="permission" name="permission" value="granted" required> You may publish this testimonial with my name</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 testimonial</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 testimonial form.

The browser requires the permission checkbox before submission. Review the recorded permission before publishing; a required field is not server-side consent verification. Company and role are optional context, and the prompt asks what problem you solved and what changed.

Label	Field name	Type	Required
Your name	`name`	Short text	Yes
Email address	`email`	Email	Yes
Company and role	`company`	Short text	No
Rating	`rating`	Multiple choice: 5 stars, 4 stars, 3 stars	Yes
Your testimonial	`message`	Long text	Yes
You may publish this testimonial with my name	`permission`	Single checkbox	Yes

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

Testimonial form
questions.

Can I publish testimonials automatically?

Read them with the management API or receive them by webhook, then publish through your own site build. Review before publishing.

Can I add a photo upload?

Yes. Add a file upload field once uploads are enabled for the form.

Is the permission checkbox required?

In this template, yes. Change it to optional if you would rather ask separately. The value granted arrives with the testimonial, so you can filter on it later.

How do I ask customers to fill it in?

Publish the form on a page of your site and link to it from a thank-you email or a follow-up after a project. Form Koi receives the submissions; the page itself lives on your website.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free testimonial formtemplate, HTML and React.