Not Receiving Form Submissions via Netlify Forms

deeheber commented 5 years ago

Summary

Hey there disclaimer that I'm new to using Gatsby, but I'm having some troubles with getting my form to submit properly using Netlify forms. Unsure if this is a Gatsby or Netlify related problem.

Steps to reproduce:

Go to https://deeheber.netlify.com/contact
Fill out and submit the form
No submission is received in my Netlify backend

Any additional input you can provide would be very helpful and appreciated. Did a quick scan of open issues and wasn't able to locate anything that looked related.

Thanks for your work on this open source project...aside from this issue using Gatsby has been great thus far!

Relevant information

The form does appear in my Netlify backend, but I don't receive any submissions
I've temporarily removed my custom domain and associated redirects > same behavior (will continue to keep it unlinked until this issue is resolved)
Noticed a 404 error for the POST to /success after submitting the form via the live site deploy on Netlify in my Chrome dev tools > Network tab
Updated all of my npm packages except for gatsby-remark-images, did an rm -rf of my node_modules and my package-lock.json and did a fresh npm i
Cleared my Netlify cache and triggered a new deploy
Link to my form source code here: https://github.com/deeheber/danielle-heberling-dot-xyz/blob/master/src/pages/contact.js

Environment (if relevant)

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 72.0.3626.109
    Firefox: 63.0.3
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.1.17 => 2.1.17 
    gatsby-image: ^2.0.29 => 2.0.29 
    gatsby-plugin-feed: ^2.0.13 => 2.0.13 
    gatsby-plugin-google-analytics: ^2.0.14 => 2.0.14 
    gatsby-plugin-manifest: ^2.0.19 => 2.0.19 
    gatsby-plugin-offline: ^2.0.24 => 2.0.24 
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6 
    gatsby-plugin-sharp: ^2.0.22 => 2.0.22 
    gatsby-plugin-typography: ^2.2.7 => 2.2.7 
    gatsby-remark-copy-linked-files: ^2.0.9 => 2.0.9 
    gatsby-remark-images: ^2.0.6 => 2.0.6 
    gatsby-remark-prismjs: ^3.2.4 => 3.2.4 
    gatsby-remark-responsive-iframe: ^2.0.9 => 2.0.9 
    gatsby-remark-smartypants: ^2.0.8 => 2.0.8 
    gatsby-source-filesystem: ^2.0.22 => 2.0.22 
    gatsby-transformer-remark: ^2.2.6 => 2.2.6 
    gatsby-transformer-sharp: ^2.1.14 => 2.1.14

jonniebigodes commented 5 years ago

@deeheber a quick glance at your code repository i saw that you have gatsby-plugin-offline installed and activated in your gatsby-config.js, so with that i would like to you to do the following:

Stop Gatsby
disable the plugin by commenting out the entry in your gatsby-config.js file.
To be sure, issue gatsby clean, so that the .cache and public folders are purged.
Issue gatsby develop and send something through the form.
Confirm that is working and provide feedback.

This because at first glance, it looks like the service worker might be the culprit.

deeheber commented 5 years ago

Hey @jonniebigodes thanks for the reply!

I tried those things out and am still experiencing the same issue. Noticing it flashes a 404 page real quick and then redirects to the /success page when hitting submit if that's helpful?

Looked at my form submissions and did get one at 10:49AM PT from a Dustin at Gatsby...unsure how he successfully submitted that. I have my netlify setup to auto deploy when I push to master, so what's in master is what's up on the live netlify site.

DSchau commented 5 years ago

@deeheber I didn't do anything special--just filled out the form!

I did disable the service worker, but that seems like a sorta unlikely culprit.

Happy to debug this further, but at first glance--this seems like a Netlify issue rather than a Gatsby issue.

I may recommend checking out some of these resources:

deeheber commented 5 years ago

Sounds good @DSchau. I sent an email to Netlify asking for input from them.

jaysella commented 5 years ago

@deeheber Did you hear anything back from Netlify? I'm experiencing the same issue.

deeheber commented 5 years ago

@j-651 They said they thought it was the service worker (the gatsby-plugin-offline). I just gave up bc I'd like a reliable form anyway. Good it know it wasn't just me having the issue...thought I'm sorry you're also experiencing it.

valdezDev commented 5 years ago

I would love for someone to help me figure this out. I am having the same exact problem as deeheber. I've tried just about every little thing I could find after endless googling...

jonniebigodes commented 5 years ago

@valdezDev i picked up on your comment and i was able to connect Gatsby and netlify forms.

Here are the steps i took

