How to Change the Captcha Theme on Google Checkbox v2 reCAPTCHA

Overview

Would you like to change the captcha theme on your forms when using Google Checkbox v2 reCAPTCHA? With a little JavaScript you can change this theme to aDark theme. In this tutorial, we’ll walk you through the steps needed to change the captcha theme.

By default, when using reCAPTCHA, the theme of the captcha box is set to Light.

You can take a look at the reCAPTCHA Developers Guide from Google if you’d like to change any of the other default attributes.

Setup

In the code snippet below we’ll be adding a tag attribute to the .g-recaptcha div and set a data-theme tag to have a value of dark. This is what will change the captcha theme on the form.

1) Enabling reCAPTCHA on your form

First, you’ll need to set up reCAPTCHA to your form. If you need assistance setting this up you can review our full documentation on How to Set Up reCAPTCHA in WPForms.

The code shown below is specifically for the Google Checkbox v2 reCAPTCHA setting that you’ll enable on your form’s Settings » General tab.

Enable Google reCAPTCHA on your form under the General tab of your form settings

2) Adding the JavaScript to your site

Now that reCAPTCHA has been added to your form, you can see what it looks like by default.

reCAPTCHA default captcha theme is set to light

Next, you’ll need to add the following code snippet to your site in order to change the captcha theme from Light to Dark.

/**
 * Change the captcha theme for the Google Checkbox v2 reCAPTCHA
 *
 * @link https://wpforms.com/developers/how-to-change-the-captcha-theme-on-google-checkbox-v2-recaptcha/
 *
 */

function wpf_dev_change_captcha_theme( ) {
?>
<script type="text/javascript">
	jQuery(function($){
		$('.g-recaptcha').attr('data-theme', 'dark');
        });
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_change_captcha_theme', 30 );

Once the code has been added to your site, your captcha theme will now be set to Dark.

With the code above you can now change the captcha theme to dark

And that’s it! You’ve successfully changed the captcha theme from Light to Dark. Would you like to change the styling on the form’s placeholder text? Take a look at our article on How to Style Placeholder Text for Form Fields.

Action Reference: wpforms_wp_footer_end