All Form Templates

Waitlist Signup Form

Collect pre-launch signups with a minimal email + name form. Build hype, capture intent, and message your audience on launch day.

Before you start
Before using the Form Template below, you need a Formtorch endpoint.
Don't have one yet? Sign up now and get one in less than 5 minutes.

Add your Formtorch endpoint

Paste your form ID and the code below updates instantly.

waitlist.html
<section class="ft-form-wrap">
  <form
    action="https://formtorch.com/f/abc123"
    method="POST"
    accept-charset="UTF-8"
  >
    <input type="hidden" name="_formName" value="Waitlist Signup" />

    <h2 class="ft-heading">We&rsquo;re launching soon</h2>
    <p class="ft-hint">
      Join the waitlist and be first to know when we go live.
    </p>

    <div class="ft-field">
      <label for="ft-name" class="ft-label">Your name</label>
      <input
        id="ft-name"
        type="text"
        name="name"
        placeholder="Jane Smith"
        autocomplete="name"
        required
      />
    </div>

    <div class="ft-field">
      <label for="ft-email" class="ft-label">Email address</label>
      <input
        id="ft-email"
        type="email"
        name="email"
        placeholder="you@example.com"
        autocomplete="email"
        required
      />
    </div>

    <button type="submit">Join the waitlist</button>
  </form>
</section>

<style>
  .ft-form-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;

    --ft-accent-hue: 250;
    --ft-accent: hsl(var(--ft-accent-hue) 90% 58%);
    --ft-border: #e2e8f0;
    --ft-border-hover: #cbd5e1;
    --ft-text: #0f172a;
    --ft-label: #374151;
    --ft-hint: #6b7280;
    --ft-placeholder: #9ca3af;
    --ft-bg-field: #ffffff;
    --ft-bg-hover: #f8fafc;
  }

  .ft-form-wrap * {
    box-sizing: border-box;
  }

  .ft-form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ft-heading {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ft-text);
    line-height: 1.3;
  }

  .ft-hint {
    margin: -8px 0 0;
    font-size: 13px;
    color: var(--ft-hint);
  }

  .ft-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .ft-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ft-label);
  }

  .ft-form-wrap input[type="text"],
  .ft-form-wrap input[type="email"] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--ft-border);
    border-radius: 8px;
    background: var(--ft-bg-field);
    color: var(--ft-text);
    font: inherit;
    padding: 0 12px;
    outline: none;
    transition:
      border-color 120ms ease,
      box-shadow 120ms ease;
  }

  .ft-form-wrap input::placeholder {
    color: var(--ft-placeholder);
  }

  .ft-form-wrap input:hover {
    border-color: var(--ft-border-hover);
    background: var(--ft-bg-hover);
  }

  .ft-form-wrap input:focus-visible {
    border-color: var(--ft-accent);
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 90% 58% / 0.15);
    background: var(--ft-bg-field);
  }

  .ft-form-wrap button {
    appearance: none;
    border: 0;
    border-radius: 8px;
    height: 44px;
    padding: 0 24px;
    background: var(--ft-accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
      filter 120ms ease,
      transform 120ms ease,
      box-shadow 120ms ease;
  }

  .ft-form-wrap button:hover {
    filter: brightness(1.08);
  }

  .ft-form-wrap button:active {
    transform: translateY(1px);
  }

  .ft-form-wrap button:focus-visible {
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 90% 58% / 0.25);
    outline: none;
  }

  .ft-form-wrap button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

How it works

Create a Formtorch endpoint

Sign up and create a new form endpoint in the dashboard. You will get a unique URL in seconds.

Create endpoint

Paste it into your form

Set your form's action attribute to your endpoint URL. No other changes required.

Deploy and start receiving submissions

Every submission is stored in your dashboard, triggers email notifications, and can fire webhooks to any service.

Frequently asked questions

No. Formtorch works with standard HTML forms via the action attribute. No JavaScript required for basic submissions.

Start in less than 5 minutes

Create your endpoint, paste it into any template, and you are live.

Create endpointContact us