Form in Gatsby site not receiving submissions

site: https://blissful-shaw-3eb3e6.netlify.app/

I’ve followed the docs and tuts found here:

I see this in my dashboard:
"Waiting on those submissions…

We have detected an active form setup but haven’t received submissions yet – hang in there!"

I get successful POST requests:

Request Method: POST
Status Code: 200 
...
server: Netlify
status: 200
...
:authority: blissful-shaw-3eb3e6.netlify.app
:method: POST
:path: /
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
content-length: 100
content-type: application/x-www-form-urlencoded
origin: https://blissful-shaw-3eb3e6.netlify.app
pragma: no-cache
referer: https://blissful-shaw-3eb3e6.netlify.app/
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_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36
form-name: contact
firstName: Mike
lastName: Test
email: test@test.com
subject: testing
message: testing

My form looks like this:

import { navigate } from 'gatsby-link';

import { HomepageIntro } from '../components/homepageIntro';
import { LayoutHomepage } from '../components/layoutHomepage';
import SEO from '../components/seo';
import { FormInput } from '../components/patterns/formInput';

const encode = data => {
  return Object.keys(data)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
    .join('&');
};

const IndexPage = () => {
  const [introViewed, setIntroViewed] = useState(false);
  const [formState, setFormState] = React.useState({});

  const handleChange = e => {
    setFormState({ ...formState, [e.target.name]: e.target.value });
  };

  const handleSubmit = e => {
    e.preventDefault();
    const form = e.target;
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'),
        ...formState,
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch(error => alert(error));
  };

  useEffect(() => {
    const windowGlobal = typeof window !== 'undefined' && window;

    if (windowGlobal) {
      setIntroViewed(localStorage.getItem('introViewed'));
    }
  }, []);

  return (
    <Fragment>
      {!introViewed && <HomepageIntro />}
      <LayoutHomepage>
        <SEO title="Home" />
        <article
          className={
            introViewed ? 'contact-page' : 'contact-page contact-page--animated'
          }
        >
          <div className="contact-page__content-wrapper container">
            <h1 className="contact-page__heading">
              <span className="contact-page__heading--pt1">Contact</span>
              <span className="contact-page__heading--pt2">Neue</span>
            </h1>
            <p>For inquiries, please fill out the email form below.</p>

            <form
              name="contact"
              className="form"
              action="/"
              method="POST"
              data-netlify="true"
              data-netlify-honeypot="bot-field"
              onSubmit={handleSubmit}
            >
              <input type="hidden" name="form-name" value="contact" />
              <ul className="form__list">
                <li hidden>
                    <label>
                      Don’t fill this out:{' '}
                      <input name="bot-field" onChange={handleChange} />
                    </label>
                </li>
                <li className="form__item form__item--half">
                  <FormInput
                    id="firstName"
                    label="First Name"
                    labelClass="visuallyhidden"
                    inputClass="form__input"
                    placeholder="first name"
                    onChange={handleChange}
                  />
                </li>
                <li className="form__item form__item--half">
                  <FormInput
                    id="lastName"
                    label="Last Name"
                    labelClass="visuallyhidden"
                    inputClass="form__input"
                    placeholder="last name"
                    onChange={handleChange}
                  />
                </li>
                <li className="form__item form__item--half">
                  <FormInput
                    id="email"
                    label="Email Address"
                    labelClass="visuallyhidden"
                    inputClass="form__input"
                    placeholder="email address"
                    onChange={handleChange}
                  />
                </li>
                <li className="form__item form__item--half">
                  <FormInput
                    id="subject"
                    label="Subject"
                    labelClass="visuallyhidden"
                    inputClass="form__input"
                    placeholder="subject"
                    onChange={handleChange}
                  />
                </li>
                <li className="form__item form__item--full">
                  <FormInput
                    id="message"
                    label="Message"
                    labelClass="visuallyhidden"
                    inputClass="form__input"
                    placeholder="message"
                    type="textarea"
                    onChange={handleChange}
                  />
                </li>
                <li>
                  <input
                    type="submit"
                    value="Submit"
                    className="form__input form__input--submit"
                  />
                </li>
              </ul>
            </form>
          </div>
        </article>
      </LayoutHomepage>
    </Fragment>
  );
};

export default IndexPage;

Yet I receive no submissions. Can’t figure out what I’m missing.

Thanks.

hey there @mikeriley131,

there could be a couple of different reasons for this! First step is probably to look through this guide:

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

If that doesn’t help, let us know and we can try troubleshooting some more.

Thanks for that link. It must have been Akismet not liking my test@test.com email address. I just tried with a real email address and I see the submission coming through. Thanks!

1 Like