Home
Support Forums

Form submissions not appearing despite 200 request and hours of testing

NETLIFY SITE NAME: https://keen-dubinsky-a5bf69.netlify.app/

I have a form in a Gatsby site. The form uses react-hook-form for validation. The request redirects to the root “/” page as set up and I can see the request is successful and the data is sent. I have tried to use form data that would not be spam filtered. I have tried submitting from both chrome and firefox.

Can you verify if any submissions are making it to Netlify? Do you see any obvious mistakes? I’ve tried every troubleshooting post on here and stackoverflow I could find. One piece of info I never encountered was how long it should take for a submission to show up in the site settings. This could be helpful info for others.

Thanks so much.

Here is the successful request info:

Request URL: https://keen-dubinsky-a5bf69.netlify.app/
Request Method: POST
Status Code: 200 
Remote Address: 46.101.121.244:443
Referrer Policy: strict-origin-when-cross-origin
age: 2
cache-control: no-store
content-type: text/html
date: Mon, 15 Nov 2021 06:02:27 GMT
server: Netlify
x-nf-request-id: 01FMH3144ZKAGZTZSDZ4TR28XB
:authority: keen-dubinsky-a5bf69.netlify.app
:method: POST
:path: /
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8
content-length: 224
content-type: application/x-www-form-urlencoded
origin: https://keen-dubinsky-a5bf69.netlify.app
referer: https://keen-dubinsky-a5bf69.netlify.app/contact
sec-ch-ua: "Google Chrome";v="95", "Chromium";v="95", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
form-name: contact
bot-field: 
name: Michael Hope
email: michaelhope@outlook.com
telephone: 689934433
comments: It's all looking good. Email me or call me to set up a time and or date. Thanks!

Here is the JSX from the contact component:

import React from "react";
import Layout from "../components/Layout";
import { useForm } from "react-hook-form";
import { navigate } from "gatsby-link";
const encode = (data) => {
  return Object.keys(data)
    .map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&");
};
export default function Contact() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm();

  const onSubmit = (data, e) => {

    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "contact",
        ...data,
      }),
    })
      .then((response) => {
        navigate("/");
        reset();
        console.log(response);
      })
      .catch((error) => console.log(error));
    e.preventDefault();
  };

  return (
    <Layout>
      <section className="contact">
        <p className="contact__heading-primary">contact</p>
        <form
          name="contact"
          method="POST"
          action="/"
          netlify
          data-netlify-honeypot="bot-field"
          onSubmit={handleSubmit(onSubmit)}
          className="contact__form"
        >
          <input type="hidden" name="hidden-input" value="contact-form" />
          <input
            type="text"
            className="visually-hidden"
            name="bot-field"
            {...register("bot-field")}
          />
          <div className="form__element">
            <label className="visually-hidden" htmlFor="name">
              name
            </label>
            <input
              name="name"
              type="text"
              placeholder="name"
              {...register("name", {
                required: "name required",
              })}
            />
            {errors.name && (
              <p className="form__error-message">{errors.name.message}</p>
            )}
          </div>

          <div className="form__element">
            <label htmlFor="email" className="visually-hidden">
              email
            </label>
            <input
              name="email"
              type="text"
              placeholder="email"
              {...register("email", {
                required: "email required",
                pattern: {
                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                  message: "enter a valid e-mail address",
                },
              })}
            />
            {errors.email && (
              <p className="form__error-message">{errors.email.message}</p>
            )}
          </div>

          <div className="form__element">
            <label className="visually-hidden" htmlFor="telephone">
              telephone number:
            </label>
            <input
              name="telephone"
              type="text"
              placeholder="telephone (optional)"
              {...register("telephone", {
                minLength: { value: 7, message: "must be at least 7 digits" },
                pattern: {
                  value: /^([0-9]*)$/,
                  message: "enter a valid telephone number",
                },
              })}
            />
            {errors.telephone && (
              <p className="form__error-message">{errors.telephone.message}</p>
            )}
          </div>

          <div className="form__element">
            <label className="visually-hidden" htmlFor="comments">
              questions or comments:
            </label>
            <textarea
              name="comments"
              type="text"
              placeholder="questions or comments"
              {...register("comments", {
                required: "enter questions or comments",
              })}
            />
            {errors.comments && (
              <p className="form__error-message">{errors.comments.message}</p>
            )}
          </div>
          <input type="submit" className="btn--submit" value="SEND" />
        </form>
      </section>
    </Layout>
  );
}

Hi @jncdv

There is an error in HTML below

As per Work with JavaScript-rendered forms the hidden input should look like

<input type="hidden" name="form-name" value="name_of_my_form" />

where name_of_my_form is the same as that of the name attribute in the <form> (i.e. in your case, contact.)

@coelmay Thanks for the quick response!

I’m still not seeing anything in the form submissions panel on Netlify. I have tried two ways:

        <form
          name="contact-form"
          method="POST"
          action="/"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          onSubmit={handleSubmit(onSubmit)}
          className="contact__form"
        >
          <input type="hidden" name="contact-form" value="contact-form" />

and with the hidden input name set to name="form-name"

How long does it take for a submission to appear? Thanks again

It literally needs to read `name=“form-name” so the above should read

<input type="hidden" name="form-name" value="contact-form" />

@coelmay

I tried it that way as well and still have no submissions in the Netlify panel :confused:
I just changed it back to this, redeployed and sent a new submission. Still nothing

        <form
          name="contact-form"
          method="POST"
          action="/"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          onSubmit={handleSubmit(onSubmit)}
          className="contact__form"
        >
          <input type="hidden" name="form-name" value="contact-form" />

Have at look at this Gatsby form example which might help determine if there is something missing in your code and what

@coelmay thanks for the link
I have completely replaced the contact page with that example. The only thing I changed was using my own layout component and I wrapped the page in a page div for styling. I redeployed and submitted a form and still don’t see any submissions. I still get a 200 response and the payload from the form is being delivered.

Any ideas?

Thanks again for your time

Oh my god. I have been looking at the wrong tab on the admin panel. I have used 10/100 form submissions but didn’t realize it because under Site Settings → Forms, it only gives a daily update, not the current number of submissions. I was assuming that I had to wait for a submission to come in before being able to see them. @coelmay thanks again for your time. At the very least I’ve learned a lot while pulling my hair out over this. Feel free to delete or keep this up in case someone has the same issue…

2 Likes