Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adjust positioning of reCAPTCHA button


JJI

Question

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

Link to comment

25 answers to this question

Recommended Posts

  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

image.thumb.png.334874178d147742f0561786d2038d8a.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

onecausechurch.com-01-min.png

2. (Tablet-Footer) Increase column width?

onecausechurch.com-02-min.png

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

onecausechurch.com-03-min.png

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

onecausechurch.com-04-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

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?

 

Screen Shot 2021-06-05 at 5.21.52 PM.png

Edited by funkybunch
to simplify what is being shown
Link to comment
  • 0
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?

 

Screen Shot 2021-06-05 at 5.21.52 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Link to comment
  • 0

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)

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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?

Screen Shot 2021-10-11 at 9.29.51 AM.png

Edited by CGaff16
Link to comment
  • 0
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?

Screen Shot 2021-10-11 at 9.29.51 AM.png

Add this under above code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...