How to style your newsletter opt-in block form field with CSS (Squarespace 7.1)
PIN TO SAVE FOR LATER!
The secret to taking your Squarespace* website to the next level is all in the details, and styling basic elements is an easy and efficient way to elevate your website in just a few minutes. In this tutorial, we show you how to update your Squarespace Newsletter Block Form Field with copy and paste CSS Snippets.
1. Underline newsletter form field:
SHOP BEST SELLING PARISIAN SQUARESPACE 7.1 TEMPLATE HERE
GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW
// UNDERLINED NEWSLETTER FORM FIELD
.newsletter-form-field-element {
background: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 1px #000000 !important;
}Notes:
Update the HEX code (#000000) to color of choice
To make underline thicker, update 1px to a value between 2-5px
If you’d like to add a background color, replace:
background: none !important;
with
background: #ffffff !important;
Then, update color HEX code to color of choice
2. Boxed/bordered newsletter form field:
GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW
// BOXED NEWSLETTER FORM FIELD
.newsletter-form-field-element {
background: none !important;
border: solid 1px #000000 !important;
}Notes:
Update the HEX code (#000000) to color of choice
To make border thicker, update 1px to a value between 2-5px
If you’d like to add a background color, replace:
background: none !important;
with
background: #ffffff !important;
Then, update color HEX code to color of choice
3. Background color with no border:
GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW
// NEWSLETTER FORM FIELD BACKGROUND COLOR UPDATE
.newsletter-form-field-element {
background: #ffffff !important;
border: none !important;
}Notes:
Update the HEX code (#ffffff) to color of choice
4. Adjust newsletter form field text styles
GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW
// NEWSLETTER FORM FIELD TEXT UPDATES
.homepage .field.email input, .homepage .field.email input::placeholder, .homepage .field.email input:focus {
color: #000000 !important;
text-transform: Uppercase !important;
font-size: 12px;
text-align: center;
}Notes:
Update the HEX code (#000000) to color of choice
Update “font-size” to desired text size
Update “text-align” to desired text alignment (eg. center, left, right)
* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!
