Next.js · Signups

Next.js Waitlist
Template

Give early supporters a simple way to register interest before launch. This form collects their name and email address, stores each submission and lets you export signups from your dashboard.

Responsive stylingSpam honeypot includedFree to copy and customize

Try the template Setup instructions

Make it yours

Your next launch, lined up

Try the form and take the Next.js code.

Next.js

Interactive demo · submissions stay in this preview

Set up this template in Next.js

The component can stay a Server Component: its form action is a URL, not a Server Action. The browser posts directly to SiteBackend. No use client directive is required for this version, and the form works without client-side JavaScript.

1. Create your SiteBackend form
Create a site and a form in your dashboard. Copy the form endpoint and replace YOUR_FORM_ID in the downloaded component.

2. Add the TSX component

Save the downloaded component as app/components/WorkflowForm.tsx. It uses native form elements and includes its own CSS, so you do not need a UI library.

Full component: app/components/WorkflowForm.tsx

export default function WorkflowForm() {
  return (
    <>
      <form className="sb-form" action="https://api.sitebackend.com/forms/YOUR_FORM_ID" method="POST">
        <h2>Something good is coming.</h2>
        <p>Leave your email to join our early-access waitlist.</p>
        <label htmlFor="name">Your name</label>
        <input id="name" name="name" type="text" placeholder="Alex Morgan" required />
        <label htmlFor="email">Email address</label>
        <input id="email" name="email" type="email" placeholder="[email protected]" required />
        <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" style={{ display: "none" }} />
        <button type="submit">Join the waitlist</button>
      </form>
      <style>{`.sb-form { max-width: 440px; padding: 32px; margin: 24px auto; font-family: system-ui, sans-serif; color: #0b0a16; background: #fff; border: 1px solid #e7e5f0; border-radius: 20px; }
.sb-form h2 { font-size: 28px; margin: 0 0 8px; }
.sb-form p { color: #6b6a80; line-height: 1.6; }
.sb-form label { display: block; font-size: 14px; font-weight: 600; margin-top: 20px; }
.sb-form input, .sb-form textarea { box-sizing: border-box; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #e7e5f0; border-radius: 8px; font: inherit; }
.sb-form textarea { min-height: 110px; resize: vertical; }
.sb-form button { width: 100%; margin-top: 24px; padding: 14px; border: 0; border-radius: 8px; background: #6d3fe0; color: #fff; font: inherit; cursor: pointer; }
.sb-form :focus-visible { outline: 2px solid #6d3fe0; outline-offset: 3px; }`}</style>
    </>
  );
}

3. Use the component on your page
Create app/waitlist/page.tsx, or import the component into an existing page. Adjust the relative import path if your folders differ.
app/waitlist/page.tsx
```
import WorkflowForm from "../components/WorkflowForm";

export default function ContactPage() {
  return <WorkflowForm />;
}
```
4. Connect notifications and test a submission
Enable email notifications in your form settings if you want an alert for each submission. If you restrict allowed origins, include your production URL and local development origin (typically http://localhost:3000). Submit from your own site and confirm it appears in the dashboard. The preview above demonstrates the form without sending data.

Customizing the Next.js implementation

Add a Client Component only when you need browser interactions such as conditional fields or inline success states. For an inline response, submit with fetch and the Accept: application/json header; handle failures before showing success.

Next.js integration guide Submit without a page reload

What this form collects

name lets you personalize a later follow-up.
email records where the visitor wants to hear about your launch.

Make it fit your workflow

Explain what visitors are joining and when they should expect an update.
Add a named interest field if you need to learn which feature or product visitors want.
Export submissions as CSV when you are ready to follow up, then use your email provider to send launch updates.

This template records interest. It does not implement double opt-in, unsubscribe management or a bulk email campaign. Multiple submissions may use the same email address; deduplicate your exported list before a launch email.

More Next.js templates

Next.js Contact Form Template

Build a Next.js contact form with a copyable TSX component, native POST submission, a spam honeypot and email notifications through SiteBackend.

Next.js Project Enquiry Template

Create a Next.js project enquiry form with name, email, budget and brief fields. Copy the TSX component and send leads to your SiteBackend inbox.

All Next.js templates

Next.js WaitlistTemplate