# Support ticket form template A free support and bug report form with topic, priority, page link and description. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This form asks for the topic, the priority, the page with the problem and a description. It works as a help desk contact form or as a bug report form for an app. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/support-ticket-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | What do you need help with? | `topic` | Dropdown (Bug report, Billing, Account access, Feature request, Something else) | Yes | | How urgent is it? | `priority` | Multiple choice (Low, Normal, Urgent) | Yes | | Page with the problem | `page` | Website | No | | Describe the problem | `description` | Long text | Yes | ## 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 SupportForm() { 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! Your request is in and we’ll reply soon.

return ( ) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function SupportForm() { 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! Your request is in and we’ll reply soon.

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

Thanks! Your request is in and we’ll reply soon.

{:else} {/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" --- ``` ## When to use it - A help or support page for a SaaS product - Bug reports from beta testers - IT and internal help desk requests - Feature requests from customers ## Customize it ### Route urgent tickets On Pro, send every ticket to a Slack, Discord or Telegram channel, and use a webhook to open issues in your help desk or bug tracker. ### Fill in the page for them Nisuform already records the page each submission was sent from, so you can drop the page field and add the app version in a hidden field instead. ### Accept screenshots On Pro, add a file input so people can attach screenshots and PDFs, up to 5 files per ticket. ## Frequently asked questions ### Can I use this as a bug report form? Yes. Keep "Bug report" as a topic, or rename the fields to steps to reproduce, expected result and actual result. Every named field is saved. ### Can tickets go to Jira, Linear or GitHub Issues? On Pro, use a webhook, Zapier or Make to create an issue from each submission. Webhooks are signed, so your endpoint can check that they came from Nisuform. ### Can the person get an automatic reply? On Pro, turn on auto-replies to send a confirmation with their own answers, so they know the request arrived.

Contact support