Templates/Feedback form

Website feedback form template

Collect quick product feedback with selectable trait chips and an optional comment. Dark violet accents, Inter, and Tailwind markup you can paste into any stack.

Care to share more?

How was your overall experience? What is one thing you will not forget?

Copy the code

Same Tailwind fields as the preview. Paste into your stack, then connect your own submit handler or form backend.

          <div class="mx-auto w-full max-w-lg font-sans text-sm text-zinc-900">
  <form method="post" action="#" class="flex flex-col font-sans">
    <h2 class="font-sans text-xl font-bold tracking-tight text-zinc-900">Care to share more?</h2>
    <p class="mt-2 mb-5 font-sans text-sm leading-6 text-zinc-500">How was your overall experience? What is one thing you will not forget?</p>
    <div class="flex flex-wrap gap-2 font-sans">
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Easy to use" class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Easy to use</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Fast setup" class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Fast setup</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Reliable" checked class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Reliable</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Clear docs" checked class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Clear docs</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Great support" class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Great support</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Fair pricing" class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Fair pricing</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Polished UI" class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Polished UI</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Helpful" checked class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Helpful</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Would recommend" checked class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Would recommend</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Trustworthy" checked class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Trustworthy</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Flexible" class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Flexible</span>
      </label>
      <label class="inline-flex cursor-pointer select-none font-sans">
        <input type="checkbox" name="traits" value="Well designed" class="peer sr-only" />
        <span class="rounded-lg bg-zinc-100 px-3 py-2 font-sans text-sm text-zinc-900 transition hover:bg-zinc-200 peer-checked:bg-[#7c3aed] peer-checked:text-white peer-checked:hover:bg-[#6d28d9]">Well designed</span>
      </label>
    </div>
    <hr class="my-6 border-0 border-t border-dashed border-zinc-300" />
    <textarea name="message" rows="4" placeholder="Come on, you know the drill." class="mt-4 block min-h-28 w-full resize-y rounded-xl border border-zinc-300 bg-white px-3.5 py-3 font-sans text-sm text-zinc-900 placeholder:text-zinc-400 hover:border-zinc-400 focus:border-[#7c3aed] focus:outline-none focus:ring-[3px] focus:ring-[#c4b5fd]/50 focus-visible:!outline-none"></textarea>
    <hr class="my-6 border-0 border-t border-dashed border-zinc-300" />
    <button type="submit" class="mt-6 inline-flex w-full items-center justify-center rounded-xl bg-[#5b21b6] px-4 py-3.5 font-sans text-sm font-normal uppercase tracking-wide text-white transition hover:bg-[#4c1d95] focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-[#7c3aed] active:scale-[0.99]">Publish review</button>
  </form>
</div>

When to use this feedback form template

Post-purchase pages, beta dashboards, docs footers, and “was this helpful?” prompts. Trait chips plus an optional comment beat a long survey when you want signal quickly.

How FormsReach fits

Treat feedback like any other form lead: spam filtering, dashboard history, email delivery on Free, WhatsApp on Pro and Agency when you want mobile alerts.

Next steps

FAQ

Quick answers about fields, styling, and wiring this template to your own backend.

Can I change the trait chips?+

Yes. Edit the checkbox labels and values in the snippet. Keep name="traits" so selected values group together on submit.

Do users have to leave a comment?+

No. The message field is optional. Chips alone are enough when you want a fast signal.

Do feedback submissions cost credits?+

Yes. Each accepted submission uses credits from your monthly pool, plus email or WhatsApp delivery costs when those channels fire.

Ready to receive form leads?

Create a free API key. Upgrade when you need more monthly credits.

Get started →All templates