This form was working when I first launched the site, however, it’s been a while since mail was getting through. I noticed spam messages were still getting through 
I recreated the form here, and this seems to work.
NOTE: The did not add i18n or a conditional redirection link to the recreated form. However, I can’t see why they are affecting the original form.
Form component which is currently not working
import React, { useContext } from "react"
import { GlobalContext } from "../../context/GlobalContext"
import { navigate } from "gatsby"
import { Form, Input, message } from "antd"
import { UserOutlined, MailOutlined } from "@ant-design/icons"
import { FormattedMessage, useIntl } from "react-intl"
const { TextArea } = Input
function encode(data) {
return Object.keys(data)
.map(key => encodeURIComponent(key) + `=` + encodeURIComponent(data[key]))
.join(`&`)
}
const ContactForm = () => {
const { lang } = useContext(GlobalContext)
const intl = useIntl()
const formName = `contact page v1` // Must update the form name if you add or remove fields from the form
const handleSubmit = values => {
if (values[`bot-field`] === undefined) {
delete values[`bot-field`]
}
fetch(`/`, {
method: `POST`,
headers: { "Content-Type": `application/x-www-form-urlencoded` },
body: encode({
"form-name": formName,
...values,
}),
})
.then(() => showSuccess(values))
.catch(error => showError(error))
}
const sendConfirmation = intl.formatMessage({
id: "contact.form.sendConfirmation",
defaultMessage: "Your message has been sent.",
description: "Message shown after successful submission of form",
})
function thanksLink() {
if (lang === "en") {
return `/en/thanks`
} else if (lang === "de") {
return `/de/merci`
}
}
const showSuccess = values => {
message.success(sendConfirmation, 3).then(() =>
navigate(thanksLink(), {
state: { values },
})
)
}
const showError = error => {
message.error(
<FormattedMessage
id="contact.form.failedSendMessage"
defaultMessage="There was an error sending your form. Please try another form of contact."
desctiption="Contact form message after submitting if form failed"
/>
)
console.log(error)
}
const namePlaceholder = intl.formatMessage({
id: "contact.form.placeholder.name",
defaultMessage: "Name",
description: "Contact form placeholder for name field",
})
const emailPlaceholder = intl.formatMessage({
id: "contact.form.placeholder.email",
defaultMessage: "Email",
description: "Contact form placeholder for email field",
})
const messagePlaceholder = intl.formatMessage({
id: "contact.form.placeholder.message",
defaultMessage: "Message",
description: "Contact form placeholder for message field",
})
return (
<>
{/*
This defines how your form is setup for the Netlify bots.
Users will not see or interact with this form.
*/}
<form
name={formName}
data-netlify="true"
data-netlify-honeypot="bot-field"
hidden
>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
<Form name="cf" method="post" onFinish={handleSubmit} layout="vertical">
{/* This is the hidden field that the netlify-honeypot uses. */}
<Form.Item
label="Don't fill this out"
className={`hidden`}
style={{ display: `none` }}
name="bot-field"
>
<Input type={`hidden`} />
</Form.Item>
<Form.Item aria-label="Name" name="name">
<Input
placeholder={namePlaceholder}
prefix={<UserOutlined className="site-form-item-icon" />}
/>
</Form.Item>
<Form.Item
aria-label="Email"
rules={[
{
required: true,
type: `email`,
message: (
<FormattedMessage
id="contact.form.required.email"
defaultMessage="Please enter your email"
description="validation error message for email field"
/>
),
},
]}
name="email"
>
<Input
placeholder={emailPlaceholder}
prefix={<MailOutlined className="site-form-item-icon" />}
/>
</Form.Item>
<Form.Item
aria-label="Message"
rules={[
{
required: true,
message: (
<FormattedMessage
id="contact.form.required.message"
defaultMessage="Please enter your message"
desctiption="validation error message for message field"
/>
),
},
]}
name="message"
>
<TextArea placeholder={messagePlaceholder} rows={5} />
</Form.Item>
<Form.Item>
<button
type="primary"
htmltype="submit"
disabled={false}
className="inline rounded px-4 py-2 bg-apgreen hover:bg-apgreendark text-white tracking-wide transition duration-200"
>
<FormattedMessage
id="contact.form.button"
defaultMessage="Send"
description="Contact form submit button text"
/>
</button>
</Form.Item>
</Form>
</>
)
}
export default ContactForm
I’m not really sure what to try next in order to troubleshoot this, so any help would be greatly appreciated!
Thanks!
on this for you and see if we have any ideas.
so I think I need to find another solution, which will mean you can’t troubleshoot it.