AnsweredAssumed Answered

Invisible recaptcha vs visible recaptcha

Question asked by Grégoire Michel on Mar 19, 2018
Latest reply on Apr 17, 2018 by Markus Bianchi

When implement an invisible recaptcha following the method described by Sanford Whiteman here, the

 

var recaptchaResponse = grecaptcha.getResponse();

 

returns an empty response, and the validation fails.

 

this is the complete code used:

 

  In the <head>

<meta class="mktoBoolean" id="GoogleRecaptcha" mktoName="Google Recaptcha" default="false" true_value="true" false_value="false" false_value_name="Deactivated" true_value_name="Activated">

 

in the <body>

<div id="InvisibleRecaptcha" class="g-recaptcha" data-sitekey="${GoogleRecaptchaSiteKey}" data-size="invisible" data-callback="donothing"></div>

 

in the forms whenready:

var formEl = form.getFormElem()[0],
  emailEl = formEl.querySelector('#Email'),
  submitEl = formEl.querySelector('BUTTON[type="submit"]'),
  recaptchaEl = document.querySelector('.g-recaptcha’),
  formElId = form.getId();

if (${GoogleRecaptcha}) {
  form.submittable(false);
  // force resize reCAPTCHA frame
  recaptchaEl.querySelector('IFRAME').setAttribute('height','140');
  // move reCAPTCHA inside form container    
  formEl.appendChild(recaptchaEl);
}
  
form.onValidate(function(builtInValidation){        
  //code to handle the recaptcha
  if(${GoogleRecaptcha}) {
    if (!builtInValidation) return;
            
    //calling the recaptcha 
      var recaptchaResponse = grecaptcha.getResponse();
      if (!recaptchaResponse) {
        recaptchaEl.classList.add('mktoInvalid');
      } else {
        recaptchaEl.classList.remove('mktoInvalid');
        form.addHiddenFields({
          lastRecaptchaUserInput: recaptchaResponse,
          lastRecaptchaEnabledFormID: formElId
        });
        form.submittable(true);
      }
    }      
});





 

Any idea about what I am missing?

 

The same code works perfectly well with a visible (v2) recaptcha.

 

-Greg

Outcomes