FormLauncher

Templates /

Feedback

Ask how it went after a purchase, a support chat or a new feature. Each answer pings your team chat.

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: rating, comment, 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">
  <fieldset>
    <legend>How was your experience?</legend>
    <div class="fl-choices">
      <label class="fl-choice"><input type="radio" name="rating" value="5" required> Great</label>
      <label class="fl-choice"><input type="radio" name="rating" value="4"> Good</label>
      <label class="fl-choice"><input type="radio" name="rating" value="3"> Okay</label>
      <label class="fl-choice"><input type="radio" name="rating" value="2"> Poor</label>
      <label class="fl-choice"><input type="radio" name="rating" value="1"> Bad</label>
    </div>
  </fieldset>
  <label>What could be better? <textarea name="comment"></textarea></label>
  <label>Email <span>(optional, if you'd like a reply)</span> <input type="email" name="email" autocomplete="email"></label>
  <input class="fl-trap" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Send feedback</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. 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.