[Support Guide] My form renders with javascript but won't work properly

Fear not, there’s just a couple of extra things to make sure you have that will probably get things working!

The most frequent cause of problems with JS forms is that you (or your static site generator) need to create an html version of your form to match your JavaScript version. Some frameworks like gatsby/react may do this automatically, but the important part is that the HTML version MUST match what your JS submits exactly: same form name, and field names. You must deploy this html version along with your site. You don’t have to link to it - you can just create a netlifyneedsthisformyform.html file with those definitions in it and deploy it with your site without linking to it, and that will work!

You also will want to use the expanded data-netlify="true" attribute and data-netlify-recaptcha="true" (if using one of the recaptcha options mentioned here) in your javascript form as mentioned here.

In case you don’t get your javascript form working with this methodology, you might want to check out our larger comprehensive article on Form Debugging

If you’re looking for help, what we will ask to start with is a link to your live form AND a link to the HTML version of your form, so you might include that information preemptively with questions about “why isn’t my form detected/working?”

1 Like

Hi Dennis,

Thank you so much. After going over the information in the docs and links you provided, I finall got my form to work!

However, the recaptcha on my form is not showing up in my deployed site. I’ve read the information in the docs and tried many things, and still couldn’t get my recaptcha to show up. In the Netlify docs, it says, “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”.

I got this here: https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms

Since I’m doing this in React, I made an HTML version of my form. Actually, I’m not exactly sure what it means in the docs when it says to create a div element in the hidden HTML with the data-netlify-recaptcha=“true” attribute". But this is where I added this in the HTML version of my form, in line 32:

I don’t know if this is correct, since it’s not working. I have also added a

with the data-netlify-recaptcha=“true” attribute" in my form component in the place where I want the recaptcha to appear. And I have also added it in the HTML version of my form as well (lines 48-50 in the picture above).

This is the link to my deployed form for reference: https://silly-feynman.netlify.app/contact

Do you have any suggestions of how to get the recaptcha to show up in my deployed React app? Please let me know what I can do. Thank you so much. I look forward to your response.

Adolf

I’d skip the recaptcha if I were you - our addition of akismet form spam processing last year made it unnecessary for most folks:

I can see that none of your forms have the recaptcha feature enabled. From your example, you’ve added the attribute to a specific form input, but it needs to go on the form definition - as in:

<form action... data-netlify=true data-netlify-recaptcha=true ...>

Thank you for your response. One of the first things that I tried was to add the recaptcha attribute to the specific form function, as you mentioned. And I tried it again after reading your response, but the recaptcha still doesn’t show up. I’ll keep trying again, but maybe I’ll just skip it. As you mentioned, the addition of akismet form spam processing made it unnecessary. Thanks again.

Adolf

Hey Adolf, we would argue that it’s unnecessary though I can understand that it’s disappointing that we’re unable to get it up-and-running. All trust in Akismet! :slight_smile:

Okay. I haven’t been able to get it, but I’ll just move on to something else and trust in Akismet! Thanks!

Adolf