How to display Webflow form Success message into Netlify with 6 easy steps
Tags: webflow, netlify, javascript, forms
Published: 2023-10-01 12:40:22

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](https://www.netlify.com/) 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.

![Netlify data attribute in Webflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwxwg0nzbkbpdrl4kano.png)

### Step 3: Change Webflow Form Settings
Change the form `method: POST` and form `action="/"`

![Webflow Form Settings to host on Netlify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyavjlpvc3j5fkoobg8d.png)

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

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

![Webflow form-block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt1szmtco40mkz9r5b5t.png)

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.

![Netlify Manual Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6azbl59m4r941gpv0wu.png)

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.