Jump to content

Adjust positioning of reCAPTCHA button

Recommended Posts

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
  • 4 weeks later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Susana_SQSP changed the title to Adjust positioning of reCAPTCHA button
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
  • 3 months later...

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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.