How do I create tickets in my help desk?

Post the values from a server action to your tool's API: Zendesk, Freshdesk, Help Scout, Linear or a GitHub issue.

How large can attachments be?

The template allows up to 10 MB. Change MAX_MB to match what your storage accepts.

Why ask for priority?

It lets your team sort the queue. You can hide it and set the priority in your backend from the category instead.

Support Ticket Form

A free support ticket form template for React and Tailwind CSS: email, subject, category, priority, description and an optional screenshot upload, with Zod validation and a ticket number on success.

ReactTailwind CSSReact Hook FormZodFree

support-ticket-form.tsx

Installation

Install the form libraries, then copy the code above into your project.

npm i react-hook-form zod @hookform/resolvers

About the Support Ticket Form

A help desk form that collects what support teams need: email, subject, category, a priority switch, a description with a hint about steps to reproduce, and an optional screenshot or log file, ending with a ticket number.

When to use it

Use it on a help center, inside an app's settings, or as the contact form for a support team.

How to use the Support Ticket Form

1Install the dependencies: npm i react-hook-form zod @hookform/resolvers.
2Copy the code into components/support-ticket-form.tsx (or anywhere in your project).
3Render <SupportTicketForm /> on any page.
4Replace the placeholder in onSubmit with your server action or API call.

Send submissions by email

In Next.js, a server action can email every submission with Resend. Call it from onSubmit: await submitForm(values).

// app/actions.ts
"use server";

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function submitForm(values: Record<string, unknown>) {
  await resend.emails.send({
    from: "Website <hello@yourdomain.com>",
    to: "you@yourdomain.com",
    subject: "New form submission",
    text: JSON.stringify(values, null, 2),
  });
}

More form templates

All forms →

Multi-step Signup Form

A four-step signup wizard with a stepper, per-step validation and a review screen.

Contact Form

Name, email, topic and message with validation, consent and a success state.

Waitlist Form

Email signup with an optional role and a referral link on success.

Email and password sign in with show password, remember me and social buttons.

Job Application Form

Role, experience, resume upload and cover letter with file validation.

Appointment Booking Form

Service cards, date and time slots, contact details and a confirmation.

Feedback & NPS Form

A 0–10 recommend score, reason, improvement topics and optional email.

Newsletter Signup Form

Email signup with topic checkboxes, frequency and double opt-in message.

Event Registration Form

Ticket types with prices, quantity, dietary needs and terms.