# Feedback form template A free feedback form with a 5-star rating, a comment box and an optional email. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This form starts with a five-star rating, asks one open question and makes the email field optional, so people can stay anonymous or ask for a reply. Only the rating is required. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/feedback-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Your rating | `rating` | Star rating | Yes | | What could we do better? | `comment` | Long text | No | | Email | `email` | Email | No | ## How to use it 1. Create a free form at https://app.nisuform.com and copy its form key. 2. Paste the code where the form should appear and replace `YOUR_FORM_KEY` with your key. 3. Submit the form once. The submission appears in your Nisuform inbox and you get an email. ## Styled HTML, CSS and JavaScript The form with its styles and a small script that sends it without a page reload and shows the success message. ```html

How did we do?

It takes ten seconds and helps us a lot.

Your rating

Optional. Leave it if you would like a reply.

``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html
Your rating
``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function FeedbackForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks for the feedback!

return (
Your rating
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function FeedbackForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks for the feedback!

return (
Your rating
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Vue ```vue ``` ### Svelte ```svelte {#if status === 'sent'}

Thanks for the feedback!

{:else}
Your rating
{#if status === 'error'}

Something went wrong. Please try again.

{/if}
{/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" ---
Your rating
``` ## When to use it - Product or website feedback after a purchase or signup - Rating a workshop, class or event - Customer satisfaction checks after a support conversation - A "Was this page helpful?" form on documentation ## Customize it ### Change the scale The stars are radio inputs named `rating` with values 1 to 5. Add or remove inputs for a different scale. They are styled with CSS only, so the rating works without JavaScript. ### See the average rating Forms created from the Feedback template in the dashboard know which field is the rating, so Analytics on Pro shows the average and how many people picked each star. ### Keep it anonymous Remove the email field and turn off IP address storage for the form. Submissions are then saved without anything that identifies the sender. ## Frequently asked questions ### How do I make a star rating in HTML? Use a group of radio inputs that share a name, one per star, each with a label. This template styles the labels as stars with CSS and keeps the inputs for keyboards and screen readers, so the rating works without JavaScript. ### Can feedback be anonymous? Yes. The email field is optional, and you can turn off IP address storage in the form settings. Submissions are then stored without personal data the visitor did not type in. ### Where do I read the feedback? Every submission is saved in your Nisuform inbox and emailed to you. You can search it, mark it read or unread, star it and export it as CSV.