# Netlify Forms captcha loads on refresh

**URL:** <https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098>\
**Category:** Support\
**Tags:** netlify-forms\
**Created:** [July 26, 2022, 3:50pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098 "2022-07-26T15:50:06Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![vidhyav656](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/vidhyav656/32/39638_2.png) [@vidhyav656](https://answers.netlify.com/u/vidhyav656)\
**Post date:** [July 26, 2022, 3:50pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/1 "2022-07-26T15:50:06Z")

</div>

Hello,

I am facing the issue with netlify forms captcha, I cannot see it the first time when the page loads, its can be seen on refresh the page. My website link is [https://aghdamidesign.netlify.app/contact](https://aghdamidesign.netlify.app/contact)

---

<div class="post-metadata">

**Author:** ![hillary](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hillary/32/21132_2.png) [@hillary](https://answers.netlify.com/u/hillary)\
**Post date:** [July 26, 2022, 11:12pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/2 "2022-07-26T23:12:37Z")

</div>

Hiya, sorry you are having trouble getting your forms to work.

[This Support Guide](https://answers.netlify.com/t/support-guide-debugging-support-and-help-for-netlify-forms-start-here/49479) is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged [Netlify forms](https://answers.netlify.com/tags/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. 🙂

---

<div class="post-metadata">

**Author:** ![vidhyav656](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/vidhyav656/32/39638_2.png) [@vidhyav656](https://answers.netlify.com/u/vidhyav656)\
**Post date:** [August 31, 2022, 3:01pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/3 "2022-08-31T15:01:09Z")

</div>

Hi @hillary,

Thanks for your reply.

But I still facing the same issue. I have connect my netlify site to the domain.  
Link here: [https://aghdamidesign.de/contact](https://aghdamidesign.de/contact)

Can you please help or look into the matter.

Thanks again.

---

<div class="post-metadata">

**Author:** ![clarnx](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/clarnx/32/40777_2.png) [@clarnx](https://answers.netlify.com/u/clarnx)\
**Post date:** [August 31, 2022, 4:00pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/4 "2022-08-31T16:00:48Z")

</div>

Hello @vidhyav656, sorry your problem still persists.  
I visited your website and inspected the code using the Chrome Dev Tools and I noticed your form has some missing attributes required to make the forms work. The attributes are `action` and `data-netlify`

The attributes of the form should now look similar to the code below.  
Also add a child div in the form with a `data-netlify-recaptcha` attribute set to `"true"`

```auto
<form
   name="contact"
   method="POST"
   action="/" 
   data-netlify-recaptcha="true"
   data-netlify="true"
   id="contact-form"
>
 <div data-netlify-recaptcha="true" ></div> <!-- Add this field as well. It will be hidden. -->
</form>

```

Make the changes and redeploy to see if it works. Let me know the above solution helps.

---

<div class="post-metadata">

**Author:** ![vidhyav656](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/vidhyav656/32/39638_2.png) [@vidhyav656](https://answers.netlify.com/u/vidhyav656)\
**Post date:** [August 31, 2022, 6:00pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/5 "2022-08-31T18:00:17Z")

</div>

Thanks, @clarnx for the reply. I have added the provided code on the website and deployed it again.

But when I navigate the contact page, I don’t see the captcha loading but after I reload I can see the captcha appearing.

Is there anything that I am still missing?

---

<div class="post-metadata">

**Author:** ![clarnx](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/clarnx/32/40777_2.png) [@clarnx](https://answers.netlify.com/u/clarnx)\
**Post date:** [August 31, 2022, 6:15pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/6 "2022-08-31T18:15:26Z")

</div>

@vidhyav656 Thanks for the feedback.  
I’m assuming your website is a React website. Correct me if I’m wrong.

How are you routing to the pages or what method are you using to display the form when the contact page is navigated to?

---

<div class="post-metadata">

**Author:** ![vidhyav656](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/vidhyav656/32/39638_2.png) [@vidhyav656](https://answers.netlify.com/u/vidhyav656)\
**Post date:** [August 31, 2022, 7:04pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/7 "2022-08-31T19:04:50Z")

</div>

It’s build with Jekyll not react.

It’s just the simple and direct calling of the contact page from the menu.

---

<div class="post-metadata">

**Author:** ![clarnx](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/clarnx/32/40777_2.png) [@clarnx](https://answers.netlify.com/u/clarnx)\
**Post date:** [August 31, 2022, 7:49pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/8 "2022-08-31T19:49:01Z")

</div>

@vidhyav656 thanks for the clarification.  
At this point I can only help if I see a code snippet of your form that’s if you want to share.  
Thanks

---

<div class="post-metadata">

**Author:** ![Melvin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/melvin/32/23606_2.png) [@Melvin](https://answers.netlify.com/u/Melvin)\
**Post date:** [September 1, 2022, 12:57pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/9 "2022-09-01T12:57:19Z")

</div>

Hi @vidhyav656,

I tested out the form this morning, and I’m seeing that it’s working correctly. Visiting [Contact • Ehsan Aghdami Design](https://aghdamidesign.de/contact) I do see the recaptch load. I was able to add a test message to the form and fill out the recaptch and successfully submitted.

I also see that successfully deployed the site this morning. Are you still having issues?

---

<div class="post-metadata">

**Author:** ![clarnx](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/clarnx/32/40777_2.png) [@clarnx](https://answers.netlify.com/u/clarnx)\
**Post date:** [September 1, 2022, 1:50pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/10 "2022-09-01T13:50:24Z")

</div>

Hi @Melvin, It is true when you visit the page on first load the recaptcha loads. However the problem persists when you visit the contact page from another page by clicking on the contact link in the navigation menu.

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [September 1, 2022, 2:59pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/11 "2022-09-01T14:59:25Z")

</div>

Hi @vidhyav656,

The problem is with your site’s JavaScript and not Netlify. As you can see, Netlify is adding the ReCaptcha whenever the page is requested - but when your site’s JS tries to load the page, it doesn’t append the required `<script>` tag for some reason.

This is the page that Netlify serves:

 ![image](https://global.discourse-cdn.com/netlify/original/3X/c/8/c8a860040f711371bdd2c9df26bb691d03adb771.png)

This is how your site’s JS shows the page when you navigate to it from the navigation:

 ![image](https://global.discourse-cdn.com/netlify/original/3X/f/0/f0bc51e8d6dd2abe7f37907fca32b7296a02755d.png)

Now we don’t know why that’s happening, as it’s not something caused by Netlify - you can confirm by disabling JavaScript in browser settings and trying to load the page - ReCaptcha would work fine even when you navigate.

Not sure if you’re using some jQuery plugins or something else, but in the past, when I had used something like: [Turbo Handbook](https://turbo.hotwired.dev/handbook/building#installing-javascript-behavior), I had to manually manage the JavaScript - in the sense, handle specific events. Maybe you can try adding the script tag on-demand to see if it works. I tried doing that on your site and that works too:

```auto
const recaptcha = document.createElement('script')
recaptcha.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
document.querySelector('.g-recaptcha').parentElement.appendChild(recaptcha)

```

---

<div class="post-metadata">

**Author:** ![vidhyav656](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/vidhyav656/32/39638_2.png) [@vidhyav656](https://answers.netlify.com/u/vidhyav656)\
**Post date:** [September 10, 2022, 7:09pm UTC](https://answers.netlify.com/t/netlify-forms-captcha-loads-on-refresh/72098/12 "2022-09-10T19:09:37Z")

</div>

Thank you for your solution. I am using a different form for my website which works well with Google recaptcha