How to Add a Custom Form to Webflow

Set up your FormsList endpoint

Create a FormsList account and add a new form. Copy your endpoint URL. Using FormsList with Webflow gives you features like email forwarding, Slack integration, and CSV exports that are not available with Webflow's built-in form handling on the free plan.

Build the form in Webflow and add custom code

Design your form in Webflow using the native form element. Then add custom JavaScript in the page's custom code settings (or the project-level custom code section) to intercept the form submission and send it to your FormsList endpoint instead of Webflow's default handler.

<!-- Add this to the "Before </body> tag" section in Webflow's custom code settings -->
<script>
  const form = document.querySelector("form");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    e.stopPropagation();

    const submitBtn = form.querySelector("[type='submit']");
    const originalText = submitBtn.value || submitBtn.textContent;
    submitBtn.disabled = true;
    submitBtn.textContent = "Sending...";

    try {
      const res = await fetch("https://formslist.com/f/YOUR_FORM_HASH", {
        method: "POST",
        body: new FormData(form),
      });

      if (res.ok) {
        // Show Webflow's success state
        const successEl = document.querySelector(".w-form-done");
        const formEl = document.querySelector(".w-form");
        if (successEl) successEl.style.display = "block";
        if (formEl) formEl.style.display = "none";
        form.reset();
      } else {
        const errorEl = document.querySelector(".w-form-fail");
        if (errorEl) errorEl.style.display = "block";
      }
    } catch {
      const errorEl = document.querySelector(".w-form-fail");
      if (errorEl) errorEl.style.display = "block";
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = originalText;
    }
  });
</script>

Publish and test

Publish your Webflow site and submit a test entry. Verify the submission appears in the FormsList dashboard. The Webflow success and error states should work as designed. Enable email notifications and any other integrations you need from the FormsList dashboard.