How to display Webflow form Success message into Netlify with 6 easy steps

Display a success message after a user completes a Webflow form instead of redirecting them to a success page in Netlify.

Here are a few steps you can follow to achieve this:

Step 1: Sign in to your Netlify account.

Create or Sign in to your Netlify account.

Step 2: Add data attribute data-netlify="true" to your Webflow form.

Adding data-netlify="true" helps in detecting the Netlify forms to manage in the submission within its platform.

Netlify's serverless form handling enables you to manage forms without the need for additional API calls or JavaScript. When you use the built-in form detection capability, our build system will automatically parse your HTML at deployment time, eliminating the need for you to make an API call or add extra JavaScript on your site.

Step 3: Change Webflow Form Settings

Change the form method: POST and form action="/"

Step 4: Create your own form success message & form error message

Create the form success & error div inside the Webflow form-block.

Customize the form success message and how you want to display it after the successful form submission. Similarly, customize the form error message and make both the blocks display: "none".

Step 5: Add this code to the custom code section in the Webflow page settings

Replace the form id="your-form" with your own id.
Add id="form-success-message" to form-success-message div block and add id="form-error-message" to form-error-message div block.

<!--Netlify Form Handler-->
<script>
const form = document.getElementById("your-form");

const formSuccessMessage = document.getElementById("form-success-message");
const formErrorMessage = document.getElementById("form-error-message");

const handleSubmit = (e) => {
  e.preventDefault();
  let formData = new FormData(form);

  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => {
      // Show the success message when the form submission is successful in formSuccessMessage 
      formSuccessMessage.style.display = 'block'
      form.style.display = 'none'
      form.reset();
    })
    .catch((error) => {
      //Show an error message when form submission fails in formErrorMessage 
      formErrorMessage.innerHTML = `<p>Oops! Something went wrong while submitting the form.</p>`;
      formErrorMessage.style.display = 'block'
    });
};

form.addEventListener("submit", handleSubmit);
</script>

Step 6: Export and Go Live

Export the site from the Webflow and open/drop the folder into Netlify by adding a new site to it.

After successful deployment, change the desired site name or add a custom domain into netlify. Enable the form detection in Netlify to verify the data attribute data-netlify="true"

Voila 🎉, you can test the form on the live site.