404 Error on Netlify Form in Gatsby V2

Support
, ,
#1

I’ve looked around the forum, but can’t find any other posts that helped me solve this issue, so here it goes:

I am building an application using Gatsby V2. I’ve followed the docs for setting up a form on my site. The problem is that Netlify doesn’t recognize the form and when I submit I get a 404 error.

UPDATE: Because the form is hidden inside a modal, it was dynamically generated by JS after the page had first loaded. Because of that, Netlify had no knowledge that the form existed. I fixed it by hiding the form through CSS instead of using React/JS state to toggle the modal.

SECOND UPDATE: The real issue was that I needed to encode the body part of my form inside my axios call. The modal part wasn’t really a thing.

I hope that helps someone else in the future!

#2

@hanshank, welcome to our community site and thanks for letting us know how you solved this issue!

#3

Hi, I got the same error.
What do you mean exactly by “I needed to encode the body part of my form inside my axios call”
best regards

PS : here is my code

handleSubmit(event) {
// Do not submit form via HTTP, since we’re doing that via XHR request.
event.preventDefault()

// Loop through this component's refs (the fields) and add them to the
// formData object. What we're left with is an object of key-value pairs
// that represent the form data we want to send to Netlify.
const formData = {}
Object.keys(this.refs).map(key => (formData[key] = this.refs[key].value))

// Set options for axios. The URL we're submitting to
// (this.props.location.pathname) is the current page.

const axiosOptions = {
  url: this.props.location.pathname,
  method: 'post',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(formData),
}
console.log(axiosOptions)
// Submit to Netlify. Upon success, set the feedback message and clear all
// the fields within the form. Upon failure, keep the fields as they are,
// but set the feedback message to show the error state.
axios(axiosOptions)
  .then(response => {
    this.setState({
      feedbackMsg: 'Votre message a bien été transmis, merci.',
    })
    this.domRef.current.reset()
  })
  .catch(function(error) {
    console.log(error)
    this.setState({
      feedbackMsg:
        "Terrible nouvelle, une erreur s'est produite pendant l'envoi de votre message (︶︹︺) .",
    })
  })

}

#4

Hi @Barbegrasse, can you share a link to the live form for testing? Also is the repo public?

#5

Hi,
thank you for the reply i finally managed to get the work done
http://developpeur-web.tech/

If that can help someone here is the code

Thank you for the wonderfull you are doing at Netlify
Best regards,
Johan

1 Like
#6

Thank you so much for sharing your solution and your code, @Barbegrasse!

1 Like