Templates /

Support request

A simple help desk front door. Route it to a shared Slack channel and answer by email.

<form class="fl-form" action="https://formlauncher.com/f/YOUR_FORM_ID" method="POST">
  <label>Email <input type="email" name="email" autocomplete="email" required></label>
  <label>Topic
    <select name="topic">
      <option>A question</option>
      <option>Billing</option>
      <option>My account</option>
      <option>Something isn't working</option>
      <option>Something else</option>
    </select>
  </label>
  <label>Subject <input name="subject" required></label>
  <label>How can we help? <textarea name="message" required></textarea></label>
  <input class="fl-trap" type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Send request</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>

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