How to customize your SquareSpace Newsletter form

This tutorial will show you how to customize your SquareSpace Newsletter form.  You may want to make your site attractive to users and wish to redesign your newsletter form.  

This will code will work on Squarespace 7.1.

Complexity: Easy

---

Step 1

Go to Design > Custom CSS and paste the code.

/* Customize Newsletter Fields */
.newsletter-form-field-element {
background: #ebca14 !important; //background colour
border-top:  !important;
border-left: !important;
border-right: !important;
border-bottom: solid 3px #f4660b !important;
}

To adjust bottom line, you simply change the the border-bottom size value, in this case the value used is 3px.

---

Step 2

To adjust the Newsletter form field size, you can use the code below.

/* Reduce fields */
input {
 width: 375px;
 height: 24px;
}

---

Step 3

To adjust the size of the newsletter form button, you can use the code below.

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

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.