Hello, I'm trying to insert a recaptcha into a page, I was able to successfully insert the contact page through an AJAX form.
The problem is in an AJAX form that is inside a lightbox (in case I use featherlight but I think it does not influence), I add everything correctly, but when I click on "I am not a steal" it will load and return the following error in console:
Uncaught DOMException: Blocked a frame with origin "www.google.com" from accessing a cross-origin frame. at www.pc.ca at Kp.xb (www.gstatic.com/recaptcha/api2/r20170411114922/recaptcha__english.js:343:59)
My code:
1st Form:
<form action="envia_franquias.php" method="post" id="form_franquias">
<input type="text" name="nome" id="nome" placeholder="Nome Completo:" required>
<input type="tel" name="telefone" id="telefone" placeholder="Telefone/Celular:" required>
<input type="email" name="email" id="email" placeholder="E-mail:" required>
<input type="text" name="cidade" id="cidade" placeholder="Cidade:" required>
<input type="text" name="estado" id="estado" placeholder="UF" required>
<textarea name="mensagem" id="mensagem" placeholder="Comentários:"></textarea>
<div id="captcha"></div>
<input type="submit" value="Enviar" id="submit" class="btn_send">
</form>
2nd Js:
<script>
var widgetId2;
var onloadCallback = function() {
widgetId2 = grecaptcha.render('captcha', {'sitekey' : '6LffYh0UAAAAAA8CJ7p7gmOtc3Cr_gAjqVDTNFYL'});
};
$(".btn_franquias a").click(function() {
setTimeout(function() {
createRecaptcha();
}, 1000);
});
function createRecaptcha() {
grecaptcha.reset(widgetId2);
}
</script>
<script src="//www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
I've tried putting the src script with the start http
I have tried to put the render in a setTimeOut
I did not find anything else on the internet, could anyone help?