Unable to receive form submissions on Netlify deploys

Question

I am using a simple form that was taken from one of the Netlify related docs:

<form name="contact" action="/" method="post" data-netlify="true">

    <div className="field">
        <label htmlFor="name">Name</label>
        <input type="text" name="name" id="name" value="dave"/>
    </div>
    <div className="field">
        <label htmlFor="email">Email</label>
        <input type="text" name="email" id="email" value="email@email.com" />
    </div>
    <div className="field">
        <label htmlFor="message">Message</label>
        <textarea name="message" id="message" rows="6"></textarea>
    </div>   
    <input type="submit" value="Send Message" className="" />

</form>

In using gatsby develop and working with/submitting the form, things seem to work fine. I get no errors and get redirected to the home page as expected.

After deploying the site with Netlify and trying to submit the form, I get the following page error:

In my Netlify backend, the form appears in the console but I cannot/do not receive submissions.

I am using a barebones gatsby-config.js, only incorporating gatsby-source-wordpress and gatsby-plugin-google-analytics.

I also tried adding /no-cache=1 to form action.

Can anybody advise?

It might also be worth noting that I have coded my form as a component and am importing it into my footer as such. In that way, it may be imported multiple times on different pages as mentioned in point 3 of this StackOverflow answer.

Thanks.

score 1 · Answer 1 · answered Mar 15 '19 at 07:47

I learned that because I'm using Gatsbyjs, and Gatsby + Netlify = javascript forms, I needed to add another input type="hidden" to my form:

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

The documentation for this wasn't immediately clear but below are some links that address this:

Here's a link to an article that pointed me to the answer: How to Integrate Netlify’s Form Handling in a React App
Here's another one if you're building in Vue: How to Integrate Netlify Forms in a Vue App
And all about Netlify Forms

score 0 · Answer 2 · answered Aug 26 '19 at 17:44

0

If you are using any redirect method then you have to add _redirects file in your root folder and add paths to it so that redirect can work.

It's may be confusing but you can visit this link for more help.

answered Aug 26 '19 at 17:44

Bijayee Saswata

79
1
4

Unable to receive form submissions on Netlify deploys

2 Answers2