Home
Support Forums

Forms submit (gatsby) getting 404 response

Hi there,

Site: https://www.dentsectorfund.com.au/contact
App: https://dentsectorfund.netlify.app/
SSG: GatsbyJS
Workflow: Builds and deploys from Gatsby Cloud

When my form is submitted I am seeing a 404 error, and subsequently nothing is being posted to Netlify Forms. I have this working succesfully in other sites and can not for the life of me see what is different this time. Any help would be great.

Here is my form tag:

<form
  name="contact"
  data-netlify={true}
  data-netlify-honeypot={true}
  className="w-full max-w-lg"
  onSubmit={onSubmit}
>

here is my submit handler:

 const onSubmit = handleSubmit((data, e) => {
    console.log(data)
    fetch('/', {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...data }),
    })
      .then(() => {
        e?.target.reset();
        navigate("/thanks/");
      })
      .catch(() => {
        alert("Error");
      });
    //.finally(() => e?.target.setSubmitting(false));
  });

Here is screen shot of the network panel in chrome:

Thanks,
Simon

There are a lot of issues related to this. Have you tried that already? Here is an important one:

As the text suggests, is Netlify detecting the presence of form on your website? Because, if it’s not, you’d have to get that fixed first by checking your mark-up. From what I know, there’s a special treatment needed for React and Gatsby forms, in case you haven’t checked it already, here’s a link for that: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

1 Like

Hi and thanks for the reply!

Yep, I spent quite a while reading through loads of articles.

I figured Netlify wasn’t recognising the form, so I went ahead and created a “dummy” form as per a React app. This has got my form working. But, I have a number of Gatsby sites, and I have never had to do this before. So, while I have this working, I don’t know why Netlify didn’t recognise my JSX form for this particular site? I’ll keep looking to see if anything else jump out at me

Netlify has never recognized JSX forms, @simonjturk :), so this is more of a question of “how did it work on the other sites?”

I suspect that your framework created the dummy forms for you in an html file; when you do a local build on another site where you don’t recall setting up the dummy form yet find forms working in our UI, try a recursive grep for HTML form definitions in your built source base, and I bet you’ll find it :). To search for the definition on osx or linux, I’d use something like:

cd project/output ; grep -r '<form ' .

Then, perhaps from there you can work backwards to what configuration led to your build process creating those files on the other site(s), and apply that configuration to your new site as well?

Thanks a lot, you are 100% correct and, in fact, that’s the search I did when debugging that lead me to create the dummy form :).

I’m happy to accept this is the way to do it and I’ve somehow fluked it in the past (last week in fact).

Thanks for taking the time to respond on a bit of a red herring.

Cheers,

Simon.