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

Support
1 
<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:

sa
sa996×929 15.5 KB

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

2

Hey @mehmetguduk

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

4

@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.

5

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

6

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.

7

Can you share a link to the page.

8

mehmetguduk.netlify.app

9

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

10

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.

11

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.

12

@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?

13

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
14

Hi there, I’ve been trying to get this to work, but even though it submits, the server returns a ‘404’ error, and I do not see the form data submitted in the Netlify control panel. How do we submit a form with AJAX so that Netlify recieves the data?

Figured it out. Unfortunately neither the docs nor the answers in this thread explain that you need to add this field to your form:

<input type="hidden" name="form-name" value="myformname"/>

15

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile: