Problem Getting my Netlify Form to Work

Hello,

I’m having problems getting my Netlify Form to work. I first did on an online tutorial and used an form with only HTML and CSS, and I was able to get that to work. Now I am working on a front-end React project and I am not able to get my contact form to work. This is my Netlify site name: https://silly-feynman.netlify.app/

This is where my form in question is: React Playground

When I click the Send Message button, I get a Page Not Found error that says:

"Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

< Back to our site"

I followed the Netlify docs for how to add the code to my form. Here is an image of my code. The code for the form is in lines 29-35:

As you can see, I added a form name, the POST method, and data-netlify=“true”. I also tried it with just “netlify” instead of data-netlify=“true”, but that also did not work. Note too that I have because I’m using Bootstrap. But I also tried it with a lowercase (), but that didn’t work either. “/success” is my own page that I made. When the user submits the message, they will go to this “/success” page I made. I also added the code for the recaptcha: data-netlify-recaptcha=‘true’ (line 55).

What can I do to get my contact form to work. I don’t understand why I got my form to work in my other separate project that used only HTML and CSS, but when I do the same thing here in my React project, it doesn’t work.

I appreciate any help or suggestion.

Thank you,

Adolf

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:

Is this form showing up as a form the Netlify Admin? If you login, select Forms (from the top main menu, 5th item), any forms that use the special Netlify attribute get parsed, and then become a listed form (uses the id value as the name). You can click and see any form submissions, download the data (CSV), etc.

If it’s not showing there, it means something isn’t being parsed correctly and your form isn’t being hooked in the form handler.

Hi Danny,

Thank you for your response. No, the form is not showing up in Netlify Admin. I know what you mean about being able to click and see form submissions, download the data (CSV), etc. because I am able to do it on another different project that I did before. But it is not working on this project. When I click on Forms, all I get is information about how to code my HTML form:

So, if I understand you correctly, that means that it isn’t being parsed correctly and that my form isn’t being hooked in the form handler?

If so, how do I fix that? Does that mean that there is something wrong with my code, or is that something I solve in Netlify in my project? Because, like I mentioned, I followed the docs in terms of what I add to my code to the form, and I wasn’t able to find anything I did wrong.

Thank you,

Adolf

Well, that’s progress, at least we know the failure point.

One thing I’d do is remove that extra ‘// netlify’ code, it’s REM’ed in your editor, but the parser on the Netlify side is very possibly still picking it up (not that it’s a problem, but figured get things to as clean of a baseline as possible).

Here’s the thing: not knowing the Netlify implementation, i.e., how they’re pre-parsing the source during a delivery, those <Form.some_tag> nodes may be causing an issue[?] I’d assume it would need to be <Form [space] to delineate an opening form tag, but maybe not …

Kind of getting into the weeds with this - I’m actually a software dev/architect, I’m usually deep into the backend engineering, so I kind of dig thinking through the nuts and bolts of a system like this.

Oh, and again, just to confirm (since it’s not in your source sample), a closing form tag.

Yes, we made some progress, but it’s still tricky. I went ahead an removed the extra ‘’// netlify" comment code. But I am still getting the error. I also made sure to clean out all unnecessary lines out of my code, and still nothing. As for the closing form tag, I do have a closing tag. It may have been that it was left out in the screenshot I provided. Here is the complete code to my contact form:

I hope you are able to see it all. It might help to see the complete code, so I wanted to show you the complete code. Like I said, I tried what you mentioned above, and I’m still getting the error. I’m not exactly sure what you are suggesting in your second paragraph (“those <Form.some_tag> nodes may be causing an issue[?]…”), which is why I also wanted to show you my complete code.

Just in case, here is the link to my Contact Form code on GitHub:

What would you suggest next? Actually, I’m still learning React (this project I’m building is like a learning project) and am pretty new to Netlify, so I just don’t know enough at this point. I look forward to your response. Thanks again for your help.

Adolf

hey there,

one thing we often see is that folks are missing an html form in their project that matches the form they are generating with JS.