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

[Dennis]

Last reviewed: April 2024

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?”

[britvaica]

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: Forms setup | Netlify Docs

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: React Playground

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

[fool]

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

Improved Netlify Forms spam filtering using Akismet

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 ...>

[britvaica]

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

[Scott]

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!

[britvaica]

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

Adolf

[thelostprofessor]

Hello! Im still having problems with my form submission despite trying everything in this discussion. I would really appreciate some help.

Live Site : pedantic-bohr-548a11.netlify.app

HTML Form

                <form name="contact", method="POST", data-netlify="true">
                    <!-- Name -->
                    <div class="form-group">
                        <label for="name">Name <strong class = "text-danger">*</strong></label>
                        <input name = "name" class="form-control" type="text" id="name" placeholder="Enter your name / company name" required>
                    </div>
                    <br>
                    <!-- Email -->
                    <div class="form-group">
                        <label for="email">Email address <strong class = "text-danger">*</strong></label>
                        <input name = "email" class="form-control" type="email" id="email" placeholder="Enter email" required>
                        <small class="form-text text-muted">Your email will never be shared.</small>
                    </div>
                    <br>
                    <!-- Phone -->
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input name = "phone" class="form-control" type="tel" id="phone">
                    </div>
                    <br>
                    <!-- Message -->
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea name = "message" class="form-control" id="message" rows="3" placeholder="Leave blank if you would like me to contact you instead."></textarea>
                    </div>
                    <br>
                    <!-- Submit -->
                    <button class="btn btn-primary btn-block" type="submit">Submit</button>
                </form>

[hrishikesh]

Hi @thelostprofessor,

What kind of a problem are you having? It appears as if the form has been detected correctly. Is it not working or something?

[stommazh]

Hi,

I’m having issue with form that rendered by JavaScript (SvelteKit).
My site: https://t7m.netlify.app/#contact

My form is registered and visible in netlify app dashboard with the name ‘lien-he’. When form is submitted, I got response with HTTP code 200 and content is the HTML version of main page. If I change the submit path to other than ‘/’, I got status 404 and the same HTML content. In both case I don’t see any submission in the dashboard

Code for sending form via XHR:

fetch('/', {
				method: 'POST',
				headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
				body: new URLSearchParams(new FormData(document.querySelector('form[data-form=contact]'))).toString()
			})

Request body:

form-name=lien-he&quang_cao=on&san_pham=on&khac=on&name=Khang+Le&phone=0349218391&email=kwjam%40mail.dev&message=test+content

Response: status 200 but body is HTML version of my site

[hrishikesh]

Hi @stommazh,

That looks correct to me. You’d rightly get the HTML body in response. I’m not sure what the problem is here. Are you not seeing form submissions?

[stommazh]

Yes, I don’t receive any submission for that form, checked in both spam and verified box.

[hrishikesh]

Hi @stommazh,

You’re having a redirect that routes /* to a Netlify Function that’s causing problems. If you change the fetch to /about/, it should work fine.

[stommazh]

Thank you for the solution. It worked.