Single-line newsletter block with reCAPTCHA checkbox

Site URL: https://boldhumansco.com/

Hi all! I have a newsletter block at my footer and have added a reCAPTCHA checkbox to it. I'd like it to all be in one line rather than being bulky and the reCAPTCHA checkbox being randomly placed. Pretty much, I'd just like everything, including the reCAPTCHA checkbox to be in a single line. I only have the form title ("Subscribe to our newsletter"), an email textfield/input, submit button (Join Us), and a reCAPTCHA checkbox. If you can provide code that would make it all one line, it would be much appreciated! Thanks in advance!

If possible, it would be even better if you can provide code that actually hides the reCAPTCHA checkbox until the "Join Us" button is clicked. But if that's not possible, either is fine, this is just preferred! Thanks!

The link is : https://boldhumansco.com/

Password: baldisbold

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1613968134310_20727 .newsletter-form-body {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
div#block-yui_3_17_2_1_1613968134310_20727 .newsletter-form-body div {
    width: 50% !important;
    margin-left: 0;
}}

On 3/7/2021 at 1:20 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1613968134310_20727 .newsletter-form-body {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
div#block-yui_3_17_2_1_1613968134310_20727 .newsletter-form-body div {
    width: 50% !important;
    margin-left: 0;
}}

 

Sorry, I wasn't clear with my words. I want it all to be a horizontal line. I was thinking something like the screenshot below, except a lot more organized. Thanks so much!

On 3/7/2021 at 1:20 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1613968134310_20727 .newsletter-form-body {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
div#block-yui_3_17_2_1_1613968134310_20727 .newsletter-form-body div {
    width: 50% !important;
    margin-left: 0;
}}

 

I've decided to just do it like this, since it's a much cleaner look. The screenshot is below. However, as you can see, the reCAPTCHA is formatted very strangely. How do I make it the normal rectangular shape that is on every other form (screenshot below)?

On 3/15/2021 at 3:45 AM, boldhumansco said:

I've decided to just do it like this, since it's a much cleaner look. The screenshot is below. However, as you can see, the reCAPTCHA is formatted very strangely. How do I make it the normal rectangular shape that is on every other form (screenshot below)?

Hi. Sorry for the delay. Do you still need help?

11 hours ago, tuanphan said:

Hi. Sorry for the delay. Do you still need help?

Yes, I do! Thanks for staying with me!

On 3/23/2021 at 9:22 AM, tuanphan said:

Hi. Sorry for the delay. Do you still need help?

Are you able to help me solve this problem?

I have the same problem as you @boldhumansco The reCAPTCHA button is a bulky square instead of the normal rectangle. @tuanphan - is there a way to change the bulky square reCAPTCHA button to the normal rectangle shape?

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

I have the same problem as you @boldhumansco The reCAPTCHA button is a bulky square instead of the normal rectangle. @tuanphan - is there a way to change the bulky square reCAPTCHA button to the normal rectangle shape?

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