Creating Single Line Newsletter Blocks in Squarespace

One of the most important aspects of building a website and/or community is to be able to communicate with your following. Among the best ways to do so is by creating a mailing list, allowing you to send updates and news to your users at any moment.

Squarespace supports creating mailing lists with the Newsletter Block, and you can integrate them with Mailchimp or Google Docs. However, we realized that at times, the newsletter block can be a bit obtrusive as it has a bunch of padding and a background.

We wanted to create a simple, one-line newsletter block and decided to share it with you! Check it out below. (This is also a great opportunity to sign up for OUR mailing list to get plugin updates and early VIP access, HA!) ☟

To make this, create a Newsletter Block that (important!) does not require a name field and does not have a disclaimer. (If you put those extra fields in it’ll mess up the spacing).

Then, head to Design → Custom CSS and add the following code:

CSS

  .newsletter-block .newsletter-form-wrapper {
    padding: 0;
    background: none;
  }
  @media only screen and (min-width:820px) {
    .newsletter-block .newsletter-form {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
    }
    .newsletter-block .newsletter-form-header {
      flex: 2;
      -webkit-flex: 2;
      text-align: left;
    }
    .newsletter-block .newsletter-form-header-title, .newsletter-block .newsletter-form-header-description p {
      text-align: left;
    }
    .newsletter-block .newsletter-form-header-description p {
      margin: 10px 0 0;
    }
    .newsletter-block .newsletter-form-header-title {
      font-size: 25px;
      margin-bottom: 0;
    }
    .newsletter-block .newsletter-form-body {
      flex: 3;
      -webkit-flex: 3;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      justify-content: flex-end;
      -webkit-justify-content: flex-end;
    }
    .newsletter-block .newsletter-form-fields-wrapper {
      flex: 2;
      -webkit-flex: 2;
    }
    .newsletter-block .newsletter-form-field-wrapper {
      width: 95%;
    }
  }

And that’s all there is to it! You have your one-liner newsletter blocks. Feel free to customize it to your liking and share your results/questions in the comments 🙂

BONUS – Adding a Background Image

Thanks to the awesome comment of Hillary Rain, we are bringing you one more addition to this post: the ability to add a background image to the newsletter block. This will give your newsletter some more character and it could look as cool as this:

The first thing you need to do is get a URL for your background image. If you are not sure how to do this, follow our tutorial here. Then, replace the first 4 lines of the code above with the following code and place your URL between the quotations containing YOURURLHERE:

CSS
.newsletter-block .newsletter-form-wrapper {
    padding: 10px 10px;
    background-image: url('YOURURLHERE');
  }