Google Invisible ReCaptcha is not invisible

Question

I'm just trying to get Google Invisible ReCaptcha to work after submitting the form. My problem is that ReCaptcha is NOT invisible, it seems that the "old" recaptcha appears. I do not understand why. My key site is for an invisible recaptcha. Please help me.

First of all, I load the API:

<script src='https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad' async defer></script>

My form is as follows:

<form method="post" id="contact-form-face" class="clearfix" onsubmit="return false">
<input type="text" required name="name" value="name" onFocus="if (this.value == 'name') this.value = '';" onBlur="if (this.value == '') this.value = 'name';" />
<button type="submit" id="sendButton" data-size="invisible" class="g-recaptcha contact_btn" onclick="onSubmitBtnClick()" value="send" >send</button>
</form>

JS:

window.onScriptLoad = function () {
// this callback will be called by recapcha/api.js once its loaded. If we used
// render=explicit as param in script src, then we can explicitly render reCaptcha at this point

// element to "render" invisible captcha in
var htmlEl = document.querySelector('.g-recaptcha');

// option to captcha
var captchaOptions = {
    sitekey: 'XXXXXXX',
    size: 'invisible',
    // tell reCaptcha which callback to notify when user is successfully verified.
    // if this value is string, then it must be name of function accessible via window['nameOfFunc'],
    // and passing string is equivalent to specifying data-callback='nameOfFunc', but it can be
    // reference to an actual function
    callback: window.onUserVerified
};

// Only for "invisible" type. if true, will read value from html-element data-* attribute if its not passed via captchaOptions
var inheritFromDataAttr = true;

console.log("render now!");
// now render
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);
};

// this is assigned from "data-callback" or render() "options.callback"
window.onUserVerified = function (token) {
alert('User Is verified');
console.log('token=', token);

};

// click handler for form submit button
function onSubmitBtnClick () {
var token = window.grecaptcha.getResponse(recaptchaId);

// if no token, mean user is not validated yet
if (!token) {
    // trigger validation
    window.grecaptcha.execute(recaptchaId);
    return;
}

var xhrData = {
    'g-recaptcha-response': token
    // more ajax body/data here
};

};

To make things clearer: this reCaptcha works fine, callbacks, validation works fine ... The only problem is that this recaptcha should be invisible while it is not: /

Answer 1

, "captchaOptions".
3 : rightright ( ), bottomleft inline ( css recaptcha).

Answer 2

, , render()

recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);

};

, , DIV

    <div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
    </div>

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

recaptcha script div , recaptcha.

recaptcha, grecaptcha.execute();

googledev, .

, =)

Answer 3

Looking at the JavaScript API documents, https://developers.google.com/recaptcha/docs/invisible#js_api You need to add a div with an identifier for rendering, class and data attributes are not required for the button element when rendering captcha using JavaScript.

Your HTML should be:

<form method="post" id="contact-form-face" class="clearfix"   
onsubmit="return false">
    <input type="text" required name="name" value="name" onFocus="if 
    (this.value == 'name') this.value = '';" onBlur="if (this.value == 
    '') this.value = 'name';" />
    <div id="recaptcha"></div>
    <button type="submit" id="sendButton" class="contact_btn" 
    onclick="onSubmitBtnClick()"value="send">send</button>
</form>

And your JS should be updated to:

// element to "render" invisible captcha in
var htmlEl = 'recaptcha'