Gatsby + Netlify Form Error 404

Support
,
#1

Hello all, i’m trying to use netlify forms with a gatsby site however on every form submission, i seem to get an error 404 but i am still redirected to the thank you page.

For each service, I am using a Form component that outputs a different form based on a selected form from a CMS, (different form names, different fields, etc)

I’m using the required attributes:

    <form
      style={{ maxWidth: "600px", margin: "0 auto" }}
      name={formName}
      method="post"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      action="/thank-you"
    >
      <input type="hidden" name="bot-field" />
      <input type="hidden" name="form-name" value={formName} /> 
      ... other fields
   </form>

Here’s a link to the Form code: https://github.com/web-disco-studio/carlawft-studios/blob/main/src/components/ServiceForm.jsx

Here’s a link to the live site, just click the “Book Now” button to promt the form: https://mystifying-stonebraker-57747c.netlify.app/services/engineering-recording

If anyone could help figure this out that’d be greatly appreciated,

Thanks in advance!

#2

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. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

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:

#3

hi @perry, thanks for the response!

I actually came across that article and went through the steps to no avail. I’ve even tried using an extremely simplified form example but the form still seems to 404 on submit. I thought maybe since I was passing in a variable as the form name that could cause an issue, but when I hard code a name it still errors out.

Here’s my simplified form: carlawft-studios/ServiceForm.jsx at main · web-disco-studio/carlawft-studios · GitHub

And here’s the deployed form: https://mystifying-stonebraker-57747c.netlify.app/services/engineering-recording

I tried adding another simple contact form with the exact same set up on my home page and it seems to capture form submissions just fine, so im confused why is is happening :frowning:

A code example to this is here: carlawft-studios/HomeBackgroundVideo.jsx at main · web-disco-digital/carlawft-studios · GitHub

Thanks,

#4

SOLVED:

The issue had to do with putting a form in a modal.

Thanks,

1 Like
#5

I’m having the same issue. Byt mines not in a modal.

I have 20+ sites all work. But one not working. I’ve compared the code and followed all the documentation on Netlify.

When submitting to /success I get a flash of 404 then the success message (looks like a weird re-hydrate issue) it’s really bugging me.

    <form
  name='contact-us'
  method='POST'
  action='/success'
  data-netlify='true'
  data-netlify-honeypot='surname-hp'
>
  <input type='hidden' name='surname-hp' />
  <input type='hidden' name='form-name' value='contact-us' />
#6

can you share the full form code please? thanks!

#7

Thanks for getting back to me @perry i think I resolved this (I’m not sure how) :slight_smile: