Jump to content

Styling Newsletter Form Button

Recommended Posts

Site URL: https://antelope-sturgeon-xd4r.squarespace.com/%20ATTN!!!IN%20DEVELOPMENT

Hi– 

(The site link won't work as I'm still developing it and it's set to private). I'm working on a site that includes the form pictured below. I'm able to style everything with CSS -except- the button's font size, text color & background color. See my code below – am I missing something???

Thank you!

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}109128008_ScreenShot2022-04-05at4_37_20PM.thumb.png.59162505e3376ddcf8bc7e0ea1a763fe.png

Edited by camfont
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

On 4/6/2022 at 4:43 AM, camfont said:

Site URL: https://antelope-sturgeon-xd4r.squarespace.com/%20ATTN!!!IN%20DEVELOPMENT

Hi– 

(The site link won't work as I'm still developing it and it's set to private). I'm working on a site that includes the form pictured below. I'm able to style everything with CSS -except- the button's font size, text color & background color. See my code below – am I missing something???

Thank you!

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}109128008_ScreenShot2022-04-05at4_37_20PM.thumb.png.59162505e3376ddcf8bc7e0ea1a763fe.png

if your site is not go-live. You can share it with the site wide password so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 4/14/2022 at 6:47 AM, camfont said:

Oh I didn't know about this! Here you go: k5ut$YXZ53ZR!42

EDIT: Here is the actual website link: https://antelope-sturgeon-xd4r.squarespace.com/

Thanks!

Add to Design > Custom CSS

/* Latest blog form */
div#block-yui_3_17_2_1_1649190699515_6868 span.newsletter-form-button-label {
    color: red;
    font-size: 12px;
}
div#block-yui_3_17_2_1_1649190699515_6868 button {
    background-color: #f1f !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Thank you tuanphan– sadly, now it looks like the attached image  😭

And I'd like it to look more like the image in the original post, except the button color should be #F2CBCB and the button text should be white. Here's all my code if it helps:

#block-yui_3_17_2_1_1649190699515_6868 {
  margin-top: 30px;
  background-color: #172936 !important;

   header {
    .newsletter-form-header-title { 
      font-size: 36px !important;
    }

    .newsletter-form-header-description {
      p { 
      font-size: 24px !important;
      }
    }
  }
}


  .newsletter-form-body {
    input.newsletter-form-field-element {
      width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
    }

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}

  }

div#block-yui_3_17_2_1_1649190699515_6868 span.newsletter-form-button-label {
    color: #ffffff !important;
    font-size: 12px;
}
div#block-yui_3_17_2_1_1649190699515_6868 button {
    background-color: #F2CBCB !important;
}

 

Screen Shot 2022-04-18 at 2.45.49 PM.png

Link to comment
On 4/19/2022 at 2:50 AM, camfont said:

Thank you tuanphan– sadly, now it looks like the attached image  😭

And I'd like it to look more like the image in the original post, except the button color should be #F2CBCB and the button text should be white. Here's all my code if it helps:

#block-yui_3_17_2_1_1649190699515_6868 {
  margin-top: 30px;
  background-color: #172936 !important;

   header {
    .newsletter-form-header-title { 
      font-size: 36px !important;
    }

    .newsletter-form-header-description {
      p { 
      font-size: 24px !important;
      }
    }
  }
}


  .newsletter-form-body {
    input.newsletter-form-field-element {
      width: 300px !important;
      height: 50px !important;
      font-size: 0.9rem !important;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
    }

.newsletter-form-button {
      vertical-align: center !important;
      padding-top: 13px !important;
      height: 45px !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      font-size: 12px !important;
      color: #ffffff !important; 
      background-color: #F2CBCB !important;
}

  }

div#block-yui_3_17_2_1_1649190699515_6868 span.newsletter-form-button-label {
    color: #ffffff !important;
    font-size: 12px;
}
div#block-yui_3_17_2_1_1649190699515_6868 button {
    background-color: #F2CBCB !important;
}

 

Screen Shot 2022-04-18 at 2.45.49 PM.png

Hi,

You want

  • Button background: #F2CBCB
  • Button text color: white
  • Button under Email address field
  • Center Email input + button

Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 4/27/2022 at 5:34 AM, camfont said:

Tuanphan– Correct! That's exactly what I'd like 🙂

TO make button under input, add this to Design > Custom CSS

div#block-yui_3_17_2_1_1649190699515_6868 .newsletter-form-body {
    display: flex;
    flex-direction: column;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 5/4/2022 at 12:42 AM, camfont said:

Thank you, tuanphan – that did center the button. But what about the other three styling issues:

  • Button background: #F2CBCB
  • Button text color: white
  • Center Email input + button

Thanks!!!

I see you solved

cbcb.png.b580a913ef29fdcaa638aa61bc5092a1.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.