How to customize the newsletter block in Squarespace

Jul 4

This tutorial was recorded in Squarespace 7.1 but these codes will work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Are you tired of the same old newsletter block look in Squarespace? Want to add some personality to your website? In this week's tutorial, you’ll learn how to customize the colors, fonts, and shapes of your newsletter block with CSS.

Get ready to unleash your creativity and make your newsletter block uniquely yours! 🎉

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!

How to add a newsletter block to your site

To add a newsletter block to Squarespace, you’ll need to follow these steps:

Hop into edit mode by selecting edit on the top left-hand side of the site preview.
Select the add content block option for a page section. Pro-tip: you can add this to a footer section too!
Add the newsletter block
Change the name of the form, the title, description, and disclaimer text, and toggle on the name option if you want to collect that information.
Optional: add a post submit message, or custom HTML. You can also have it redirect someone to a new page; great for lead magnets!
Update the design to be stack or float and you can change the text alignment for every element inside the newsletter block.
Optional: toggle on the background option and adjust the padding.
Last but not least, you can update the storage options to have the data added to a sheet in your Google drive, integrate with Zapier, or add it directly to MailChimp.

Customize Your Newsletter Block with CSS

To customize your newsletter block, update the following codes to match your site style by changing the color, text, and other values!

/* 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
}

Custom Code Tips

To add the code to your site, navigate to Design and then select Custom CSS. Here you can paste your newly updated code.

If you want to change the style of an individual newsletter block, this tutorial will teach you how: How to change one thing with custom css

If you liked this tutorial, you’ll love these! ❤️ I have older tutorials that will teach you how to customize other aspects of a Squarespace newsletter block. Here are links to those if you want to check them out: