Adjust positioning of reCAPTCHA button

Thank you!!! 

Hi @tuanphan,

Thank you for your help above.  You are amazing!
I have tried the code you suggested to make the Recaptcha box a rectangle shape, however it is still a square.  Can you please help me?

My website is: www.nomadhairpro.com.au

And this is the code I have in my Custom CSS:

.newsletter-form-body .captcha-container.rendered {
    margin: 0 auto 24px;
}
.captcha-container.sqs-model-rendered.align-center.rendered>div {
    width: 100% !important;
}
/* reCaptcha position */
.newsletter-form-body {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}
.newsletter-form-fields-wrapper.form-fields {
    order: 1;
}
.captcha-container {
    order: 2;
    margin-top: 20px;
}
.newsletter-form-button-wrapper.submit-wrapper {
    order: 3;
    margin-top: 0;
}

Thank you so much in advance!

On 12/8/2021 at 9:16 AM, NOMADHair said:

Hi @tuanphan,

Thank you for your help above.  You are amazing!
I have tried the code you suggested to make the Recaptcha box a rectangle shape, however it is still a square.  Can you please help me?

My website is: www.nomadhairpro.com.au

And this is the code I have in my Custom CSS:

.newsletter-form-body .captcha-container.rendered {
    margin: 0 auto 24px;
}
.captcha-container.sqs-model-rendered.align-center.rendered>div {
    width: 100% !important;
}
/* reCaptcha position */
.newsletter-form-body {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}
.newsletter-form-fields-wrapper.form-fields {
    order: 1;
}
.captcha-container {
    order: 2;
    margin-top: 20px;
}
.newsletter-form-button-wrapper.submit-wrapper {
    order: 3;
    margin-top: 0;
}

 

Thank you so much in advance!

Try this CSS

iframe[title="reCAPTCHA"] {
    border-radius: 100px;
}

On 12/11/2021 at 8:31 PM, tuanphan said:

Try this CSS

iframe[title="reCAPTCHA"] {
    border-radius: 100px;
}

 

Thank you, however the code didn't work and has just created an almost circle border around the re-captcha button.  (Please see screenshot below)

Ultimately, I'd like it to stretch across as one long button and be in the center, if possible, similar to the image below. 

Thanks in advance for your help,
Amber

On 12/31/2021 at 7:42 AM, NOMADHair said:

Thank you, however the code didn't work and has just created an almost circle border around the re-captcha button.  (Please see screenshot below)

Ultimately, I'd like it to stretch across as one long button and be in the center, if possible, similar to the image below. 

Thanks in advance for your help,
Amber

You mean Captcha width = Email width?

https://www.nomadhairpro.com.au/

18 hours ago, tuanphan said:

You mean Captcha width = Email width?

https://www.nomadhairpro.com.au/

Yes please, if the width of the Captcha be the width of the Email Address box above it, and in the center that would be perfect.

Thank you so much for helping me with this!

On 1/3/2022 at 6:11 AM, NOMADHair said:

Yes please, if the width of the Captcha be the width of the Email Address box above it, and in the center that would be perfect.

 

Thank you so much for helping me with this!

Try adding this CSS then save & reload the site

/* Gg recaptcha */
.newsletter-form-body .captcha-container.rendered>div {
    width: 100% !important;
}
.newsletter-form-body .captcha-container.rendered>div iframe {
    width: 100% !important;
}

Hello, I tried the following code but it didn't work for me. When i input the email it just stays there in the box and nothing happens after. What should i do?

Thanks

