Here is my React component :
import React from "react"
export default function Contact() {
const [formData, setFormData] = React.useState({
name: "",
email: "",
subject: "",
message: ""
})
function formChangeHandler(event) {
const { name, value } = event.target;
setFormData((prevFormData) => {
return ({
...prevFormData,
[name]: [value]
})
})
}
function formSubmitHandler(event) {
event.preventDefault()
let form = new FormData(event.target);
console.log(typeof event.target)
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(form).toString(),
})
.then(() => console.log("Form successfully submitted"))
.catch((error) => alert(error));
}
return (
<section id="contact">
<h2 class="section-title">CONTACT</h2>
<form
class="contact-form"
data-netlify="true"
name="contact"
onSubmit={formSubmitHandler}
method="POST"
>
<p class="form-error"></p>
<input
id="contact-name"
name="name"
value={formData.name}
onChange={formChangeHandler}
type="text"
placeholder="Name"
autoComplete="off"
spellCheck="false"
required
minLength="2"
/>
<input
id="contact-email"
name="email"
value={formData.email}
onChange={formChangeHandler}
type="email"
placeholder="Email"
autoComplete="off"
spellCheck="false"
required
/>
<input
id="contact-subject"
name="subject"
value={formData.subject}
onChange={formChangeHandler}
type="text"
placeholder="Subject"
autoComplete="off"
spellCheck="false"
required
minLength="2"
/>
<textarea
id="contact-message"
name="message"
value={formData.message}
onChange={formChangeHandler}
placeholder="Message"
autoComplete="off"
spellCheck="false"
required
minLength="20"
/>
<button
class="form-submit"
type="submit">
Submit
</button>
</form>
</section>
)
}
When I console.log(event.target) in the formSubmitHandler function I can get my form as an object. But at the end I can’t get data when submit happen.
these are the console lines when I submitted :
Failed to load resource: the server responded with a status of 404
"Form successfully submitted"