DEV Community

Cover image for How to display Webflow form Success message into Netlify with 6 easy steps
azizqamar7
azizqamar7

Posted on

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.

Netlify data attribute in Webflow

Step 3: Change Webflow Form Settings

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

Webflow Form Settings to host on Netlify

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

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>

Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (0)