FormLauncher

Templates /

Newsletter signup

A one-line signup for a blog or docs site. Sign-ups are stored and exportable as CSV for your newsletter tool.

How to use it

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

Fields sent: email. 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 for="fl-email">Get new posts by email</label>
  <div class="fl-row">
    <input id="fl-email" type="email" name="email" autocomplete="email" placeholder="you@example.com" required>
    <button type="submit">Subscribe</button>
  </div>
  <input class="fl-trap" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
</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. Waitlist Collect emails before you launch. 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.