`<WaitlistForm/>` component

<WaitlistForm /> is the embedded waitlist surface. It reads deployment auth settings, collects the enabled fields, and submits the result to the waitlist API.

Usage

The following example shows a basic usage of <WaitlistForm />.

import { WaitlistForm } from '@wacht/nextjs';export default function WaitlistFormUsage() {  return (    <>      <WaitlistForm />    </>  );}

Entry and state

The component reads deployment from useDeployment() and the submit function from useWaitlist().

It keeps local state for first name, last name, email, submission state, loading state, and any error returned by the request.

The form does not redirect; it stays on the page and switches to the success view once the request succeeds.

Fields and validation

First name, last name, and email are the only fields on the waitlist form.

First name and last name only render when the deployment enables them. Email always renders.

The request strips empty values before it sends the form data, so optional fields stay out of the payload when they are blank.

Required markers come from the deployment auth settings.
The form shows the field-level error state returned by the local error helper.
The submit path goes through useWaitlist().

Examples

Standalone waitlist page

import { WaitlistForm } from '@wacht/nextjs';export default function WaitlistFormStandaloneWaitlistPage() {  return (    <>      <WaitlistForm />    </>  );}

Waitlist route shell

export default function WaitlistPage() {  return (    <main className="mx-auto max-w-md py-12">      <h1>Join the waitlist</h1>      <WaitlistForm />    </main>  );}

<WaitlistForm/> component