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

  • Resolved generosus

    (@generosus)


    2 years, 11 months ago

    Good Day,

    The JS code provided by MailPoet (noted below) to change Google’s reCaptcha shape from Compact (i.e. Square) to Normal (i.e., Rectangular) does not seem to work any longer.

    <script>
jQuery(document).ready(function($) {
wp && wp.hooks && wp.hooks.addFilter('mailpoet_re_captcha_size', 'mailpoet', function () { return 'normal'; });
});
</script>

    Can you guys revisit your code and provide one that works?

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter generosus

    (@generosus)

    2 years, 11 months ago

    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.

    Thread Starter generosus

    (@generosus)

    2 years, 11 months ago

    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.

    thedetoureffect

    (@thedetoureffect)

    2 years, 6 months ago

    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

    Thread Starter generosus

    (@generosus)

    2 years, 6 months ago

    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 🙂

    thedetoureffect

    (@thedetoureffect)

    2 years, 5 months ago

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

    Thread Starter generosus

    (@generosus)

    2 years, 5 months ago

    Glad I could help. BTW, great website!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to Change Google reCaptcha Widget Shape | From Compact to Normal’ is closed to new replies.