javascriptrecaptchainvisible-recaptcha

Show both invisible recaptcha badges

Currently I have two forms which are toggled by a button. When I show the first form I can see the badge, but not for the second form (second badge is rendered as display:none, and the first form is hidden). Second badge is rendered as data-style="none". What I have now:

<button id="RecaptchaField1">but1</button>
<button id="RecaptchaField2">but2</button>

<script
    src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
    crossorigin="anonymous"></script>
<script>
    $(function () {
    window.onloadCallback = function () {
        grecaptcha.render('RecaptchaField1', {'sitekey' : 'sitekey'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : 'sitekey'});
    };
});
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
Solution

  • Apparently you can just hide the badge and display a note instead. source