FormLauncher

Templates /

Event RSVP

For meetups, weddings and workshops. Export the guest list as CSV when it's time to count chairs.

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: name, email, attending, guests, dietary. 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>Name <input name="name" autocomplete="name" required></label>
  <label>Email <input type="email" name="email" autocomplete="email" required></label>
  <fieldset>
    <legend>Will you come?</legend>
    <div class="fl-choices">
      <label class="fl-choice"><input type="radio" name="attending" value="yes" required> Yes</label>
      <label class="fl-choice"><input type="radio" name="attending" value="no"> Can't make it</label>
    </div>
  </fieldset>
  <label>Guests you're bringing <input type="number" name="guests" min="0" max="5" value="0"></label>
  <label>Dietary needs <span>(optional)</span> <input name="dietary"></label>
  <input class="fl-trap" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Send RSVP</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. Waitlist Collect emails before you launch. 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. Quote request Budget, timeline and project details. Support request Email, topic, subject and message.