Netlify Forms captcha loads on refresh

Support
1

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

2

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. Please start here and work through these resources!

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:

1 Like
3

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

Can you please help or look into the matter.

Thanks again.

4

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"

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

1 Like
5

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?

6

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

1 Like
7

It’s build with Jekyll not react.

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

8

@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

1 Like
9

Hi @vidhyav656,

I tested out the form this morning, and I’m seeing that it’s working correctly. Visiting Contact • Ehsan Aghdami Design 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?

1 Like
10

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.

1 Like
11

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
image868×132 24.8 KB

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

image
image904×160 22.7 KB

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, 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:

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

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

1 Like