Jump to content

Single-line newsletter block with reCAPTCHA checkbox

Recommended Posts

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

 

 

Screen Shot 2021-03-04 at 3.26.54 PM.png

Link to comment
  • Replies 8
  • Views 633
  • Created
  • Last Reply

Top Posters In This Topic

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

 

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

Screen Shot 2021-03-11 at 8.59.07 AM.png

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

Screen Shot 2021-03-14 at 4.42.16 PM.png

Screen Shot 2021-03-14 at 4.45.33 PM.png

Link to comment
  • 2 weeks later...
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)?

Screen Shot 2021-03-14 at 4.42.16 PM.png

Screen Shot 2021-03-14 at 4.45.33 PM.png

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

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
  • 1 year later...
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

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.