I've installed the latest Google reCaptcha tool on our yoga website. Now the users are confused about the text "I'm not a robot" that appears next to the checkbox.
Most of our users do not know what the word "robot" means in this context and they think the form is broken. They also feel less safe using our form as it is weird to see the word "robot" on a yoga website.
How do I change the text "I'm not a robot" to something else that the users understand?
The docs appear silent on this point...
Also, it seems like the contents of the reRecaptcha are completely locked down via remote JS and CSS. I've unsuccessfully tried using the following javascript to change the text for Googles recaptcha-anchor-label:
<script type="text/javascript">
$(document).ready(function () {
$("#recaptcha-anchor-label").text("Something different.");
});
</script>
Coming back to this old question - there is now an invisible version of the reCAPTCHA widget that allows you to design the UI on your own. You can bind the execution of the challenge to a button you've created or invoke it programmatically in the background.
I'm citing the docs page here for quick reference, you can read more about this here.
The necessary attributes are a class name 'g-recaptcha', your site key in the data-sitekey attribute, and the name of a JavaScript callback to handle completion of the captcha in the data-callback attribute.
Head:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
Body:
<form id='demo-form' action="?" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callck='onSubmit'>Submit</button>
<br/>
</form>