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.
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 (︶︹︺) .",
})
})