How to customize your SquareSpace Newsletter Form

Squarespace newsletter forms are great, but you can customize them to make them look even better! Here is a quick How To Squarespace tutorial detailing the code to use to style the Squarespace Newsletter Form.

Before styling:

After styling:

Step by Step:

In your squarespace editor menu, click Design > Custom CSS

To customize the form fields and add the colored bottom border, copy & paste this code in the css editor:

/* NEWSLETTER FORM: Customize Fields */
.newsletter-form-field-element {
background: white !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 4px #f08e80 !important;
}

To make the bottom border thinner or thicker, you just need to adjust the border-bottom size (here I am using 4px, but you can play with the number to adjust the size - feel free to play with it!)

To adjust the size of the fields in order to make them smaller, add this code below:

/* NEWSLETTER FORM: make fields smaller */
input {
 width: 375px;
 height: 25px;
}

To change the size of the newsletter form button (Sign Up), add this code below:

/* NEWSLETTER FORM: Change form button size */
body:not(.button-style-default) .newsletter-form .newsletter-form-button {    
  padding: .85rem .85rem !important;
}

Save, and… Voila!

---

You might also be interested in these articles: