From Success Messaage

I want to display a success message after a user completed a form instead of redirecting them to a success page.

I am exporting code from webflow, is there something i can place in the “action” field to refer to the success message? I already tried putting “/#download-success-message” which is the div ID in which my success message is in, this didn’t work though…

Netifly site name: gilded-rugelach-8e89e7

Hi @alessandro98, thanks for posting. Since you are using Webflow and want to show a success message, you have to do that with JavaScript.

Setting Up The Form And Success Element In Webflow

  1. In Webflow the Action attribute of the form should be /
  2. In Webflow the Method attribute of the form should be POST instead of GET
  3. Add an id attribute to your form in Webflow with the value download-form (I am naming the id download-form because of your form name in the image.
  4. In Webflow add an element at your preferred location in your HTML for showing the success message and give it an ID attribute of form-submit-status-element.

Once you set up your form you can add a script to your form to handle form submissions.
For adding a script to your site in Webflow to run JavaScript code, kindly visit the official Webflow documentation link below.

Once you add your script, the content of the script should be similar to the code below.

const downloadForm = document.getElementById("download-form");

const formSubmitStatusElement = document.getElementById("form-submit-status-element");

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

  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => {
      // Show the success message when form submission is successful in formSubmitStatusElement 
      formSubmitStatusElement.innerHTML = `<p>Your Success Message Here</p>`;
      downloadForm.reset();
    })
    .catch((error) => {
      //Show an error message when form submission fails in formSubmitStatusElement 
      formSubmitStatusElement.innerHTML = `<p>There was an error submitting your form. Kindly try again.</p>`;
    });
};

downloadForm.addEventListener("submit", handleSubmit);

Once you are done export from Webflow again and it should contain the script for form submission.
Deploy again and let me know if it works. Hope this helps.

1 Like

Thank you for the detailed explanation.

I implemented the steps you told me, however, the success messages are not shown because once I press submit on the form, the web page refreshes"and doesn’t show a message.

I think there is a problem with the fetch("/") part. (and i did put the action to /

Note: i still have the custom attribute data-netifly = "true" in my form, i assumed i needed to keep that. I also tried without but then the form results didn’t show in the netifly interface.

Any ideas on how i can avoid the webpage from refreshing after the submission?

Hi @alessandro98, thanks for the feedback.
It looks like you pasted the content without surrounding it with the script tag.
Try the code below.

<script>
    const downloadForm = document.getElementById("download-form");

    const formSubmitStatusElement = document.getElementById("form-submit-status-element");

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

        fetch("/", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: new URLSearchParams(formData).toString(),
            })
            .then(() => {
                // Show the success message when form submission is successful in formSubmitStatusElement 
                formSubmitStatusElement.innerHTML = `<p>Your Success Message Here</p>`;
                downloadForm.reset();
            })
            .catch((error) => {
                //Show an error message when form submission fails in formSubmitStatusElement 
                formSubmitStatusElement.innerHTML = `<p>There was an error submitting your form. Kindly try again.</p>`;
            });
    };

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

Let me know the outcome after you try the code above.
Thanks.

2 Likes

That was a stupid mistake of me :confused:

It works now, thank you so much!

2 Likes

I actually have a follow-up.

I have multiple forms on the same page, i tried applying this solution to the other forms but for some reason, they work when i do them individually, but when i add the javascript code for each form, they all stop working. I’m not familiar with JS so im probably doing something wrong with that. I tried the following two structures:

<script>
code for form 1
code for form 2
</script>

and

<script>
code for form 1
</script>
<script>
code for form 2
</script>

Neither of those options works. I obviously gave different parameter names for downloadForm and formSubmitStatusElement and also renamed the corresponding element ids in the other form.

Any idea how I could make this work?

Hi @alessandro98, I will be happy to help.

Any of the above logic should work fine. However in my opinion I prefer the first one since both forms will have their code in a single script.

It is possible you are probably doing something wrong.

Just like the first example kindly set up your form following the steps below

Setting Up The Bottom Form And Success Element In Webflow

  1. In Webflow the Action attribute of the bottom form should be /contact
  2. In Webflow the Method attribute of the bottom form should be POST instead of GET
  3. I visited your site based on the site name you shared when you made this post. The bottom form already has an id with value bottom-form
  4. In Webflow add an element at your preferred location in your HTML for showing the success message for the bottom form and then give it an ID attribute of bottom-form-submit-status-element.

The code for both the download form and bottom form below.
Note: I made some changes to the submit handler names in order to make it specific to a form.

<script>
    // Download Form

    const downloadForm = document.getElementById("download-form");

    const formSubmitStatusElement = document.getElementById("form-submit-status-element");


    // Bottom Form

    const bottomForm = document.getElementById("bottom-form");

    const bottomFormSubmitStatusElement = document.getElementById("bottom-form-submit-status-element");


    // Submit handler for the download form

    const downloadFormSubmitHandler = (e) => {
        e.preventDefault();
        let formData = new FormData(downloadForm);

        fetch("/", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: new URLSearchParams(formData).toString(),
            })
            .then(() => {
                // Show the success message when form submission is successful in formSubmitStatusElement
                formSubmitStatusElement.innerHTML = `<p>Your Success Message Here</p>`;
                downloadForm.reset();
            })
            .catch((error) => {
                //Show an error message when form submission fails in formSubmitStatusElement
                formSubmitStatusElement.innerHTML = `<p>There was an error submitting your form. Kindly try again.</p>`;
            });
    };


    // Submit handler for the bottom form

    const bottomFormSubmitHandler = (e) => {
        e.preventDefault();
        let formData = new FormData(bottomForm);

        fetch("/contact", {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: new URLSearchParams(formData).toString(),
            })
            .then(() => {
                // Show the success message when form submission is successful in formSubmitStatusElement 
                bottomFormSubmitStatusElement.innerHTML = `<p>Your Success Message Here</p>`;
                bottomForm.reset();
            })
            .catch((error) => {
                //Show an error message when form submission fails in formSubmitStatusElement 
                bottomFormSubmitStatusElement.innerHTML = `<p>There was an error submitting your form. Kindly try again.</p>`;
            });
    };


    // Event listener for the download form

    downloadForm.addEventListener("submit", downloadFormSubmitHandler);


    // Event listener for the bottom form

    bottomForm.addEventListener("submit", bottomFormSubmitHandler);
</script>

Let me know the outcome. Thanks.

2 Likes

it works perfectly, thanks for the help!

1 Like

You are welcome @alessandro98, I’m glad I was able to help.

2 Likes

Great debugging, @clarnx :raised_hands:. Glad everything is working for you, @alessandro98!

2 Likes