Waitlist form template

03 / Make it yours

Choose your stack. Copy your form.

Replace the example endpoint with your Formward endpoint, then adapt the fields to your needs.

<form action="https://forms.formward.eu/f/your-form-id" method="POST">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required />
  <label for="name">First name</label>
  <input type="text" name="name" id="name" />
  <label for="use_case">What would you use it for?</label>
  <textarea name="use_case" id="use_case"></textarea>
  <label>
    <input type="checkbox" name="news" id="news" aria-describedby="news-help" /> Also send me occasional product news
  </label>
  <small id="news-help">Optional. Without it we only email you when your access is ready.</small>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Send</button>
</form>

Accessibility

Accessible by default, and how to keep it that way

• Every field in the code has a visible label tied to it with for and id, so screen readers announce what to enter and a click on the label focuses the field.
• Required fields carry the required attribute, so the browser explains a missing answer before anything is sent. Say “required” in words as well; an asterisk or a colour alone is easy to miss.
• The spam trap field (_gotcha) is hidden from screen readers with aria-hidden and skipped by the Tab key, so people never meet it.
• In the JavaScript versions, show the confirmation or error in an element with role="status" so the result is announced, and keep the entered answers when sending fails.

Changed the fields? Paste your version into the HTML form tester to see exactly what it sends, or run it through the GDPR form checker.

04 / Implementation

How the code talks to Formward

Next.js client component

Copy"use client";

import { useState } from "react";

export function WaitlistForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" required />
      <label htmlFor="name">First name</label>
      <input type="text" name="name" id="name" />
      <label htmlFor="use_case">What would you use it for?</label>
      <textarea name="use_case" id="use_case" />
      <label>
        <input type="checkbox" name="news" id="news" aria-describedby="news-help" /> Also send me occasional product news
      </label>
      <small id="news-help">Optional. Without it we only email you when your access is ready.</small>
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Questions

How do I see which channel brought people to the waitlist?

Send the page's UTM parameters with the form as hidden fields; the lead generation page has a short script for it. Formward stores the source with each submission, and falls back to the referring site when there is no UTM source.

How is this different from the newsletter signup template?

A newsletter is ongoing and needs consent for marketing. A waitlist is a one-off request for access, plus an optional opt-in for news. Keeping them apart keeps your consent records honest.

Related

• Newsletter signup template

  One field, plus a consent version.

• Lead generation

  UTM source on every signup.

• Consent checkboxes

  How the news opt-in should read.

• Next.js forms

  The waitlist on a Next.js landing page.