Hi,
I’ve read the documentation and also the forum posts about forms, namely this one:
Since I have a react site, I created an html file with a replica of my form so that Netlify bots are able to parse the form fields. That works as expected and I have a “contactHuman” active form in my Netlify Forms panel.
Here is my form in reactjs (sorry for the long code):
<form
name="contactHuman"
method="POST"
action="thank-you"
data-netlify="true"
netlify-honeypot="bot-field"
onSubmit={this.handleSubmit}
>
<input
type="hidden"
name="form-name"
value="contactHuman"
/>
<p class="hidden">
<label>
Don’t fill this out if you're human:{" "}
<input name="bot-field" />
</label>
</p>
<label htmlFor="item01">
<input
type="text"
name="name"
id="item01"
value={this.state.name}
onChange={(e) => {
this.setState({ name: e.target.value });
}}
placeholder="Nome *"
/>
</label>
<label htmlFor="item02">
<input
type="text"
name="email"
id="item02"
value={this.state.email}
onChange={(e) => {
this.setState({ email: e.target.value });
}}
placeholder="Email *"
/>
</label>
<label htmlFor="item03">
<input
type="text"
name="subject"
id="item03"
value={this.state.subject}
onChange={(e) => {
this.setState({ subject: e.target.value });
}}
placeholder="Assunto"
/>
</label>
<label htmlFor="item04">
<textarea
type="text"
id="item04"
name="message"
value={this.state.message}
onChange={(e) => {
this.setState({ message: e.target.value });
}}
placeholder="Mensagem"
/>
</label>
<button
className="rn-button-style--2 btn-solid"
type="submit"
value="submit"
name="submit"
id="mc-embedded-subscribe"
>
Enviar
</button>
</form>
And here is the form part of the netlifyneedsthisformyform.html I placed in the /public folder:
<form
name="contactHuman"
method="POST"
action="thank-you"
data-netlify="true"
netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contactHuman" />
<p class="hidden">
<label>Don’t fill this out if you're human: <input name="bot-field" /></label>
</p>
<label htmlFor="item01">
<input
type="text"
name="name"
id="item01"
placeholder="Nome *"
/>
</label>
<label htmlFor="item02">
<input
type="text"
name="email"
id="item02"
placeholder="Email *"
/>
</label>
<label htmlFor="item03">
<input
type="text"
name="subject"
id="item03"
placeholder="Assunto"
/>
</label>
<label htmlFor="item04">
<textarea
type="text"
id="item04"
name="message"
placeholder="Mensagem">
</textarea>
</label>
<button className="rn-button-style--2 btn-solid" type="submit" value="submit"
name="submit" id="mc-embedded-subscribe">Enviar</button>
</form>
Netlify recognizes the existence of the form, but when I submit it, nothing is displayed in the submissions form and it stays at 0 verified submissions and 0 spam submissions.
The form’s handleSubmit function is:
handleSubmit = e => {
e.preventDefault();
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contactHuman", ...this.state })
})
.then(() => alert("Obrigado!"))
.catch(error => alert(error));
};
And it seems to be working ok, since I’ve used the developer tools and I see that it sends a POST request (status code:200) with the following Form Data:
form-name=contactHuman&name=J.%20Alberto&email=jalb%40mailserv.com&subject=Need%20support&message=Please%20get%20back%20to%20me
As a result, I get the expected alert popup (with “Obrigado!”, portuguese for "Thank you!), but I’m not forwarded to the thank-you page, and the submitted data doesn’t reach Netlify. As I mentioned, the “submissions from contactHuman” panel stay at zero (both verified and spam).
I read the docs, also read many forum discussions, and tried literally dozens of variations for many hours, but to no avail.
Maybe there’s some problem with my code or maybe there’s some other thing I should do?
This is quite frustrating so I’d really appreciate your help. Thank you very much!
Filipe