Gatsby + Netlify + Recaptcha sends a GET request instead of POST

Hi everyone!

I’ve followed some other similar issues but without success. I’m trying to implement a similar simple contact form such as the one in the tutorial. However, my request sends a GET instead of a POST and I can’t figure out why. I’ve changed the library, from Axios to built-in fetch but the issue persists.

Here’s the code that handles the submit:

   const handleSubmit = event => {
event.preventDefault();
const data = {};
const recaptchaValue = recaptchaReference.current.getValue();
const scopedForm = [...formState];

let isValidForm = validateForm(scopedForm);
setFormState([...scopedForm]);

if (!isValidForm || !recaptchaValue) return false;

formInputs.forEach(input => data[input.name] = input.value);

fetch(`/`, {
  method: `POST`,
  headers: {
    'Accept': `application/x-www-form-urlencoded;charset=UTF-8`,
    'Content-Type': `application/x-www-form-urlencoded`,
  },
  body: encode({
    'form-name': `Contact Form`,
    ...data,
  }),
})
  .then(() => console.log(`OK`))
  .catch(error => alert(error));
  };

  const encode = data => {
return Object.keys(data)
  .map(key => encodeURIComponent(key) + `=` + encodeURIComponent(data[key]))
  .join(`&`);
  };

I’ve tried minor variants of the code above, all of them with a GET as an answer:

image

Locally, the form requests a POST.

You can test de form here: https://biancafiore.me/en/contact/

Thanks in advance!

I love the job you’re doing lads.

For everyone that may help:

Once I removed this line it worked since I was only accepting application/x-www-form-urlencoded;charset=UTF-8 requests.

1 Like