How to Change Google reCaptcha Widget Shape | From Compact to Normal

Update:

Apologies. It does work ??

We added the JS code to the “Space before </head>” section of our website and cleared all cache.

Tip:

To adjust the Google reCaptcha widget position within the MailPoet form, use the following CSS Rule:

.mailpoet_recaptcha_container {
    margin-top: -14px!important;
    margin-bottom: 20px!important;
}

Cheers.

Update:

The above filter works well. Unfortunately, it causes a console error “wp is undefined” on non-MailPoet pages. To fix the above, please add the following code snippet to your functions.php file (directly or via the Code Snippets plugin):

function add_custom_javascript() {
  if ( is_page( array( 'news', 'blog', 'subscribe' ) ) ) { 
    ?>
        <script type="text/javascript">
          jQuery(document).ready(function($){
			wp && wp.hooks && wp.hooks.addFilter('mailpoet_re_captcha_size', 'mailpoet', function () { return 'normal'; });
});
        </script>
    <?php
  }
}
add_action('wp_head', 'add_custom_javascript');

Where ‘news’, ‘blog’, and ‘subscribe’ are the pages that contain your MailPoet form. Yours might be different.

Cheers.

Hi @generosus,

I put the first code into Appearance > Theme File Editor > Header and just above </head> and it seems to be working. I haven’t used your second code to reposition it.

For the third code, are you saying you saw an error as a result of the first code (which I’ve used) or the second code (which I haven’t used)? I’m not seeing any errors but I’m also not sure where exactly I would see an error or where to look for the error.

Thanks,
Claire

Hey @thedetoureffect,

When you use the first code listed above, the Developers Console reveals the error: wp is undefined.

Are you familiar with using the Developers Console? If not, look it up.

To help you out:

1. Go to the site page that uses the above code.
2. Right-click on the affected page and select “Inspect.”
3. Click on “Console” at the top-right section of the page.
4. You will see an error code (in red) that says: “wp is undefined.”

Every site is different, so if you don’t see the error code, good for you.

Hope this helps ??

Thanks @generosus! I don’t have any error in the console, so I guess I’m good. I appreciate your help.

Glad I could help. BTW, great website!