Invisible reCaptcha iframe not showing, form stuck

Question

I am loading two scripts on my websites:

<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>

Where my_site.js looks like this:

... many other functions, not nested

function captachaCallback() {
    console.log("Captcha");
}

... other functions

Then in my form I am using:

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

Whenever I press the button, a white half-transparent overlaying empty div appears, but nothing happens (console message doesn't appear) and the form is stuck.

I am using the latest Chrome.

Thanks in advance

Apply the `data-sitekey` attribute on another tag where it will contain the captcha. Don't merge your submit button with the catcha container. — VRoxa, May 06 '20 at 07:27

score 2 · Accepted Answer · answered May 12 '20 at 11:01

2

The problem was that I had a CSS setting affecting all divs on my website.

div { overflow: hidden; }

Apparently this makes the popup window with the captcha test invisible.

Removing this setting solved the problem.

answered May 12 '20 at 11:01

Itay

16,601
2
51
72

1

I had this friking same problem bro thanks – JorgeeFG Apr 22 '21 at 14:35

score 1 · Answer 2 · answered May 11 '20 at 18:04

1

I'm suspecting that the element is going out of the visibility. So can you try adding data-badge="inline" to the recaptcha element in the html

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>

Hope this helps.

answered May 11 '20 at 18:04

Nithish

5,393
2
9
24

This wasn't the problem but it helped me solve it. Thanks. – Itay May 12 '20 at 11:01
I'm very glad that it helped. :-) – Nithish May 12 '20 at 11:47

score -1 · Answer 3 · answered May 06 '20 at 08:42

You're not rendering the captcha.

The submit button is trying to verify the response of the captcha once the user completes the captcha by sending a callback to the function specified on data-callback. Since you haven't created the component it gets stuck in a loop.

The submit button cannot be the same tag where you load the CAPTCHA. You need to render the captcha in an empty tag.

Instead of:

    <button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

Render it like:

    <div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>

Wrap it up inside a form. You already have it, so just modify it.

Since you're specifying what function to run once the captcha is completed you don't need to worry about the submit button.

The structure should look something like this:

    <form action="?" method="POST">
      /// The other elements in your form
      /// ...
      <div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
      <br/>
      <input id="btnSubmit" type="submit" value="Submit">
    </form>

Also be sure to look up the documentation ;)

https://developers.google.com/recaptcha/docs/display

Thank you, but I am talking about the *invisible* recaptcha. My code actually fits exactly the example from the [documentation](https://developers.google.com/recaptcha/docs/invisible#automatically_bind_the_challenge_to_a_button) — Itay, May 06 '20 at 14:38

Invisible reCaptcha iframe not showing, form stuck

3 Answers3