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)
Thanks for reading!
Did this tutorial help? Consider buying me a coffee as thanks! 🥰
Use discount code STYLEDSQUARE10 to save 10% off your Squarespace Subscription!
* Disclaimer: This post contains affiliate links. If you purchase through our links, we may earn a small commission at no extra cost to you. We only ever recommend tools we genuinely use and love.
