# Waitlist signup form template A one-field waitlist form for collecting emails before launch. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This form has a single email field and a button. Use it to collect a launch list on a landing page, a coming soon page or a product demo. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/waitlist-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Email | `email` | Email | 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

Join the waitlist

Be the first to know when we launch.

``` ## 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 WaitlistForm() { 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 on the list. We’ll be in touch.

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

Something went wrong. Please try again.

}
) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function WaitlistForm() { 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 on the list. We’ll be in touch.

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

Something went wrong. Please try again.

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

You’re on the list. We’ll be in touch.

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

Something went wrong. Please try again.

{/if}
{/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" ---
``` ## When to use it - A coming soon page before your product launches - Beta and early access signups - A "notify me" form for a product that is sold out or not available yet - Gauging interest in a course, event or ebook before you make it ## Customize it ### Know where signups came from Add `` to tell forms on different pages apart. Nisuform also records the page every submission was sent from. ### Cap the list Set a maximum number of submissions in the form settings, like 200 beta spots, and the form closes by itself when it is full. ### Move signups into your email tool Export the list as CSV at any time, or on Pro send each signup to Zapier, Make or a webhook as it arrives. ## Frequently asked questions ### How do I export my waitlist? Open the form in your Nisuform dashboard and export the submissions as a CSV file. It opens in Excel and Google Sheets and imports into most email tools. Export is included on every plan. ### How do I stop fake or bot signups? The template includes a hidden honeypot field and sends how long the form was open, so most bots are dropped without counting toward your limit. Rate limits and duplicate checks catch the rest. If spam still gets through, turn on Cloudflare Turnstile. ### Can I show how many people already joined? Not directly. Nisuform does not publish a live counter, but your server can read the count from the Nisuform API and show it on your page.