Created a new Gatsby website, i used the hello world starter to keep things simple.
Created a component called dummyForm.js under src/components with the following content:
```
import React from "react"
```

export default () => ( <form name="contact" method="post" action="/success" data-netlify="true" data-netlify-honeypot="bot-field"

Name

Email

Message </div> <div> <input type="submit" value="Drop a line" /> <input type="reset" value="Eraser" /> </div> <p></form> )</p> </blockquote> <pre><code>- Added the component to `src\pages/index.js` transforming it into: ```javascript import React from "react" import DummyForm from "../components/dummyForm" export default () => ( <div> <h2>Send me a line</h2> <DummyForm/> </div> ) </code></pre> <ul> <li>Added a success page called <code>success.js</code>, so that i have something to show when the form submission is done with the following content: <pre><code class="language-javascript"> import React from "react"</code></pre></li> </ul> <p>export default () => (</p> <div> <h2>You dropped me a new line</h2> <h4> Congrats,i'll be sure to check it out when i can and add a reply</h4> </div> <p>)</p> <pre><code> - Deployed it to netlify and a the live version is hosted [here](https://elegant-haibt-5c920e.netlify.com/) and the code is [here](https://github.com/jonniebigodes/test_netlify_form_gatsby) - Checking the forms tab in nelify shows me the following: As you can see both submissions were added with success. ![test_netlify_form_items](https://user-images.githubusercontent.com/22988955/55674069-6b084e80-58a7-11e9-9273-099c84648a57.png) I hope my reproduction can help you solve your issue. If not. feel free to add a minimal reproduction of your issue. Feel free to provide feedback</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/valdezDev"><img src="https://avatars.githubusercontent.com/u/33325600?v=4" />valdezDev</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hi @jonniebigodes thank you so much for taking the time to help me troubleshoot this issue. I will start by posting the link to my repo: <a href="https://github.com/valdezDev/gatsby-portfolio">https://github.com/valdezDev/gatsby-portfolio</a> so you can refer to commits if needed. I know my code might look a little bit messy at the moment. I got my form to work by doing exactly what you suggested and found that it can only work on the index page. Do you think there's any way that I can have this wire up in the same way on my contact page with the same functionality? If not, I can readjust my index page to incorporate the contact form. Thanks again!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/CaribAlgorithm"><img src="https://avatars.githubusercontent.com/u/31681358?v=4" />CaribAlgorithm</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@valdezDev What I did to fix this issue, first confirm you have the hidden input field for the bot detection when using honey bot, make sure all the other essentials are covered you can refer to the <a href="https://www.netlify.com/docs/form-handling">Forms</a>.</p> <p>Once you can confirm you did all of this then go into your developers tab look at the Post data which can be found under the network tab. check to see if the request is truncating your post form name, you can confirm this by comparing the post parameters. First preserve the log then disable javascript sumbit a form request, confirm that the form is submitted to Netlify. If it was submitted then I urge you to refer to this piece of <a href="https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/src/pages/contact/index.js">code</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/nkov"><img src="https://avatars.githubusercontent.com/u/3165749?v=4" />nkov</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Strangely, having a field with name <code>email</code> and type <code>text</code> wouldn't post the form to Netlify for me, but once I changed the type of the field to <code>email</code> it worked.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gastongarcia"><img src="https://avatars.githubusercontent.com/u/190625?v=4" />gastongarcia</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Why did this get closed? I'm having the exact same issue as others here.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/KyleAMathews"><img src="https://avatars.githubusercontent.com/u/71047?v=4" />KyleAMathews</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@gastongarcia this isn't a Gatsby issue.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gastongarcia"><img src="https://avatars.githubusercontent.com/u/190625?v=4" />gastongarcia</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@KyleAMathews You're right. </p> <p>Here's a the fix that probably everyone needs:</p> <p>For Netlify Forms, if you're using a SSG like Gatsby, a hidden input field with the form name is needed. Without this it won't work.</p> <p><a href="https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2">https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2</a></p> <input type="hidden" name="form-name" value="Your-Form-Name" /> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/valdezDev"><img src="https://avatars.githubusercontent.com/u/33325600?v=4" />valdezDev</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>I will be soon publishing a YouTube video as well as a blog post going over this issue if anyone is interested. As I've stated before, I found that a correctly set up Netlify form can only work on the index page that the gatsby boilerplate provides the dev. I had it set up so that the user would have to navigate to a 'contact' page where the form would be and I would only get 404 errors. If anyone wants to peek at my unfinished portfolio code base, feel free! <a href="https://github.com/valdezDev/gatsby-portfolio">https://github.com/valdezDev/gatsby-portfolio</a></p> <p>On Sat, Apr 27, 2019 at 6:24 PM Gaston Garcia <a href="mailto:notifications@github.com">notifications@github.com</a> wrote:</p> <blockquote> <p>@KyleAMathews <a href="https://github.com/KyleAMathews">https://github.com/KyleAMathews</a> You're right.</p> <p>Here's a the fix that probably everyone needs:</p> <p>For Netlify Forms, if you're using a SSG like Gatsby, a hidden input field with the form name is needed. Without this it won't work.</p> <p><a href="https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2">https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2</a></p> <p>— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <a href="https://github.com/gatsbyjs/gatsby/issues/12040#issuecomment-487324295">https://github.com/gatsbyjs/gatsby/issues/12040#issuecomment-487324295</a>, or mute the thread <a href="https://github.com/notifications/unsubscribe-auth/AH6IEIB2PT72ULYHQNMYUK3PSTHDHANCNFSM4GZ2ZC7A">https://github.com/notifications/unsubscribe-auth/AH6IEIB2PT72ULYHQNMYUK3PSTHDHANCNFSM4GZ2ZC7A</a> .</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jonniebigodes"><img src="https://avatars.githubusercontent.com/u/22988955?v=4" />jonniebigodes</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Catch up on this and it looks like my reproduction not the one above, but the one directed specifically at valdezDev magically disappeared. Humm interesting......Anyway, I've made a pull request to valdezDev repository and you can see there the code i used to make it work.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gastongarcia"><img src="https://avatars.githubusercontent.com/u/190625?v=4" />gastongarcia</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>You can have the contact form wherever you want. As I posted above, the problem is not having the hidden input field. When using a Static Site Generator it's best to set it up that way. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jonniebigodes"><img src="https://avatars.githubusercontent.com/u/22988955?v=4" />jonniebigodes</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@duongthienlee if you check the network tab on your development tools you're probably seeing that you're getting some 404. The code below was the one used to correct the issue at hand, it worked for @valdezDev in my now missing comment when i made a reproduction for solving the issue for him.</p> <pre><code class="language-javascript">import React, { Component } from "react" import { navigate } from "gatsby" class ContactForm extends Component { constructor(props) { super(props) this.ContactForm = React.createRef() this.state = {} } encode = data => { return Object.keys(data) .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])) .join("&") } handleChange = e => { this.setState({ [e.target.name]: e.target.value }) } handleSubmit = e => { e.preventDefault() const form = this.ContactForm.current fetch("/", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: this.encode({ "form-name": form.getAttribute("name"), ...this.state, }), }) .then(response => { console.log("====================================") console.log(`${JSON.stringify(response, null, 2)}`) console.log("====================================") navigate(form.getAttribute("action")) }) .catch(error => { console.log("====================================") console.log(`error in submiting the form data:${error}`) console.log("====================================") }) } render() { return ( <form name="contact" method="post" action="/success/" data-netlify="true" data-netlify-honeypot="bot-field" onSubmit={this.handleSubmit} ref={this.ContactForm} > <input type="hidden" name="form-name" value="contact" /> <p hidden> <label> Don’t fill this out:{" "} <input name="bot-field" onChange={this.handleChange} /> </label> </p> <p> <label> Your name: <br /> <input type="text" name="name" onChange={this.handleChange} /> </label> </p> <p> <label> Your email: <br /> <input type="email" name="email" onChange={this.handleChange} /> </label> </p> <p> <label> Message: <br /> <textarea name="message" onChange={this.handleChange} /> </label> </p> <p> <button type="submit">Send</button> <input type="reset" value="Eraser" /> </p> </form> ) } } export default ContactForm</code></pre> <p>see if the code above helps you in any shape or form and report back. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jonniebigodes"><img src="https://avatars.githubusercontent.com/u/22988955?v=4" />jonniebigodes</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@duongthienlee glad to hear it. I'm leaving the code here, so that future people that come across this issue could try the code i posted and see if it helps them in any way, shape or form and with that avoid creating further issues in here. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/MirelesCloud"><img src="https://avatars.githubusercontent.com/u/6642959?v=4" />MirelesCloud</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>I'm having the same issue. I have actually been able to make this work on a previous project without a hitch, but have not been able to replicate it. I have adapted @jonniebigodes code, but I still keep getting a 404 error. Specifically, the console.log of the response returns empty.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rexsuit"><img src="https://avatars.githubusercontent.com/u/3633609?v=4" />rexsuit</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I'm having the same issue. I have actually been able to make this work on a previous project without a hitch, but have not been able to replicate it. I have adapted @jonniebigodes code, but I still keep getting a 404 error. Specifically, the console.log of the response returns empty.</p> </blockquote> <p>Can confirm that the stringified response returns empty, but the form does submit successfully for me.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jonniebigodes"><img src="https://avatars.githubusercontent.com/u/22988955?v=4" />jonniebigodes</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@orshick and @MirelesCloud the <code>console.log</code> was not supposed to be there, i forgot to remove it, i only used it when i was testing.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/conormcafee"><img src="https://avatars.githubusercontent.com/u/6804345?v=4" />conormcafee</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Strangely, having a field with name <code>email</code> and type <code>text</code> wouldn't post the form to Netlify for me, but once I changed the type of the field to <code>email</code> it worked.</p> </blockquote> <p>This worked for me also </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bmaclean"><img src="https://avatars.githubusercontent.com/u/25561427?v=4" />bmaclean</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>I'm still getting a 404 when submitting a Netlify form from my Gatsby site.</p> <p>Here's my code:</p> <pre><code>import React, {useState} from 'react'; import {navigate} from 'gatsby'; import {Button} from '@material-ui/core'; function encode(data) { return Object.keys(data) .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key])) .join('&'); } export default function PaperForm({children, ...rest}) { const handleSubmit = e => { e.preventDefault(); const form = e.target; fetch('/', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: encode({ 'form-name': form.getAttribute('name'), 'name': 'Brendan', 'email': 'brendan.maclean94@gmail.com', 'tel': '403.393.0000', 'description': 'Lorem ipsum sit amet' }) }) .then(response => { console.log('===================================='); console.log(`${JSON.stringify(response, null, 2)}`); console.log('===================================='); navigate(form.getAttribute("action")) }) .catch(error => { console.log('===================================='); console.log(`error in submiting the form data:${error}`); console.log('===================================='); }); }; const recaptchaSubmit = e => { setVerified(true); }; return ( <form name="contact" method="POST" action='/thanks' onSubmit={handleSubmit} data-netlify="true" data-netlify-honeypot="bot-field" {...rest} > {/* Used to detect spam bots */} <input type="hidden" name="bot-field" /> <input type="hidden" name="form-name" value="contact" /> ... other inputs <Button variant="contained" color="primary" type="submit" > Send </Button> </form> ); }</code></pre> <p>I just put some dummy data in the request, and otherwise have followed the instructions provided by Netlify and in this thread.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Ehesp"><img src="https://avatars.githubusercontent.com/u/842078?v=4" />Ehesp</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>EDIT: <a href="https://invertase.io/blog/debugging-netlify-forms-gatsbyjs">Made a blog post on debugging GatsbyJS forms with Netlify</a>.</p> <p>Hi all - just been stung by this & found the issue. Hopefully this will help people debug.</p> <ul> <li>Make sure your form has the correct attributes as others have explained. If doing an AJAX request like below, ensure you add the hidden <code>form-name</code> input:</li> </ul> <p><img src="https://user-images.githubusercontent.com/842078/61720330-7f8d2b80-ad5e-11e9-9d1f-3e141cd417b0.png" alt="image" /></p> <ul> <li> <p>Ensure all input/selects/textareas etc have a <code>name</code> attribute.</p> </li> <li> <p>Check Gatsby is actually outputting the form into the built HTML:</p> <ul> <li>Run <code>rm -rf .cache && rm -rf public && gatsby build</code>. </li> <li>Open your contact page html file, e.g. <code>public/contact/index.html</code>.</li> <li>Search the html output for <code><form</code></li> <li>Found: Yes - check all of the attributes are present which Netlify requires. There could be an issue with your form not being valid, see <a href="https://community.netlify.com/t/common-issue-how-to-debug-your-form/92">here</a> for a list of requirements.</li> <li>Found: No - Something in your setup is causing the server render of your page to not output the HTML. This could be something which delays rendering until the client loads, such as <code>redux-persist</code> (which renders content when the client has loaded, but nothing on the server).</li> </ul> </li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jaysella"><img src="https://avatars.githubusercontent.com/u/35548468?v=4" />jaysella</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@Ehesp thank you for the info.</p> <p>For whatever it's worth, you can also delete the <code>.cache</code> and public folders by running <code>gatsby clean</code>. See <a href="https://www.gatsbyjs.org/docs/gatsby-cli/#clean">here</a> for more info on the command.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/AlaaHassoun"><img src="https://avatars.githubusercontent.com/u/47949267?v=4" />AlaaHassoun</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hi all , i had the same problem and i solved it , all i did is Empty Cache and Hard Reload in the browser . To do so : press <strong>F12.</strong> This opens the Chrome Developer Tools. Next, right-click on the browser Reload button click on <strong>Emty Cache and hard reload</strong> . I hope it works for you all .</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/demandealeny"><img src="https://avatars.githubusercontent.com/u/3909476?v=4" />demandealeny</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hi everyone,</p> <p>Just had a similar problem, was sending the form, was redirected to my success page, but nothing on netlify.</p> <p>For me the issue was using <code>data-netlify</code> instead of <code>netlify</code>, i didn't investigate further (sorry) for the real reason why the <code>data-netlify</code> does not work.</p> <p>Here is the working code for my case</p> <pre><code class="language-js"><form name="form-contact" action="/contact-thank-you" className="tr" netlify="true" method="POST" netlify-honeypot="not-today" > <Input label="Ton Email" name="email" type="email" required /> <input name="not-today" hidden /> <input name="form-name" value="form-contact" hidden /> <Textarea label="Ton Message" name="message" required /> <Button icon="fa-paper-plane" type="submit"> Envoyer </Button> </form></code></pre> <p>Input, Textarea and Button components are just for styling, nothing fancy/hidden happening there.</p> <pre><code class="language-js">import React from "react" const Button = ({ children, icon, ...props }) => { return ( <button {...props} className="border-box f5 f4-ns tc mid-gray pv2 ph4 br-pill b--mid-gray bg-transparent bw1 ba" > {children} <i className={`fas ${icon} ml2`} /> </button> ) } export default Button</code></pre> <p>I hope this can help someone someday :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/huntzinger92"><img src="https://avatars.githubusercontent.com/u/42256116?v=4" />huntzinger92</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Here's a the fix that probably everyone needs:</p> <p>For Netlify Forms, if you're using a SSG like Gatsby, a hidden input field with the form name is needed. Without this it won't work.</p> <p><a href="https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2">https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2</a></p> </blockquote> <p>For what it's worth, this did NOT work for me using the framework Angular. It may still be necessary, but it didn't solve the problem.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jdrag12"><img src="https://avatars.githubusercontent.com/u/45635528?v=4" />jdrag12</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hello, I have read all the comments on this issue because I have the same problem. This <a href="https://github.com/sw-yx/gatsby-netlify-form-example-v2/blob/master/src/pages/contact.js">handleSubmit function </a>works for me in Local (200 res), but once deployed in Netlify, throws a 404 error. It is strange because I can see the page where I am redirected once the form is submitted(/success page).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mouhsnimohamed"><img src="https://avatars.githubusercontent.com/u/7353096?v=4" />mouhsnimohamed</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I had the same issue, it worked whene i added hidden fields to the form <code><input type="hidden" name="bot-field" /> <input type="hidden" name="form-name" value="contact" /></code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Lucascoorek"><img src="https://avatars.githubusercontent.com/u/47325777?v=4" />Lucascoorek</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jonniebigodes code worked for me! Thank you!. I would remember that when using hooks set state this way <code>setState({ ...state, [e.target.name]: e.target.value });</code> Also if you're using plugin-offline need to add <code>?no-cache=1</code> as posted in here: <a href="https://github.com/gatsbyjs/gatsby/issues/7997">https://github.com/gatsbyjs/gatsby/issues/7997</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jonniebigodes"><img src="https://avatars.githubusercontent.com/u/22988955?v=4" />jonniebigodes</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@Lucascoorek that's great. Glad to hear it that it worked for you. And it goes without saying, really no need to thank, just glad that the code/comment helped you aswell.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kevinlo123"><img src="https://avatars.githubusercontent.com/u/29260507?v=4" />kevinlo123</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Just wanted to let everyone know this helped me a ton so grateful for all of you, thanks! </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vladimir-vovk"><img src="https://avatars.githubusercontent.com/u/3159737?v=4" />vladimir-vovk</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Changing <code>data-netlify</code> form prop to <code>netlify</code> worked for me. Thanks guys! 🎉 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/appdesigns"><img src="https://avatars.githubusercontent.com/u/50584106?v=4" />appdesigns</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>What actually worked for me is to include the same form I had in my contact.component.hml in the index file and then added the hidden attribute: <strong>netlify netlify-honeypot="bot-field" hidden</strong> in the index.html file. It worked just like that, Let me know if you need more help.</p> <p>Finally: I was using all these form validators in angular, FormControl, FormGroup, Validators and that was a waste of time. Just follow the above and you should be good. </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

gatsbyjs / gatsby