Adjust positioning of reCAPTCHA button

Hello,

I've added reCAPTCHA to my newsletter block -- unfortunately, the reCAPTCHA button appears AFTER the "sign up" button which may lead to confusion. Is there any way to adjust its positioning (aside from the center, left, right options in the newsletter block)? If not, what alternatives have you used to make this easier for visitors?

Thanks!

Justin

Can your share link to page where you inserted newsletter block?

@tuanphan Same thing for me too. reCAPTCHA is positioned a bit awkward (see attached). Could you tell me how to move it to middle?

personalchefberlin.de

password: june

3 hours ago, chichi said:

@tuanphan Same thing for me too. reCAPTCHA is positioned a bit awkward (see attached). Could you tell me how to move it to middle?

personalchefberlin.de

password: june

Add to Home > Design > Custom CSS

.captcha-container.rendered {
    margin: 0 auto;
}

@tuanphan I'm having the same problem as JJI. The reCaptcha is displaying under the Submit button. Is there a way to move it?

onecausechurch.com/new-here

17 hours ago, brookerobertson said:

@tuanphan I'm having the same problem as JJI. The reCaptcha is displaying under the Submit button. Is there a way to move it?

onecausechurch.com/new-here

You mean center?

@tuanphan No, sorry. I meant can the reCaptcha be moved up (above the Submit button)? It seems strange for it to be below it.

17 hours ago, brookerobertson said:

@tuanphan No, sorry. I meant can the reCaptcha be moved up (above the Submit button)? It seems strange for it to be below it.

Add to Design > Custom CSS

/* reCaptcha */
div#block-b55464b3221f0eb3d9df {
.newsletter-form-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.captcha-container.sqs-model-rendered.align-left.rendered {
    order: 2;
}
.newsletter-form-fields-wrapper.form-fields {
    order: 1;
}
.newsletter-form-button-wrapper.submit-wrapper {
    order: 3;
    margin-top: 0;
    padding-top: 0 !important;
}
}

@tuanphan That worked! Thanks so much.

On 5/20/2021 at 12:24 AM, brookerobertson said:

@tuanphan That worked! Thanks so much.

Do you need to help with these?

Site URL – https://onecausechurch.com/

1. (Tablet/Mobile-Overlay Menu) change logo color?

2. (Tablet-Footer) Increase column width?

3. (Mobile-Footer) Reduce space between Proclamations – Download..?

4. (Mobile-Footer) Move footer nav links to top of text?

I have this same question. How can i move my recaptcha above the button? or even hide it until a user actually hits the button?

1 hour ago, funkybunch said:

I have this same question. How can i move my recaptcha above the button? or even hide it until a user actually hits the button?

 

Hi. Can you share link to your site? We can help easier

5 hours ago, tuanphan said:

Hi. Can you share link to your site? We can help easier

site url: https://www.fullbasketdelivery.com/

5 hours ago, tuanphan said:

Hi. Can you share link to your site? We can help easier

ideally the reCaptcha would not show until they have filled out the form and pressed the button. If that is not possible then I would like to at least move the captcha to be below the form and above the submission button

On 6/6/2021 at 11:59 AM, funkybunch said:

ideally the reCaptcha would not show until they have filled out the form and pressed the button. If that is not possible then I would like to at least move the captcha to be below the form and above the submission button

Add to Settings > Advanced > Code Injection > Footer (code by @creedon)

<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>

8 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer (code by @creedon)

<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>

 

very nice. I have not written a lot of js before so was unfamiliar with some of the syntax. This is easy to follow

Hi - great code Tuan, thank you. I used it to hide the captcha until the forms are filled out. Two quick questions: At present, the SUBMIT button must be pressed twice, is there a way to fix this? And, it appears as a square box, is it possible to make it the long-style captcha box again?

Thanks!!

(Website www.businessfintech.com)

Hey - same issue as the original post with recaptcha appearing after the submission button. How can I move it above the submission button?

https://thefocalmind.com/lemonade

Thanks

Lorna

5 hours ago, lornaclare said:

Hey - same issue as the original post with recaptcha appearing after the submission button. How can I move it above the submission button?

 

https://thefocalmind.com/lemonade

Thanks

Lorna

Add to Design > 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;
}

On 9/13/2021 at 8:11 PM, coriwhat said:

Hi - great code Tuan, thank you. I used it to hide the captcha until the forms are filled out. Two quick questions: At present, the SUBMIT button must be pressed twice, is there a way to fix this? And, it appears as a square box, is it possible to make it the long-style captcha box again?

Thanks!!

 

(Website www.businessfintech.com)

Hi,

Where is form? I don't see it on homepage

Having this same issue on my website. I've tried some of the code suggested above but none of them fix it for me 😕 

UBSkylights.com

Thank you in advance!!

On 10/9/2021 at 8:43 AM, CGaff16 said:

Having this same issue on my website. I've tried some of the code suggested above but none of them fix it for me 😕 

UBSkylights.com

Thank you in advance!!

Add to Design > 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;
}

On 10/10/2021 at 11:05 AM, tuanphan said:

Add to Design > 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;
}

Thank you so much! That worked, but it caused the Captcha box to change to a smaller square box for some reason, is this normal?

Thank you so much! That worked, but it caused the Captcha box to change to a smaller square box for some reason, is this normal?

On 10/11/2021 at 8:30 PM, CGaff16 said:

Thank you so much! That worked, but it caused the Captcha box to change to a smaller square box for some reason, is this normal?

Add this under above code

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

5 hours ago, tuanphan said:

Add this under above code

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

 

Thank you so much, you're the best!