CODE

Relocate the reCAPTCHA v3 Policy Badge

This snippet displays the reCAPTCHA policy badge inline within your form layout instead of the default floating badge at the bottom of the page.

v1.0.0

  1. Google recaptcha v3 is the ultimate spam bot protection tool. But, not everyone likes the policy badge it renders at the bottom of the screen. Google stipulates that their policy statement must be visible when using recaptcha v3. But it can be moved and restyled.

    Start by adding the below CSS to your site's CSS file (or directly on the page) and modify if needed:

    {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
<style>
    .grecaptcha-badge {visibility: hidden;}
    .recapv3 {color:#555; display: inline;}
    .recapv3 label {font-size: 0.9em; padding-left: 10px; font-weight: normal;}
    .recapv3 label a {color:#221199}
    .recapv3 label a:hover {text-decoration:underline}
    .recapv3 img {width:28px; float: left;}
</style>

  2. Place the following code in your form layout where you'd like to display the reCAPTCHA policy badge.

    {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
<div class="recapv3">
    <img class="ls-is-cached" width="28" height="28" src="https://www.gstatic.com/recaptcha/api2/logo_48.png?width=28&height=28" data-src="https://www.gstatic.com/recaptcha/api2/logo_48.png?width=28&amp;height=28">
    <label>Protected by reCAPTCHA<br><a href="https://policies.google.com/privacy">Privacy </a> - <a href="https://policies.google.com/terms">Terms</a></label>
</div>

    Example:

    reCAPTCHA Policy Badge Positions

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.