Gatsby form submissions not showing in Netlify

I’m having trouble getting Gatsby form submissions to show up in my Netlify dashboard. I feel like I’ve done all the things. I am submitting the form via JS, including the form-name value. I have added a static copy of my form to Gatsby’s static folder. I’ve read through the support guides listed in Debugging support and help for Netlify Forms – start here!

The only thing I can’t seem to figure out that may be the issue was mentioned in this guide, that the fetch request is being redirected. When submitting my form the fetch request is being redirected, but at this point, I’m honestly not sure how to prevent that.

Any help is greatly appreciated!

Here is a link to the deploy preview of the contact page:

Here is a link to the repo I’m working in: GitHub - jacobmc/carrigtwohill-baptist-group: Website project for Carrigtwohill Baptist Group

Here is my contact form component in its entirety:

import React, { useState } from "react"
import styled from "styled-components";
import ReCAPTCHA from "react-google-recaptcha";

const Messages = styled.div`
  		margin-bottom: 15px;
		p {
		  margin-bottom: 0;
		  padding: 5px 10px;
		  border-radius: 5px;
  		.error {
		  background: rgba(171, 35, 70, 0.8);
		  color: #fff;

	    .success {
		  background: rgba(3, 121, 113, 0.7);
		  color: #fff;

const Form = styled.form`
		max-width: 600px;
		.hidden {
			display: none;
		.field {
			display: grid;
			grid-template-columns: 1fr;
			margin-bottom: 25px;
			label {
				.field-label {
					font-weight: 500;
					font-size: 1.125rem;
		textarea {
		  padding: 3px 8px;
		input[type=submit] {
			display: block;
			width: 100%;
			max-width: 200px;
			background: #037971;
			margin-top: 50px;
			padding: 5px;
			color: #E8FFFF;
			text-align: center;
			text-decoration: none;
			font-family: "Roboto", sans-serif;
			font-size: 1.125rem;
			border-radius: 8px;
			border: none;

export default function ContactForm() {
	const [name, setName] = useState(''),
		[email, setEmail] = useState(''),
		[message, setMessage] = useState(''),
		recaptchaRef = React.createRef()

	const submitForm = event => {

		// Validate that the user completed recaptcha
		const recaptchaValue = recaptchaRef.current.getValue(),
			  msgContainer = document.getElementById('messages'),
			  errors = [],
			  messages = []

		if ( recaptchaValue === '' ) {
			errors.push('Please complete the ReCAPTCHA check.');

		msgContainer.innerHTML = '';

		if ( errors.length ) {
			errors.forEach( error => {
				let errorP = document.createElement('p')


		// Send Form Data
		let formData = new FormData(

		fetch( '/', {
			method: "POST",
			headers: { "Content-Type": "application/x-www-form-urlencoded" },
			body: new URLSearchParams(formData).toString()
		}).then(response => {
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`)
			} else {
				messages.push('Form successfully submitted')

			if ( messages.length ) {
				messages.forEach( msg => {
					let msgP = document.createElement('p')
		}).catch( error => {

			if ( errors.length ) {
				errors.forEach( error => {
					let errorP = document.createElement('p')

	return (
			<Messages id={'messages'} />
			<Form id={'contact-form'} name={"Contact"} data-netlify={"true"} data-netlify-recaptcha={"true"} onSubmit={submitForm}>
				<input type={"hidden"} name={"form-name"} value={"Contact"} />

				<div className={"field"}>
					<label htmlFor={"name"}>
						<span className={"field-label"}>Name:</span>
					<input id={"name"} name={"name"} type={"text"} value={name} onChange={e => setName(} required />

				<div className="field">
					<label htmlFor={"email"}>
						<span className={"field-label"}>Email address:</span>
					<input id={"email"} name={"email"} type={"email"} value={email} onChange={e => setEmail(} required />

				<div className="field">
					<label htmlFor={"message"}>
						<span className={"field-label"}>Message:</span>
					<textarea id={"message"} name={"message"} value={message} onChange={e => setMessage(} required />

				<ReCAPTCHA ref={recaptchaRef} sitekey={process.env.GATSBY_RECAPTCHA_SITE_KEY} />

				<input type={"submit"} value={"Send message"} />

Hey @jacobmcdev,

Could you try changing the fetch URL? Maybe try pointing it to some other page, or add a blank HTML page to the static folder and post to that?

I added a blank submit-form.html file to my static folder and updated the fetch URL to /submit-form.html and the request is still redirecting.

Hi @jacobmcdev

Did you remove the action property from the <form>?

Yes, I removed the method and action from both the <form> in the component and the static form.

I changed the above to that below and it works without the redirect

<Form id={'contact-form'} name={"Contact"} onSubmit={submitForm}>

Note data-netlify and data-netlify-recaptcha go in the placeholder form (as they are) not in the JS rendered form. Also as you are using Stateful React this is another way of doing things.

I removed the data-netlify and data-netlify-recaptcha parameters as suggested but it is still redirecting the request.

Perhaps I should note that the redirect only appears to happen on Netlify’s servers. I don’t get the redirect locally.

I also used Netlify
I used the same form name (but different placeholder filename) and removed the reCAPTCHA (which, as you are using your own implementation of reCAPTCHA, don’t believe you need the netlify-recaptcha anyway.)

Well, that’s really odd, I must be missing some other difference in our implementations.

I removed the netlify-recaptcha parameter from the static form and it’s still redirecting the submissions.

The only difference (I believe) in the two implementations is that which I used for testing was a very basic CRA setup with the form as a component and yours is a Gatsby project which is only the same in it used React under the hood.

I apologize for not posting back here for a while. I’m still struggling to get this fixed. I feel like at this point the issue has to be something that I’m just overlooking that I’ll probably kick myself for later.

For the life of me, I can’t seem to get the form to submit without redirecting the request.

What is CRA?

FINALLY! I finally figured out the issue and it was something dumb that I overlooked. Apparently, I missed that Netlify requires the environment variables SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET when using your own Recaptcha. This is what was causing the redirect on submission. This post pointed me in the right direction.

Thanks for everyone who helped!


Hey there, @jacobmcdev :wave:

Thank you so much for coming back and sharing your solution as well as the thread that got you on the right track. This type of knowledge sharing is truly beneficial for future members who encounter something similar.

Happy building :netlisparkles:

1 Like