How to customize your SquareSpace Newsletter Form
Squarespace’s built-in newsletter block is a powerful tool to grow your email list and engage with your audience. But out of the box, it may not perfectly match your brand’s design or layout preferences. With just a few simple customizations, you can enhance the look and feel of your newsletter form to better align with your website's aesthetics.
In this tutorial, we’ll walk you through how to customize your Squarespace newsletter form using built-in tools and custom CSS. This code will work on Squarespace 7.1.
Table of Contents
Why Customize Your Newsletter Form?
Your newsletter form is one of the first touchpoints your visitors may have with your brand. Customizing it offers several benefits:
Brand Consistency: Align colors, fonts, and spacing with your website’s visual identity.
Improved User Experience: Clear labels and visually appealing forms encourage more signups.
Professional Appearance: A well-designed form builds trust and credibility with potential subscribers.
Complexity: Easy
Step-by-Step Instructions
Step 1
Go to Pages > Custom Code > 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;
}
Key Takeaways
The newsletter block is easy to set up and powerful when customized.
Use built-in Site Styles for global consistency.
Add custom CSS to fine-tune layout, field appearance, and button styling.
Keep forms user-friendly to increase conversions.
You can hide or show specific fields like Name or Message depending on your goals.
FAQs
Can I change the form layout?
You can’t rearrange the fields without code, but you can style them to appear more visually balanced using CSS.
Can I hide the “Name” field?
Yes, go to the block settings and uncheck the Name field, or hide it via CSS.
Will custom CSS affect other forms?
If you want to limit styling to a specific form, wrap your CSS in a block ID selector.
Conclusion
Customizing your Squarespace newsletter form allows you to maintain brand cohesion while improving user engagement. Whether you're tweaking the style or hiding unnecessary fields, these small changes can make a big impact. With just a few adjustments, you’ll have a professional, on-brand newsletter form ready to grow your audience.
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, expressed 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.
