Form submissions do not arrive. Seems a spam problem. No clue how to proceed (Gatsby)

Support
1

Hi support team,

It’s probably only you, who can help. But let’s see.

Here You find the page with the form
https://sx.surface-world.de/test/

It’s a Gatsby site under development.

Form submissions do not arrive. Checked spam submissions, nothing. Submitted real data. No success.

The form name some-unique-name-76984326426183 appears in the backend.

The hidden field form-name appears in the browser’s source code.

I have no clue what to do or to read (did this for two hours now) next. Help is really appreciated

Code:

import React from "react"

export default function test() {
  return (
      <form name="some-unique-name-76984326426183" method="POST" data-netlify="true">
        <p>
          <label>Your Name: <input type="text" name="name" /></label>
        </p>
        <p>
          <label>Message: <textarea name="message"></textarea></label>
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>)
}

Thanks and kind regards
Stefan

2

Hiya, sorry you are having trouble getting your forms to work.

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

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile:

4

Hi, and thanks to the response.

I did all the readings.

Meanwhile, I could at least narrow the issue.

This does not work:

import React from "react"
export default function test({location}) {
  return (
      <form name="some-unique-name-76984326426183" method="POST" data-netlify="true">
        <p>
          <label>Your Name: <input type="text" name="name" /></label>
        </p>
        <p>
          <label>Message: <textarea name="message"></textarea></label>
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>)
}

Observations:

As mentioned before, we develop our site with Gatsby. If I look to the generated page in browsers source view, the HTML form looks fine. The data-netlify is stripped and the hidden form-name field is present.

Submitting the form does not show the “Thank You” page. The backend (Netlify dashboard) does not receive the submitted form.

https://sx.surface-world.de/test/

This does work:

To eliminate all Gatsby stuff (page preloading and other things) I added this pure, simple HTML file to the static folder. Gatsby copies all files in public untouched to the distribution.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>title</title>
  </head>
  <body>
    <form name="some-unique-name-76984326426183" method="POST" data-netlify="true">
      <p>
        <label>Your Name: <input type="text" name="name" /></label>
      </p>
      <p>
        <label>Message: <textarea name="message"></textarea></label>
      </p>
      <p>
        <button type="submit">Send</button>
      </p>
    </form>)
  </body>
</html>

Observations:

Submitting this form works as expected. It shows the “Thank You” page and the backend (Netlify dashboard) receives the submitted form.

https://sx.surface-world.de/test-static.html

Next steps:

I’ll install a simple Gatsby Starter and see if the issue persists. If not, it is clearly an issue with our current implementation.

Will report results.

5

I still do not understand why, but the solution is quite simple. Add the hidden input field manually.

import React from "react"

export default function test({location}) {
  return (
      <form name="some-unique-name-76984326426183" method="POST" data-netlify="true">
        <input type="hidden" name="form-name" value="some-unique-name-76984326426183" />
        <p>
          <label>Your Name: <input type="text" name="name" /></label>
        </p>
        <p>
          <label>Message: <textarea name="message"></textarea></label>
        </p>
        <p>
          <button type="submit">Send</button>
        </p>
      </form>)
}
1 Like
6

Glad you got to the answer! The reason why is sort of complex but has to do with Gatsby’s React-based workflow. If you want a good bedtime read, I wrote about it in pt. 1 and 2 here:

And in case you need it in the future, this package is available for getting forms in Gatsby / Next to ‘just work’ :slight_smile:

–
Jon

1 Like