New Google reCaptcha: How to change text “I'm

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

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 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

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 4

There is something I'd like to add to sr9yar answer, but I can't comment on an answer due to my reputation.

If in your application.rb you have a list of languages and in your view a button o select to choose between them, you can interpolate your variable locale to make the script access the language you have chosen

Application.rb

config.i18n.available_locales = %i[es en]

Your view file

script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=#{I18n.locale.to_s}"

It worked for me perfectly

Answer 5

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 6

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 :)