Not Receiving Form Submissions via Netlify Forms

[deeheber]

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:

1. Go to https://deeheber.netlify.com/contact
2. Fill out and submit the form
3. 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]

@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:

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

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

[deeheber]

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]

@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:

• Form handling with Gatsby + Netlify
• Gatsby Netlify Form example

[deeheber]

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

[jaysella]

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

[deeheber]

@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]

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]

@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"
  >
    <input type="hidden" name="bot-field" />
    <div>
      <label htmlFor="name">Name</label>
      <input type="text" name="name" id="name" />
    </div>
    <div>
      <label htmlFor="email">Email</label>
      <input type="text" name="email" id="email" />
    </div>
    <div>
      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" rows="6" required />
    </div>
    <div>
      <input type="submit" value="Drop a line" />
      <input type="reset" value="Eraser" />
    </div>
  </form>
)

• Added the component to src\pages/index.js transforming it into:

import React from "react"
import DummyForm from "../components/dummyForm"
export default () => (
  <div>
    <h2>Send me a line</h2>
    <DummyForm/>
  </div>
)

• Added a success page called success.js, so that i have something to show when the form submission is done with the following content:

import React from "react"

export default () => (
  <div>
    <h2>You dropped me a new line</h2>
    <h4> Congrats,i&#39;ll be sure to check it out when i can and add a reply</h4>
  </div>
)

• Deployed it to netlify and a the live version is hosted here and the code is here
• Checking the forms tab in nelify shows me the following:

As you can see both submissions were added with success.

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

[valdezDev]

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: https://github.com/valdezDev/gatsby-portfolio 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!

[CaribAlgorithm]

@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 Forms.

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 code.

[nkov]

Strangely, having a field with name email and type text wouldn't post the form to Netlify for me, but once I changed the type of the field to email it worked.

[gastongarcia]

Why did this get closed? I'm having the exact same issue as others here.

[KyleAMathews]

@gastongarcia this isn't a Gatsby issue.

[gastongarcia]

@KyleAMathews You're right.

Here's a the fix that probably everyone needs:

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.

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2

[valdezDev]

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! https://github.com/valdezDev/gatsby-portfolio

…

On Sat, Apr 27, 2019 at 6:24 PM Gaston Garcia ***@***.***> wrote: @KyleAMathews <https://github.com/KyleAMathews> You're right. Here's a the fix that probably everyone needs: 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. https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12040 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH6IEIB2PT72ULYHQNMYUK3PSTHDHANCNFSM4GZ2ZC7A> .

[jonniebigodes]

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.

[gastongarcia]

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.

[jonniebigodes]

@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.

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

see if the code above helps you in any shape or form and report back.

[jonniebigodes]

@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.

[MirelesCloud]

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.

[rexsuit]

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.

Can confirm that the stringified response returns empty, but the form does submit successfully for me.

[jonniebigodes]

@orshick and @MirelesCloud the console.log was not supposed to be there, i forgot to remove it, i only used it when i was testing.

[conormcafee]

Strangely, having a field with name email and type text wouldn't post the form to Netlify for me, but once I changed the type of the field to email it worked.

This worked for me also

[bmaclean]

I'm still getting a 404 when submitting a Netlify form from my Gatsby site.

Here's my 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': '[email protected]',
				'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>
	);
}

I just put some dummy data in the request, and otherwise have followed the instructions provided by Netlify and in this thread.

[Ehesp]

EDIT: Made a blog post on debugging GatsbyJS forms with Netlify.

Hi all - just been stung by this & found the issue. Hopefully this will help people debug.

• Make sure your form has the correct attributes as others have explained. If doing an AJAX request like below, ensure you add the hidden form-name input:

• Ensure all input/selects/textareas etc have a name attribute.

• Check Gatsby is actually outputting the form into the built HTML:

  • Run rm -rf .cache && rm -rf public && gatsby build.
  • Open your contact page html file, e.g. public/contact/index.html.
  • Search the html output for <form
    • Found: Yes - check all of the attributes are present which Netlify requires. There could be an issue with your form not being valid, see here for a list of requirements.
    • 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 redux-persist (which renders content when the client has loaded, but nothing on the server).

[jaysella]

@Ehesp thank you for the info.

For whatever it's worth, you can also delete the .cache and public folders by running gatsby clean. See here for more info on the command.

[AlaaHassoun]

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 F12. This opens the Chrome Developer Tools. Next, right-click on the browser Reload button click on Emty Cache and hard reload . I hope it works for you all .

[demandealeny]

Hi everyone,

Just had a similar problem, was sending the form, was redirected to my success page, but nothing on netlify.

For me the issue was using data-netlify instead of netlify, i didn't investigate further (sorry) for the real reason why the data-netlify does not work.

Here is the working code for my case

<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>

Input, Textarea and Button components are just for styling, nothing fancy/hidden happening there.

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

I hope this can help someone someday :)

[huntzinger92]

Here's a the fix that probably everyone needs:

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.

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#step-2

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.

[jdrag12]

Hello, I have read all the comments on this issue because I have the same problem. This handleSubmit function 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).

[mouhsnimohamed]

I had the same issue, it worked whene i added hidden fields to the form
<input type="hidden" name="bot-field" /> <input type="hidden" name="form-name" value="contact" />

[Lucascoorek]

@jonniebigodes code worked for me! Thank you!. I would remember that when using hooks set state this way setState({ ...state, [e.target.name]: e.target.value });
Also if you're using plugin-offline need to add ?no-cache=1 as posted in here: #7997

[jonniebigodes]

@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.

[kevinlo123]

Just wanted to let everyone know this helped me a ton so grateful for all of you, thanks!

[vladimir-vovk]

Changing data-netlify form prop to netlify worked for me. Thanks guys! 🎉

[appdesigns]

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:
netlify netlify-honeypot="bot-field" hidden in the index.html file. It worked just like that, Let me know if you need more help.

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.