How to customize the newsletter block in Squarespace

This tutorial will show you how to customize the colors, fonts, and shapes of your newsletter block with CSS.

We’ll adjust the colors and fonts, creating styles that you can’t replicate using the design menu alone.

Here is a step-by-step video showing you how the codes work. When you’re ready to give it a try, you’ll find the steps and custom css from the tutorial below!

Important update: Squarespace made changes to the program menu in May 2025. If your menu looks different than the video, press the / key to open the program search and search for Custom CSS to navigate there directly.

Here are the codes from this tutorial. Be sure to update the values style to make this work for your own unique website design.

/* add a border to the block */
.newsletter-block{
border:1px solid #333
}

/* make the disclaimer text capitalized */
.newsletter-form-footnote  {
text-transform:uppercase!important
}

/* curve the corners of the input & give it a border */
.newsletter-form-field-element{
border-radius: 30px;
border:1px solid #333!important
}

/* change button color on a hover */
.newsletter-form .newsletter-form-button:hover{
background: #ccc!important;
color:#333!important;
opacity:1!important
}