Forms

4 fields

Waitlist form

A waitlist signup form for a product launch. Collect emails with an optional role and referral source, then confirm and deduplicate them in the tool you send them to.

Form ID

Preview

Runs Ikiform's validator in your browser. Nothing is sent.

Copy the code

Every version below is generated from the same field definition. Replace frm_xxxxxxxxxxxxxxxx with your form id, or enter it in the Form ID box and the code updates.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" placeholder="you@company.com" autocomplete="email" required />
  <label for="name">Name</label>
  <input id="name" name="name" type="text" maxlength="120" />
  <label for="role">What do you do?</label>
  <select id="role" name="role">
    <option value="">Choose one</option>
    <option value="founder">Founder</option>
    <option value="engineer">Engineer</option>
    <option value="designer">Designer</option>
    <option value="other">Something else</option>
  </select>
  <label for="source">How did you hear about us?</label>
  <input id="source" name="source" type="text" maxlength="200" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Join the waitlist</button>
</form>
  • HTML needs no JavaScript. After a successful post the browser is redirected to the form's redirect URL, or to Ikiform's hosted thank-you page.
  • React uses the SDK: npm install @ikiform/sdk. Field errors from the server appear under each field.
  • JavaScript enhances the HTML form with fetch, so the visitor stays on the page.
  • The hidden _gotcha input is the honeypot. Leave it empty and hidden.
If you set the form's spam check to Ikiform, the HTML form keeps working with no change and the server action skips the check because it sends a secret key. The React and JavaScript versions must get a token before each submit: call challenge(FORM_ID) from @ikiform/sdk and pass it to submit as turnstileToken, or add it to the fetch body as cf-turnstile-response. Without it the post is refused with 403 challenge_required. See the Next.js guide and Spam protection.

The fields

Paste this definition on the form's Fields tab in the dashboard. Ikiform then checks every post against it on the server, refuses bad data with 422 validation_failed, refuses any field that isn't listed, and stores typed values.

Field idTypeRequiredAccepts
emailemailYesOne valid address
nametextNoUp to 120 characters
roleselectNoOne of: founder, engineer, designer, other
sourcetextNoUp to 200 characters
Field definition
{
  "version": 1,
  "title": "Waitlist",
  "fields": [
    {
      "id": "email",
      "type": "email",
      "label": "Email",
      "required": true,
      "placeholder": "you@company.com"
    },
    {
      "id": "name",
      "type": "text",
      "label": "Name",
      "validation": {
        "max_length": 120
      }
    },
    {
      "id": "role",
      "type": "select",
      "label": "What do you do?",
      "options": [
        {
          "value": "founder",
          "label": "Founder"
        },
        {
          "value": "engineer",
          "label": "Engineer"
        },
        {
          "value": "designer",
          "label": "Designer"
        },
        {
          "value": "other",
          "label": "Something else"
        }
      ]
    },
    {
      "id": "source",
      "type": "text",
      "label": "How did you hear about us?",
      "validation": {
        "max_length": 200
      }
    }
  ],
  "settings": {
    "submit_label": "Join the waitlist",
    "success_message": "You're on the list. We'll email you at launch."
  }
}

Next.js server action

To keep the form working without JavaScript in a Next.js app, post from a server action with a secret key. Create the key under API keys with the submissions:write scope and keep it out of the browser.

.env.local
IKIFORM_SECRET_KEY=ik_sk_your_secret_key
app/waitlist/actions.ts
"use server";

export interface WaitlistFormState {
  ok: boolean;
  message: string;
  fields?: Record<string, string[]>;
  values?: Record<string, string[]>;
}

