GatsbyJS form not detected

Live demo

Form code

Problem: Netlify does not detect form at all, despite using the tags such as data-netlify="true" and data-netlify-honeypot="bot-field" and using hidden input.

If you try submitting the form, it flashes the /404 page before redirecting to the /thanks page.

I have created /, /thanks, and /404 pages inside the pages folder of src.

Hi, @SAD1j2asdasd, there is more information about form debugging here:

I downloaded the content of that deploy and I think I found the issue. The screenshot below shows where to find the “download deploy” button (it isn’t labeled):

When I downloaded the deploy, I see there is no pure HTML version of the form at deploy time.

$ grep -irl '<form' ./deploy-5dde12bd96f29e00086dcafa
./deploy-5dde12bd96f29e00086dcafa/component---src-pages-index-js-db4b647b3b67416b0048.js.map

Only one file contains the string “<form” (case-insensitive) and the one file which does contain this isn’t an HTML file (and doesn’t have the form).

This requirement of a pure HTML version of the form at deploy time is documented here:

https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms

Quoting:

Work with JavaScript-rendered forms

Our bots find your forms by parsing the HTML of your site when the build completes. This means that if you’re using JavaScript to render a form client-side, our bots won’t find it in the pre-built files. You can work around this by creating a hidden HTML form with the data-netlify="true" attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form. You need to apply the same work around if you want to use our reCAPTCHA 2 integration, and create a div element in the hidden HTML with the data-netlify-recaptcha="true" attribute.

You can also find related tutorials on our blog:

While the two articles are fairly framework-specific, the code demonstrates how to prerender forms when working with them in a web application.

To summarize, there is no HTML form parsed during the deploy. It does appear there has been at one point because I do see a form handler prepared to receive the form. However, the deploy above doesn’t appear to have one.

You might try creating the HTML version of the form, including it with the deploy, and see if that works.

If not, would you please link us to a deployed page with a form and also link us to the HTML file which contains the prerendered form before any site javascript is run?