# Registration form template A free registration form for events, workshops and classes, with ticket type, phone and a terms checkbox. Copy the HTML, CSS and JS, or use it in React or Vue. This form asks who is coming, how to reach them, which ticket they want and how they heard about you. The terms checkbox is required, and the phone number and source are optional. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/registration-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Full name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | Phone | `phone` | Phone | No | | Ticket | `ticket` | Dropdown (General admission, Student, Group of 5 or more) | Yes | | How did you hear about us? | `source` | Dropdown (Friend or colleague, Social media, Newsletter, Search engine, Other) | No | | I agree to the event terms and privacy policy | `terms` | Checkbox | 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 RegistrationForm() { 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

You’re registered! See you there.

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

You’re registered! See you there.

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

You’re registered! See you there.

{:else} {/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" --- ``` ## When to use it - Conference, meetup and webinar registration - Workshop, course and class signups - Sports clubs, camps and community programs - Volunteer signups ## Customize it ### Close registration when seats run out Set a maximum number of submissions, like 50, and the form closes itself when it is full. ### Charge for tickets Nisuform does not take payments. On Pro, redirect people to a checkout link after they register, or send an invoice. ### Confirm each registration On Pro, auto-replies email each person a confirmation with their own answers, like their name and ticket type. ## Frequently asked questions ### Can I use this as a user registration form with a password? No. This form signs people up for an event or a class, and each registration is stored as a submission in your inbox. Account signup with passwords needs an authentication service, and you should never collect passwords through a form backend. ### How do I stop registrations after a date? Set a close date in the form settings. From that moment, the form shows a closed message instead of accepting new registrations. ### Can I see registrations in a spreadsheet? Yes. Export them as CSV on any plan, or on Pro add every new registration to Google Sheets as it arrives.

Register now