NOMADHair Posted December 8, 2021 Share Posted December 8, 2021 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! Link to comment
tuanphan Posted December 11, 2021 Share Posted December 11, 2021 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; } 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
NOMADHair Posted December 31, 2021 Share Posted December 31, 2021 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 Link to comment
tuanphan Posted January 2, 2022 Share Posted January 2, 2022 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/ 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
NOMADHair Posted January 2, 2022 Share Posted January 2, 2022 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! Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 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; } 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
Namrata Posted January 10, 2022 Share Posted January 10, 2022 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> Link to comment
tuanphan Posted January 12, 2022 Share Posted January 12, 2022 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 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
Namrata Posted January 12, 2022 Share Posted January 12, 2022 Hi tuan it's www.peoplefirst.co.in Link to comment
NOMADHair Posted January 12, 2022 Share Posted January 12, 2022 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 🙂 Link to comment
tuanphan Posted January 12, 2022 Share Posted January 12, 2022 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 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
NOMADHair Posted January 13, 2022 Share Posted January 13, 2022 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 🙂 Link to comment
PureA Posted February 17, 2022 Share Posted February 17, 2022 (edited) 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. Edited February 17, 2022 by PureA Link to comment
tuanphan Posted February 21, 2022 Share Posted February 21, 2022 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 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
MultifacetedLorraine Posted November 5, 2022 Share Posted November 5, 2022 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! Link to comment
tuanphan Posted November 9, 2022 Share Posted November 9, 2022 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 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
mulbandivy Posted January 4, 2023 Share Posted January 4, 2023 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!! Link to comment
tuanphan Posted January 7, 2023 Share Posted January 7, 2023 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment