Free tool

Feedback form generator

Collect ratings and comments from your users with a feedback form that works anywhere. Configure the rating scale, style it, and copy the code.

Template

Fields

Leave as-is to keep the placeholder, or create a free form to get a real endpoint.

On submit
Styling

Adds Tailwind utility classes. Your project needs Tailwind installed.

contact-form.html
<form class="flex w-full max-w-md flex-col gap-4" action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Name</span>
    <input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="text" name="name" placeholder="Optional" />
  </label>
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Email</span>
    <input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="email" name="email" placeholder="Optional" />
  </label>
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Rating <span class="text-red-500">*</span></span>
    <select class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" name="rating" required>
      <option value="" disabled selected>Choose…</option>
      <option value="5: Excellent">5: Excellent</option>
      <option value="4: Good">4: Good</option>
      <option value="3: Okay">3: Okay</option>
      <option value="2: Poor">2: Poor</option>
      <option value="1: Bad">1: Bad</option>
    </select>
  </label>
  <label class="flex flex-col gap-1.5">
    <span class="text-sm font-medium text-neutral-200">Comments <span class="text-red-500">*</span></span>
    <textarea class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30 min-h-[120px]" name="message" placeholder="What could we do better?" required></textarea>
  </label>
  <input type="hidden" name="_subject" value="New feedback" />
  <!-- Anti-spam honeypot, leave this empty -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px" />
  <button class="rounded-lg cursor-pointer bg-[#ffffff] px-4 py-2.5 text-sm font-semibold text-black transition-opacity hover:opacity-90" type="submit">Send feedback</button>
</form>

Live preview

How it works

  1. Choose a template and fields. Pick a template, then add, remove, or reorder fields and mark the required ones.
  2. Style it. Pick CSS, Tailwind, or unstyled output and tune the theme: accent color, light or dark, rounded corners.
  3. Copy your framework's code. Switch to HTML, React, Vue, Svelte, Astro, or a fetch() version and copy, download, or open it in CodePen.
  4. Connect an endpoint. Create a free ShipMyForm form to get a real endpoint, then drop your form ID in so submissions actually arrive.

Want the background? Read what a form backend is and how to stop form spam without reCAPTCHA.

Frequently asked questions

Is this feedback form generator free?
Yes. Generating and copying the code is completely free and needs no signup. You only create a free ShipMyForm account when you want the form to actually receive submissions.
Does the feedback form need a backend?
No. The form posts to a hosted endpoint, so it works on any static site. Submissions are stored, spam-filtered, and emailed to you without a server.
Can I use it with React, Vue, Svelte or Astro?
Yes. Switch the output tab to your framework: the generator produces ready-to-paste code for HTML, React, Vue, Svelte, Astro, and a fetch() version, all pointing at the same endpoint.
How does spam protection work?
The generator adds an invisible honeypot field that bots fill but humans never see. Combined with server-side rate limiting it stops most spam without a CAPTCHA, and you can add a Cloudflare Turnstile key too.