<style>

  .captcha-container {

    display : none;
  
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

  $( ( ) => {
  
    $( '.newsletter-form-button' ).click ( function ( ) {
    
      const email = $( '.email input' ).val ( );
      
      const firstName = $( '.first-name input' ).val ( );
      
      if ( ! firstName && email ) return; // bail if first name or email is empty
      
      $( '.captcha-container' ).css ( 'display', 'block' );
      
      } );
      
    } );
    
  </script>

On 1/10/2022 at 8:10 PM, Namrata said:

Hello, I tried the following code but it didn't work for me. When i input the email it just stays there in the box and nothing happens after. What should i do?

 

Thanks

<style>

  .captcha-container {

    display : none;
  
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

  $( ( ) => {
  
    $( '.newsletter-form-button' ).click ( function ( ) {
    
      const email = $( '.email input' ).val ( );
      
      const firstName = $( '.first-name input' ).val ( );
      
      if ( ! firstName && email ) return; // bail if first name or email is empty
      
      $( '.captcha-container' ).css ( 'display', 'block' );
      
      } );
      
    } );
    
  </script>

What is your site url? We can check easier

Hi tuan it's www.peoplefirst.co.in

On 1/4/2022 at 7:03 PM, tuanphan said:

Try adding this CSS then save & reload the site

/* Gg recaptcha */
.newsletter-form-body .captcha-container.rendered>div {
    width: 100% !important;
}
.newsletter-form-body .captcha-container.rendered>div iframe {
    width: 100% !important;
}

 

Thank you so much again for your help, I really appreciate it!

Unfortunately the above code didn't work as a whole, however, when I removed the second bit, and just added the first bit I was able to get the recaptcha box centered.

Can you think of another code to stretch out the box to a rectangle shape rather than a square?

And as always, thank you in advance for your help 🙂

3 hours ago, NOMADHair said:

Thank you so much again for your help, I really appreciate it!

Unfortunately the above code didn't work as a whole, however, when I removed the second bit, and just added the first bit I was able to get the recaptcha box centered.

Can you think of another code to stretch out the box to a rectangle shape rather than a square?

And as always, thank you in advance for your help 🙂

I just checked again, it looks like not possible to change its width

10 hours ago, tuanphan said:

I just checked again, it looks like not possible to change its width

No problem, thank you so much for trying and for all your other help 🙂

Hi @tuanphan

Wondering if you can help please, I've tried a few of the codes in the threads above but none of them seem to work exactly right. I'd like to align the recaptcha box from what is existing (on the left) to what i've drawn on the right but where the recaptcha box also the same width as the last name box above it. I have multiple pages on my website with a newsletter form so would appreciate a solution to have them all the same as below. 

URL is pureapotheca.com/shop

Would there be a way to do same for the popup? Change the recaptcha from being a big clunky square to a thin wide rectangle? 

Your help is much appreciated. 

On 2/17/2022 at 5:44 PM, PureA said:

Hi @tuanphan

Wondering if you can help please, I've tried a few of the codes in the threads above but none of them seem to work exactly right. I'd like to align the recaptcha box from what is existing (on the left) to what i've drawn on the right but where the recaptcha box also the same width as the last name box above it. I have multiple pages on my website with a newsletter form so would appreciate a solution to have them all the same as below. 

URL is pureapotheca.com/shop

Would there be a way to do same for the popup? Change the recaptcha from being a big clunky square to a thin wide rectangle? 

Your help is much appreciated. 

Can you share link to page in screenshot? We can check easier

Has anyone managed to change the Bulky Square reCAPTCHA button to a normal rectangular shape yet? I'm super grateful to @tuanphan for the code to get the reCAPTCHA button to be above the Submit button. Now it would be perfect if it were a normal rectangle rather the the bulky square.

If anyone has solved this issue, I would really appreciate it if you could share what you did to solve it.

Thanks! 

On 11/5/2022 at 9:50 AM, MultifacetedLorraine said:

Has anyone managed to change the Bulky Square reCAPTCHA button to a normal rectangular shape yet? I'm super grateful to @tuanphan for the code to get the reCAPTCHA button to be above the Submit button. Now it would be perfect if it were a normal rectangle rather the the bulky square.

If anyone has solved this issue, I would really appreciate it if you could share what you did to solve it.

Thanks! 

If you share link to page where you added Captcha, we can check easier

Hi @tuanphan,

Ive been using your code to bring the reCAPTCHA box above the "sign up" button but the reCAPTCHA box is now a square vs its original default size (a rectangle). Would you be able to help look into our site and fix it? 

This is our website: https://mulberryandivy.com/ 

This was the code I added to Custom CSS: 

/* reCaptcha position */
.newsletter-form-body {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}
.newsletter-form-fields-wrapper.form-fields {
    order: 1;
}
.captcha-container {
    order: 2;
    margin-top: 20px;
}
.newsletter-form-button-wrapper.submit-wrapper {
    order: 3;
    margin-top: 0;
}

.captcha-container.sqs-model-rendered.align-center.rendered>div {
    width: 100% !important;
}

Thanks so much!! 

On 1/4/2023 at 8:01 AM, mulbandivy said:

Hi @tuanphan,

Ive been using your code to bring the reCAPTCHA box above the "sign up" button but the reCAPTCHA box is now a square vs its original default size (a rectangle). Would you be able to help look into our site and fix it? 

This is our website: https://mulberryandivy.com/ 

This was the code I added to Custom CSS: 

/* reCaptcha position */
.newsletter-form-body {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}
.newsletter-form-fields-wrapper.form-fields {
    order: 1;
}
.captcha-container {
    order: 2;
    margin-top: 20px;
}
.newsletter-form-button-wrapper.submit-wrapper {
    order: 3;
    margin-top: 0;
}

.captcha-container.sqs-model-rendered.align-center.rendered>div {
    width: 100% !important;
}

 

Thanks so much!! 

Hi,

It looks fine now