New Google reCaptcha: How to change text "I'm not a robot" - captcha

Question

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>

Answer 1

It is possible to change "I'm not a robot" in Google Recaptcha into a different language by using language codes for the hl script parameter.
This is how you force Spanish, for example:
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=es">
Source: Google ReCaptcha Docs

Answer 2

It is currently impossible using their tool. If you want to use a different method of stopping robots: Uninstall reCaptcha, and use something you have control over, maybe a simple randomized question and answer that pertains to yoga.

Answer 3

You cannot change that specific text because it belongs to a third party iframe, though there is a workaround that fulfils exactly what the OP is asking for.
You can append a new div on the parent div you can control, aligning and overlapping it on the label text, considering the Google Captcha has always a fixed size. Therefore, according to documentation, considering you may have the main Captcha div on your code with class="g-recaptcha", you simply do:
$('.g-recaptcha').append('<div id="new_label"></div>');
$('#new_label').text("My own text");
$('#new_label').css({"position":"absolute", "width":"160px", "top":"27px", "left":"53px", "background-color":"#f9f9f9"});
it works :)

Answer 4

This is not possible because the Same Origin Policy prohibits any script (that's on your site) trying to access an iframe (the captcha) that has another origin (Google server).
We should have no problem running the code below if we own both servers :)
$( ".g-recaptcha > div > div > iframe" ).contents().find( "#recaptcha-anchor-label" ).text('Custom Text');

Answer 5

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>

Answer 6

I used client side captcha here is my code.its working fine for my portal.
this.canvas = document.getElementById( 'myCanvas' ) as HTMLCanvasElement;
var context = this.canvas.getContext( '2d' );
context.clearRect( 0, 0, this.canvas.width, this.canvas.height );
var alpha = [];
alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H','J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'2', '3', '4', '5', '6', '7', '8', '9'];
var i;
for ( i = 0; i < 6; i++ ) {
var a = alpha[Math.floor( Math.random() * alpha.length )];
var b = alpha[Math.floor( Math.random() * alpha.length )];
var c = alpha[Math.floor( Math.random() * alpha.length )];
var d = alpha[Math.floor( Math.random() * alpha.length )];
var e = alpha[Math.floor( Math.random() * alpha.length )];
var f = alpha[Math.floor( Math.random() * alpha.length )];
var g = alpha[Math.floor( Math.random() * alpha.length )];
}
this.captchaCode = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' ' + f + ' ' + g;
var ctext = this.captchaCode;
this.loginForm.controls['captcha'].setValue( this.captchaCode.replace( /\s/g, "" ) );
Here is I am drawing canvas image
/*Text to image captcha */
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage( imageObj, 0, 0 );
context.font = "24px arial";
context.fillText( ctext, 84, 32 );
};
imageObj.src = 'assets/modules/dummy-assets/common/img/captcha2.jpg';