Form captures spam but not legitimate messages

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

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!

New findings: I created a new branch to test the form. Stripped it back to a basic form, and gradually added in antd styling, i18n, conditionals etc.

Each time, I re-built the site, checked the preview, and it was working.

I ended up with exactly the same code, merged the branch (just in case), re-built, tested the form, and again the message is not coming through.

So confused.

Hey, I don’t want to be a pain with this… but super curious why this might happen and what I can do to fix it?

I just created a new branch, only added a title to the form, and changed the form name for separation in Netlify.

The form on the new branch works.
The form on the master branch does not.

that is so strange - and sorry we haven’t been able to really do anything with this yet!

I will try and get some :eyes: on this for you and see if we have any ideas.

1 Like