Gatsby forms - Parsing HTML SSG

[jeffkershner]

I hate to ask this question as it has been asked 1000 times in the forums but everything I try doesn’t work.

I am using gatsby and it seems that netlify isn’t parsing my form. I did the common trouble shooting by adding the attribute, setting the form name, making sure each form element has a name, etc…

It appears that Netlify doesn’t parse my form.

Can anyone see what might be going on? I have been dealing with this for 3 days, no joke, reading every article and trying so many different things. I don’t know what to do anymore.

Here is my preview site: https://6047ad18a7fb700007a03b63--gopherhost.netlify.app/
The contact form is the Contact menu at the top.

Any ideas?

[jonsully]

Greetings!

I might suggest giving this package a shot

GitHub - jon-sully/react-ssg-netlify-forms: Turn-key solution for easy,...

–
Jon

[luke]

Hi, @jeffkershner. For recommended reading, I would start with two pages, the first of which is the forms debugging support guide below:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

Also, there is our forms documentation, quoted below:

Netlify comes with built-in form handling that’s enabled by default. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.

Note, the key words above “parsing your HTML files directly at deploy time”. This means there must be a tag in the HTML that has the required attributes. No javascript is run during this check. The form must exists as pure HTML to be detected. You can download your index.html file with this:

wget https://6047ad18a7fb700007a03b63--gopherhost.netlify.app/

When I look at the resulting index.html file, there is no <form> tag at all anywhere in the HTML. An HTML form must exist to use Netlify forms and this requirement is not met. This is why your form isn’t being detected.

There are several solutions. For example, the package that @jonsully recommended. Another solution (if you are looking for a quick fix) is to load the page in the browser so the form is created by the site javascript. You can then copy/paste the form into an HTML file and manually save that as a static file in the deploy. Whatever solution you use - it always will include making sure the HTML form exists in the deployed HTML somewhere.

Also, instead of using wget to download index.html, you can download the deploy in the UI using the button in the screenshot below on this page:

This is another way to examine the files in a specific deploy.

If there are any other questions about this, please let us know.

[jeffkershner]

So I figured out the problem. I needed to create a dummy hidden html form. I didn’t think I needed to do this because I am using Gatsby and the docs says you don’t need to do this since it is a static site generator.

But my contact form javascript isn’t rendered until you click on the contact tab. So Netlify didn’t see the form during the build.

Thanks for all the help!