Form submissions not received in dashboard anymore

Support
1

Dear community,

I need your help for debugging a form issue that I have with my website. The form I implemented used to work well until June 15th, which is the last time I received a form submission.

I am using Formik, here is the component:

const ContactForm = () => {
  const { t, i18n } = useTranslation(["common", "contact"])
  const locale = i18n.language

  const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&")
  }
  return (
    <Formik
      initialValues={{
        firstName: "",
        lastName: "",
        email: "",
        message: "",
      }}
      validationSchema={Yup.object({
        firstName: Yup.string()
          .max(15, t("contact:validation.firstname.max"))
          .required(t("contact:validation.firstname.required")),
        lastName: Yup.string()
          .max(20, t("contact:validation.lastname.max"))
          .required(t("contact:validation.lastname.required")),
        email: Yup.string()
          .email(t("contact:validation.email.isEmail"))
          .required(t("contact:validation.email.required")),
        message: Yup.string().required(
          t("contact:validation.message.required")
        ),
        optin: Yup.boolean(),
      })}
      onSubmit={async (values, { setSubmitting }) => {
        if (values.optin === true) {
          await addToMailchimp(values.email)
        }
        console.log(values)
        setSubmitting(false)

        fetch("/", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: encode({ "form-name": "contact", ...values }),
        })
          .then(() => navigate(`/${locale}/${t("common:slugs.success")}`))
          .catch(error => alert(t("contact:submit.error")))
      }}
    >
      <StyledForm
        name="contact"
        method="post"
        data-netlify="true"
        data-netlify-honeypot="bot-field"
      >
        {/* Hidden inputs for netlify deploy */}
        <input type="hidden" name="form-name" value="contact" />
        <input type="hidden" name="bot-field" />
        <StyledLabel htmlFor="firstName">
          {t("contact:form.labels.firstname")}
        </StyledLabel>
        <StyledField
          name="firstName"
          type="text"
          placeholder={t("contact:form.placeholders.firstname")}
        />
        <StyledErrorMessage name="firstName" component="span" />
        <StyledLabel htmlFor="lastName">
          {t("contact:form.labels.lastname")}
        </StyledLabel>
        <StyledField
          name="lastName"
          type="text"
          placeholder={t("contact:form.placeholders.lastname")}
        />
        <StyledErrorMessage name="lastName" component="span" />
        <StyledLabel htmlFor="email">
          {t("contact:form.labels.email")}
        </StyledLabel>
        <StyledField
          name="email"
          type="email"
          placeholder={t("contact:form.placeholders.email")}
        />
        <StyledErrorMessage name="email" component="span" />
        <StyledLabel htmlFor="message">
          {t("contact:form.labels.message")}
        </StyledLabel>
        <StyledField
          name="message"
          component="textarea"
          rows={8}
          placeholder={t("contact:form.placeholders.message")}
        />
        <StyledErrorMessage name="message" component="span" />
        <Optin>
          <Field name="optin" type="checkbox" rows={8} />
          <StyledLabel htmlFor="optin">
            {t("contact:form.labels.newsletter")}
          </StyledLabel>
          <StyledErrorMessage name="optin" component="span" />
        </Optin>
        <PrimaryButton type="submit"> {t("contact:form.button")}</PrimaryButton>
      </StyledForm>
    </Formik>
  )
}

This exact same code use to work properly with form submissions, and there is no error message when form is submitted by the user.

However, I receive spammy emails, last received was 9 days ago.

I would be grateful if someone could help me find the reason for this issue!

Website info:

  • netlify site name: https://la-perle-events.netlify.app/

Thanks

2

Hey @Kevinnko,
I went to your siteā€™s /contact page to look for the misbehaving form, but it looks like youā€™ve maybe replaced the form with just an email address. In order to troubleshoot, weā€™ll need to check out the live form- would it be possible to deploy it on a separate site so we can take a look?

3

Hello Jen,

Thanks for your reply! Indeed I removed the form from the live site, you can find it here: https://staging.la-perle-events.com/en/contact

Let me know if you need anything else.

Thank you

5

Hey @Kevinnko,
I just took a look at our logs and sent some test submissions and hereā€™s what I see:

  • on form submission, the web request is sent to us with the form data, which seems to have the correct encoding and the right content-type header
  • our server does receive a POST request
  • I could not see the form submissions in our database, confirming what you are experiencing

One interesting thing was that the POST requests seem to get redirected to the /en path- is it possible that you implemented new redirect rules around mid-June? If so, that could be our answer and weā€™ll have to figure out how to not redirect your submission data.

6

Hi @jen,

Thanks for taking a look. There is indeed a permanent redirect from path ā€˜/ā€™ to ā€˜/enā€™, but it was implemented around February or March, long before my form issue. Would it be possible to fetch a complete URL when submitting the form in order to go around this redirect rule, if thatā€™s the problem ?

7

Hey @Kevinnko,
On your staging branch, Iā€™d try removing some of the catch-all redirect rules to see if youā€™re able to at least get a submission back. If the form name is the same, the submission will go to that same form in your ā€œformsā€ tab. If that makes a difference, let us know and we can think about how to accomplish what you want with some different redirect rules.

My gut says that this behavior is related to code changes on your side since we see many people in the forum struggling with getting forms to work initially, but have not seen any across the board ā€œsubmissions are goneā€ reports. I wish I had better advice for you! Let us know how it goes.

8

Hey @jen,
So I tried and removed the redirect rules as you suggested, but the result is the same. I have no idea how to solve that, if anybody encountered the same problem and found a way, thatā€™d be great.

9

Another idea would be to add a super simple form on a non-production branch with your existing redirects, like:

<form action="/" method="POST" name="contact" data-netlify="true">
    <label>Message:</label>
    <textarea name="message"></textarea>
    <input type="submit" value="submit">
</form>

If you get a submission, that would suggest the issue is not redirect-related and we could focus on your form code. If you donā€™t, we can keep poking at the redirects.

1 Like
10

Hello @jen

I finally solved the issue, which was indeed related to the redirect rules I put in place. So thanks again for helping!

Cheers

1 Like
11

Amazing! Thanks so much for reporting back. That was such a head scratcher, really glad to hear that you got to the bottom of it :raised_hands:

1 Like