# Survey form template A free survey form with dropdown, multiple choice, number and comment questions. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This survey form uses every common question type in one place: an optional name and email, a number, a dropdown, a multiple choice question and an open comment box. Swap the questions for your own and keep the structure. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/survey-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Name | `name` | Short text | No | | Email | `email` | Email | No | | Age | `age` | Number | No | | Which best describes you? | `role` | Dropdown (Student, Full-time job, Part-time job, Freelancer, Prefer not to say) | Yes | | Would you recommend us to a friend? | `recommend` | Multiple choice (Definitely, Maybe, Not sure) | Yes | | What should we improve? | `improve` | Long text | 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 ``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html ``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function SurveyForm() { 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 taking the survey!

return ( ) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function SurveyForm() { 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 taking the survey!

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

Thanks for taking the survey!

{:else} {/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" --- ``` ## When to use it - Customer and user research - Event and course feedback with more detail than a rating - Market research before a launch - Learning HTML forms with every common input type in one styled example ## Customize it ### Let people pick several answers Use checkboxes that share a name ending in `[]`, like `topics[]`. Nisuform saves the checked values as one comma-separated answer. ### Keep answers anonymous Remove the name and email fields and turn off IP address storage for the form. ### Read the results Export answers as CSV for a spreadsheet or pivot table. Forms built in the dashboard also get answer summaries in Analytics on Pro. ## Frequently asked questions ### How do I make a survey form in HTML? Wrap your questions in a form element. Use a select for dropdowns, radio buttons that share a name for multiple choice and a textarea for open questions. Then set the form action to a form backend like Nisuform, so answers are saved without a server. ### Can I see survey results as charts? On Pro, Analytics summarizes dropdown, multiple choice, checkbox, rating and number answers for forms built in the dashboard. On every plan, you can export the answers as CSV and chart them in a spreadsheet. ### How many questions can a survey have? Up to 50 fields per submission, with up to 10,000 characters per answer.

Quick survey