How to Change the Captcha Theme on Google Checkbox v2 reCAPTCHA

Are you looking to enhance the visual appeal of your forms by customizing the captcha theme while using Google Checkbox v2 reCAPTCHA? With the flexibility offered by JavaScript, you can seamlessly transition to a Dark theme, adding a sleek and modern touch to your forms. In this comprehensive tutorial, we’ll provide you with detailed instructions and insights into the process.

By default, reCAPTCHA adopts a Light theme for the captcha box.

the default theme for the captcha is set to light

However, by leveraging the power of JavaScript, you can effortlessly transform the appearance to better align with your website’s design aesthetics. Whether you’re aiming for a cohesive dark color scheme or simply prefer the elegance of a darker theme, this tutorial will equip you with the knowledge and tools needed to make the switch seamlessly.

Join us as we delve into the intricacies of changing the captcha theme, exploring best practices and considerations along the way. By the end of this tutorial, you’ll have the confidence and expertise to implement this customization effortlessly, enhancing the overall user experience of your forms.

Creating the form

First, we’ll begin with creating our form and adding our fields. If you need any help in how to create a form, please review this documentation.

Enabling reCAPTCHA on your form

Next, 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 » Spam Protection and Security tab.

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

Changing the CAPTCHA theme

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.
Now that reCAPTCHA has been added to your form, you can see what it looks like by default.

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

Finally, you’ll need to add the following code snippet to your site. If you need any help in how to add snippets to your site, please review this tutorial.

 * Change the captcha theme for the Google Checkbox v2 reCAPTCHA
 * @link

function wpf_dev_change_captcha_theme() {
    <script type="text/javascript">
        jQuery(function($) {

            $( '.g-recaptcha' ).attr( 'data-theme', 'dark' );

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

This snippet will also change the theme of the Invisible reCAPTCHA v2 as well as hCAPTCHA.

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.

Reference Action



Q: Can I also change the theme for hCAPTCHA?

A: Absolutely, you don’t even need another script for this! You can use the same snippet to change the theme to dark for both reCAPTCHA v2, Invisible reCAPTCHA v2, and hCAPTCHA.