export async function sendWaitlistForm(_previous: WaitlistFormState, formData: FormData): Promise<WaitlistFormState> {
  const body = new URLSearchParams();
  for (const [name, value] of formData) {
    if (typeof value === "string" && !name.startsWith("$ACTION")) body.append(name, value);
  }
  const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
    method: "POST",
    headers: {
      Accept: "application/json",
      Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`,
    },
    body,
  });
  const result = await response.json();
  if (result.ok) return { ok: true, message: "You're on the list. We'll email you at launch." };
  const values = Object.fromEntries([...new Set(body.keys())].map((name) => [name, body.getAll(name)]));
  return { ok: false, message: result.error.message, fields: result.error.fields, values };
}
app/waitlist/form.tsx
"use client";

import { useActionState } from "react";
import { type WaitlistFormState, sendWaitlistForm } from "./actions";

const initial: WaitlistFormState = { ok: false, message: "" };

export function WaitlistForm() {
  const [state, action, pending] = useActionState(sendWaitlistForm, initial);

  if (state.ok) return <p>{state.message}</p>;

  return (
    <form action={action}>
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" placeholder="you@company.com" autoComplete="email" required defaultValue={state.values?.email?.[0]} />
      {state.fields?.email ? <p>{state.fields.email[0]}</p> : null}
      <label htmlFor="name">Name</label>
      <input id="name" name="name" type="text" maxLength={120} defaultValue={state.values?.name?.[0]} />
      {state.fields?.name ? <p>{state.fields.name[0]}</p> : null}
      <label htmlFor="role">What do you do?</label>
      <select id="role" name="role" defaultValue={state.values?.role?.[0]}>
        <option value="">Choose one</option>
        <option value="founder">Founder</option>
        <option value="engineer">Engineer</option>
        <option value="designer">Designer</option>
        <option value="other">Something else</option>
      </select>
      {state.fields?.role ? <p>{state.fields.role[0]}</p> : null}
      <label htmlFor="source">How did you hear about us?</label>
      <input id="source" name="source" type="text" maxLength={200} defaultValue={state.values?.source?.[0]} />
      {state.fields?.source ? <p>{state.fields.source[0]}</p> : null}
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {state.message && !state.fields ? <p role="alert">{state.message}</p> : null}
      <button disabled={pending}>{pending ? "Sending" : "Join the waitlist"}</button>
    </form>
  );
}
A server action posts from your server's IP, so the per-visitor rate limit counts every visitor together. Use the Relaxed or Custom rate limit for forms you send through a server.

Set it up

  1. Create a form in the dashboard and copy its id.
  2. Paste the field definition on the Fields tab.
  3. Add your site under Allowed domains, plus localhost while you develop.
  4. Set the rate limit to Standard, 5 a minute per visitor if visitors post from the browser. Launch-day traffic is bursty but each person signs up once. Standard allows a retry without letting a script fill the list. With the server action, every post comes from your server's IP, so choose Relaxed or Custom instead.
  5. Paste the code, send a test and check it arrives in the dashboard.

Confirming signups

Ikiform doesn't email the person who signs up. Notification emails go to your workspace, not to the subscriber, so there is no built-in confirmation or double opt-in email.

If you want double opt-in, run it where the list lives:

  1. Add a webhook endpoint in Ikiform that points at your automation or server.
  2. On each submission.created event, add the address to your email tool as unconfirmed and send the confirmation from there.
  3. Mark the person confirmed when they click the link. Most email tools do this step for you.

Each delivery is signed, so check the signature before you trust it, and use the webhook-id header to ignore retries of a delivery you already handled.

Duplicate signups

People sign up twice, from two tabs or a week apart. Ikiform doesn't merge or reject repeats by email; it scores exact repeats as a spam signal:

CaseWhat happens
The same email posted again within 24 hours, with identical fields+3 to the spam score, below the threshold of 5, so it is stored as a second submission
A repeat from a disposable email domain+3 and +2, which reaches 5 and is stored as spam

Deduplicate by email where you store the list. A spreadsheet or database with a unique email column, or an upsert in your webhook handler, turns a repeat into a no-op. In JavaScript, send an idempotency key per page load so a double click never creates two submissions.

On launch day

  • The form-wide limit is 300 a minute across every visitor by default. Raise it with the Custom rate limit if you expect more.
  • If one office or event shares an IP, Standard's per-visitor limit counts them together. Relaxed allows 20 a minute.
  • Export the whole list as CSV from the dashboard when you're ready to send invites. See Export.

Where to send it

Every submission can go to a signed webhook. These guides cover the tools that suit this form, with the relay code:

Questions

Point your form at Ikiform

Get startedRead the docs