How can I prevent to show "Your form submission has been received" page when Form submitted?

<form class="contact-form" data-netlify="true" name="contact">
            <input id="contact-name" name="name" type="text" placeholder="Name" autocomplete="off">
            <input id="contact-email" name="email" type="email" placeholder="Email" autocomplete="off">
            <input id="contact-subject" name="subject" type="text" placeholder="Subject" autocomplete="off">
            <textarea id="contact-message" name="message" placeholder="Message" autocomplete="off"></textarea>
            <button class="form-submit" type="submit">Submit</button>
        </form>

I have a form element which has data-netlify=“true”. And I am already manually showing “Your form has been received” message to user. Thereforce I dont need the following page:

So my question is about "How can I prevent to show ‘Your form submission has been received’ page when Form submitted?

Hey @mehmetguduk

You can use a custom success page. Alternatively you could submit using AJAX and show a message on the page without redirecting.

@coelmay

What should I set for action attribute of form element to “ do nothing , don’t even scroll top or don’t even move another page ” I tried to action="/". It is refreshing the page.

If you are submitting using AJAX, remove the action attribute.

I don’t have AJAX here. I have just a div element and sending “Form Submitted” text there when form submitted (with basic Javascript commands). When I remove action attribute It’s showing the page that I shared with picture.

Can you share a link to the page.

mehmetguduk.netlify.app

As you are using JavaScript try removing the action attribute from the form.

I did please try again. But as I said it was like this (without action attribute) when I created this support post. So It was sending user to “Thank you! Your form submission has been received.” content of default netlify success page.

Your script is still submitting the form

FORM.submit();

Thus you will need to either add a success page (see documentation above), or change the code you have to work like the AJAX linked above.

@coelmay

That script codes allow me to get the form in a way I want it. and FORM.submit() line is providing the button work like submit button.

So are you saying that If I:

  • change button type attribute to “submit”.
  • remove FORM.submit(); part from script.
  • remove action attribute from form element.

will not show that default netlify form success page?

I’m suggesting you either

  1. Create a success page (e.g. called thank-you) and set this as the action value so users see this page and not the default Thank You page.

OR

  1. Incorporate the code currently used into the code below (from the documentation previously linked) so that the form submits using AJAX and therefore will no redirect.
document
  .querySelector("form")
  .addEventListener("submit", handleSubmit);

const handleSubmit = (e) => {
  e.preventDefault();
  let myForm = document.getElementById("pizzaOrder");
  let formData = new FormData(myForm);
  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => console.log("Form successfully submitted"))
    .catch((error) => alert(error));
};
1 Like