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