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 Pages → Custom Code → Custom CSS

Copy

Copied!

/* Make newsletter input and button smaller */
.newsletter-form .newsletter-form-fields-wrapper input[type="email"] {
  width: 300px !important; /* Control width */
  padding: 15px 15px !important; /* 
  Control height and inner space */
  font-size: 16px !important; /* Smaller text */
}
/* Style the submit button */
.newsletter-form .newsletter-form-button {
  width: 120px !important; /* Make button smaller */
  padding: 15px 15px !important;
  font-size: 16px !important;
  margin-left: -60px !important
}
/* Center-align on smaller screens */
@media screen and (max-width: 767px) {
  .newsletter-form .newsletter-form-fields-wrapper input[type="email"],
  .newsletter-form .newsletter-form-button {
    width: 100% !important;
    font-size: 16px !important;
    padding: 10px 20px !important;
  }
}
  

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

1. Go to Pages → Custom Code → Custom CSS

2. Paste the full CSS code above

3. Save and refresh your site

4. 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:

Copy

Copied!

.newsletter-form .newsletter-form-fields-wrapper input[type="email"],
.newsletter-form .newsletter-form-button {
  border-radius: 25px;
}
  

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!

---

Frequently Asked Questions

• 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.

  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:

  .sqs-block-newsletter .newsletter-form-button {

    transition: 0.3s !important;

  }

  .sqs-block-newsletter .newsletter-form-button:hover {

    background-color: #388BA4 !important;

    color: #fff !important;

  }