Squarespace 7.1 Newsletter Block: How to Style and Resize Email Forms
Squarespace 7.1's Newsletter Block is an awesome native function designed for accumulating a list of potential emails to send updates to. But for their part, the input elements in the form, such as the email input field and the submit button, can be too big or heavy when they‘re stuck into the header, footer, minimalist landing page, etc.
If you are in the market for a way to make your form look sleeker, smaller, and more stylish, then this guide is for you.
Here we guide you through an easy-to-follow CSS-based solution to:
Shrink the email input field
Reduce the submit button size
Make it look better on mobile devices
No plugins, no HTML juggling, just nice, easy-to-use, lightweight CSS enhancements directly in the Squarespace Custom CSS panel.
Let’s get started and turn your Newsletter Block into a nice, professional-looking signup form that fits beautifully in with the rest of your site.
Step-by-Step Solution
Step 1: Add This CSS
Go to Design → Custom CSS and paste:
/* Make newsletter input and button smaller */
.form-wrapper .newsletter-form-fields input[type="email"] {
width: 250px; /* Control width */
padding: 8px 12px; /* Control height and inner space */
font-size: 14px; /* Smaller text */
}
/* Style the submit button */
.form-wrapper .newsletter-form-button {
width: 120px; /* Make button smaller */
padding: 8px 10px;
font-size: 14px;
}
/* Center-align on smaller screens */
@media screen and (max-width: 767px) {
.form-wrapper .newsletter-form-fields input[type="email"],
.form-wrapper .newsletter-form-button {
width: 100%;
font-size: 16px;
padding: 10px;
margin-top: 10px;
}
}
What this CSS does:
Reduces the email input width to 250px
Shrinks the submit button width to 120px
Makes text smaller and forms tighter
On mobile screens, it makes them full-width for better usability
Step 2: Adjust if Needed
You can tweak these values:
width: 250px; → make narrower or wider
font-size: 14px; → adjust for readability
padding → control height (more padding = taller field)
How to Use It
Go to Design → Custom CSS
Paste the full CSS code above
Save and refresh your site
Your Newsletter form will now look smaller and cleaner
Customization Options
✔ Add border-radius for rounded input fields
✔ Change background colors
✔ Add subtle hover effects on the submit button
✔ Adjust spacing between input and button if needed
Example for rounded corners:
.form-wrapper .newsletter-form-fields input[type="email"],
.form-wrapper .newsletter-form-button {
border-radius: 6px;
}
Final Thoughts
Adjusting the size of the Squarespace 7.1 Newsletter Block email input field and submit button is a small touch that can make a big difference if you're going for a clean, modern, and mobile-responsive design.
With little more than a few lines of CSS, you can:
Fit in a compact and good-looking form.
Better alignment within tight spaces, such as headers or footers
Improve the experience; this site can be used on all machines
No coding is necessary in the 3rd party plugins, and you don’t need to have a degree in computer science. Just paste this code into your Squarespace Custom CSS panel, change it to your liking, and you’re good!
A leaner, faster newsletter signup form doesn’t just make you look better, but also results in more people signing up, which means more engaged subscribers, and a rapidly growing audience, easy as that.
Want to add even more fun to your form? Play with the colors, spacing, and hover effects to fit your site’s branding. You're only limited by your creativity when it comes to CSS!
FAQ: Styling and Resizing the Newsletter Block in Squarespace 7.1
1. Why does the default Newsletter Block look oversized?
Squarespace 7.1 applies generous spacing, full-width inputs, and large fonts by default to ensure accessibility and readability. While helpful in some areas, this can make the form look bulky, especially in headers, footers, or minimal layouts.
2. Can I shrink the email field and submit button without affecting the rest of my site?
Yes. The CSS provided in this guide specifically targets .newsletter-form-fields and .newsletter-form-button, so it only affects the Newsletter Block, not other forms like Contact or RSVP blocks.
3. Is this CSS mobile-responsive?
Absolutely. The guide includes a responsive media query that ensures the input field and button stack vertically and expand to full width on smaller screens:
@media screen and (max-width: 767px) {
...
width: 100%;
}
This improves usability and appearance on smartphones and tablets.
4. How can I style just one specific newsletter form on a page?
Use the form’s unique block ID like this:
#block-yui_3_17_2_1_123456 input[type="email"],
#block-yui_3_17_2_1_123456 .newsletter-form-button {
width: 200px;
}
Find the block ID using Chrome DevTools or the Squarespace ID Finder Chrome extension.
5. What elements can I customize further?
With CSS, you can easily:
Change background and text colors
Add rounded corners using border-radius
Add hover effects to the submit button
Adjust spacing using margin and padding
Animate with transitions for smooth effects
Example:
.newsletter-form-button:hover {
background-color: #333;
color: #fff;
transition: all 0.3s ease-in-out;
}
6. Can I safely change the width or font size values?
Yes. You’re encouraged to fine-tune the style:
width: 250px; → Try 200px, 300px, or percentages like 80%
font-size: 14px; → Try 12px for compact, or 16px for legibility
padding → Increase for taller buttons, reduce for slimmer design
7. Will this CSS affect my newsletter functionality?
Not at all. These styles only affect visual appearance. The core functionality—email collection, Mailchimp, or built-in subscriber storage—remains fully intact.
8. Do I need a Business Plan or Developer Mode to use this?
No. You can apply all these changes in Design → Custom CSS even on the Personal Plan. No Developer Mode or external plugins are required.
9. How do I reset the design if something goes wrong?
Simply go to Design → Custom CSS, delete or comment out (/* your code */) the custom code you added, and click Save. The block will revert to its default style.
10. Does a smaller form improve conversions?
Yes. Clean, minimalist forms that match the design of your site can increase signup rates by improving user trust and reducing friction, especially on mobile. A leaner design feels more inviting and professional.
