Every once in a while, I have an idea to upgrade my website, and the process ends up being non-trivial and taking more time/research than I’d like. “Surely I can’t be the only one running into this issue!” I think. I’m then motivated to write a blog post, on the slim chance that it can help someone else in the future.

Last time, it was adding footnotes via Bigfoot. Today, it’s styling Buttondown’s subscription form like a Squarespace newsletter block!

Buttondown is an email newsletter platform that I migrated to after Tinyletter, my previous platform, was absorbed by Mailchimp and then shut down. While I’ve used other newsletter platforms in the past (including Mailchimp, Constant Contact, etc.), I liked Buttondown’s no-frills approach and customer support.

My newsletter subscription form is included at the bottom of every page on this website. Problem #1: Squarespace’s built-in newsletter block has a very limited number of storage options for the submitted emails. While it can connect directly to Mailchimp, if you want to connect to any other service, the only option is using Zapier as a third-party integration; Zapier integration isn’t available on Squarespace’s personal plan, and upgrading to Business is +$100/year! I ended up storing emails in a Google Spreadsheet and manually importing them to my newsletter platform. Definitely not ideal, but not unmanageable for how rarely I was sending out emails.

Buttondown offers this blog post with guidance for adding its subscription form to Squarespace as an embed block. Problem #2: The subscription form is completely unstyled. I get that this is for maximum flexibility on the client’s end, but it requires knowledge of HTML and CSS if you want to get it to look consistent with the rest of your website’s styles. (Buttondown does provide a styled version of its subscription form that can be embedded as an iframe, but it’s similarly basic.)

I sat on these two problems for a long time, but the other day, I was finally motivated enough to undertake the project of styling the Buttondown form like Squarespace’s newsletter block. Essentially, I just inspected the Squarespace CSS and wrapped the Buttondown form elements in Squarespace’s CSS class names. The result is an embed block that, as far as I can tell, looks identical to Squarespace’s newsletter block, but does connect properly to my Buttondown database. You can see the results at the bottom of this page.

I’m including the HTML and CSS I used in my embed block below. Replace Buttondown links to point them to your newsletter as appropriate. Note: I’m using Squarespace’s Bedford family of layouts on my website, so results may vary on other layouts. I’ve also removed settings like Squarespace’s reCAPTCHA (Buttondown doesn’t offer reCAPTCHA support yet but does do other server-side email address validation and IP address screening).

<div id="newsletter-signup" class="sqs-block newsletter-block sqs-block-newsletter rendered" style="padding: 0px !important;">
  <div class="newsletter-form-wrapper newsletter-form-wrapper--layoutFloat newsletter-form-wrapper--alignCenter">
    <form class="newsletter-form" action="https://buttondown.com/api/emails/embed-subscribe/missivesfromthemaze" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.com/missivesfromthemaze', 'popupwindow')" class="embeddable-buttondown-form">
      <header class="newsletter-form-header">
        <h2 class="newsletter-form-header-title">Sign up for release news and more.</h2>
        <div class="newsletter-form-header-description">
          <p class="" style="white-space:pre-wrap;">Subscribe to <a href="https://buttondown.com/missivesfromthemaze?tag=website-footer"><em>Missives from the Maze</em></a> to receive (very occasional) updates from Amy about writing, publishing, and future releases.</p>
        </div>
      </header>
      <div class="newsletter-form-body">
        <div class="newsletter-form-fields-wrapper form fields" style="vertical-align: middle; margin-top: 0;">
          <div class="newsletter-form-field-wrapper form-item field email required" style="vertical-align: bottom;">
            <label class="newsletter-form-field-label title" for="bd-email">Email Address</label>
            <input type="email" name="email" id="bd-email" class="newsletter-form-field-element field-element" x-autocompletetype="email" autocomplete="email" spellcheck="false" placeholder="Email Address" />
            <input type="hidden" name="tag" value="website-footer" />
          </div>
          <div data-animation-role="button" class="newsletter-form-button-wrapper submit-wrapper" style="vertical-align: middle;">
            <button class="newsletter-form-button sqs-system-button sqs-editable-button-layout sqs-editable-button-style sqs-editable-button-shape sqs-button-element--primary" type="submit" value="Sign Up">
              <span class="newsletter-form-spinner sqs-spin light large"></span>
              <span class="newsletter-form-button-label">Sign Up</span>
              <span class="newsletter-form-button-icon"></span>
            </button>
          </div>
        </div>
        <div class="newsletter-form-footnote">
          <p class="" style="white-space:pre-wrap;">Your information will be kept private.</p>
        </div>
      </div>
    </form>
  </div>
</div>