javascripthtmlrecaptchainvisible-recaptchagrecaptcha

Invisible reCaptcha iframe not showing, form stuck

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.

click picture

I am using the latest Chrome.

Thanks in advance

Solution

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