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!