Waitlist

Put it on a landing page before your product exists. Export the list as CSV on launch day.

How to use it

Sign in and create a form. You get a URL like https://formlauncher.com/f/…
Copy the code below into your page and replace YOUR_FORM_ID. (From your dashboard, the code comes with your URL already in it.)
Pick where submissions go: Slack, Discord, Telegram, email and more.

Fields sent: email, use_case. Rename them freely: whatever you name a field is what you'll see. The hidden _gotcha field is a spam trap, so keep it.

HTML

<form class="fl-form" action="https://formlauncher.com/f/YOUR_FORM_ID" method="POST">
  <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>What would you use it for? <span>(optional)</span>
    <textarea name="use_case" rows="3"></textarea>
  </label>
  <input class="fl-trap" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Join the waitlist</button>
</form>
<style>
  /* Change --fl-accent to your brand color. */
  .fl-form { --fl-accent: #5b5bd6; display: grid; gap: 14px; max-width: 480px; font: inherit; }
  .fl-form label { display: block; font-weight: 600; font-size: 14px; }
  .fl-form label span { font-weight: 400; color: #6b7280; }
  .fl-form label > input, .fl-form label > select, .fl-form label > textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
  .fl-form input, .fl-form select, .fl-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #111827; }
  .fl-form textarea { min-height: 110px; resize: vertical; }
  .fl-form input:focus, .fl-form select:focus, .fl-form textarea:focus { outline: 2px solid var(--fl-accent); outline-offset: 1px; border-color: transparent; }
  .fl-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
  .fl-form legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
  .fl-form .fl-choice { display: flex; align-items: center; gap: 8px; font-weight: 400; }
  .fl-form .fl-choice > input { display: inline; width: auto; margin: 0; }
  .fl-form .fl-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .fl-form .fl-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .fl-form .fl-row input { flex: 1; min-width: 200px; }
  .fl-form button { font: inherit; font-weight: 600; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--fl-accent); color: #fff; cursor: pointer; justify-self: start; }
  .fl-form button:hover { filter: brightness(1.08); }
  .fl-form .fl-trap { position: absolute; left: -9999px; }
</style>

Optional: stay on the page

By default visitors see a thank-you page (or one you choose). Add this after the form to show a message in place instead.

<script>
  // Optional: show a message on the page instead of going to a thank-you page.
  document.querySelectorAll("form.fl-form").forEach((form) => {
    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const button = form.querySelector("button[type=submit]");
      button.disabled = true;
      try {
        const res = await fetch(form.action, { method: "POST", body: new FormData(form), headers: { Accept: "application/json" } });
        const data = await res.json();
        if (!data.ok) throw new Error(data.error);
        form.replaceChildren(Object.assign(document.createElement("p"), { textContent: "Thanks! We got it." }));
      } catch (err) {
        alert(err.message || "Something went wrong. Please try again.");
        button.disabled = false;
      }
    });
  });
</script>

More templates

Contact form Name, email and a message. Newsletter signup One email field and a button. Feedback A rating, a comment and an optional email. Bug report What broke, where, and how badly. Event RSVP Who's coming, with guests and dietary needs. Quote request Budget, timeline and project details. Support request Email, topic, subject and message.