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.
Top comments (0)