How to Add a Substack Signup Form to Squarespace

You want readers to subscribe to your Substack right from your website. Fair enough. So you grab Substack's embed code, paste it in, and there it sits... looking like a guest who wandered in from someone else's party.

I ran into this on a recent build for an author. Here's how I fixed it.

What Substack gives you

In Substack, go to Settings > Growth and you'll find what they call an "embeddable subscribe button." It's a form, not a button, but whatever.

Drop it into a Squarespace embed block and it work’s but it’s not very customizable. You can leave the logo out. You can make the background transparent. But:

• The email field is styled by Substack, and you can't touch it

• Substack's branding stays put

• There's a link back to the Substack you can't remove

Under the hood it's just your Substack URL with /embed on the end, loaded in a frame. You're renting a little window of their site. Their house, their rules.

We can do better.

Two tools I tried first

Supascribe promises a slick custom embed. You hand over your email to get in, and then learn the free tier covers your first 1,000 views and 100 new subscribers. What happens after that? Does the form go dark? A signup form shouldn't come with a meter running. Meh, next.

Substack Signup Builder is a better option. It's totally free, has no branding, and gives you real control: headline, subtext, font sizes, success message, your own primary and secondary colors, six layouts, and four input styles.

But it’s not infinitely customizable… For example, corners come rounded or pill-shaped, no sharp option. But I wanted full control. So I built my own.

My fix: a Squarespace form that talks to Substack

The idea is simple. Use a native Squarespace form, so it inherits your site's fonts, colors, and button styles. Then a small script catches the email when someone hits submit and hands it to Substack.

Step 1: Build the form

1. Add a form block to your footer. This matters; the script only listens for forms there.

2. Name it something like "Substack Subscribe."

3. Delete every field except Email.

4. Change the button text to Subscribe.

5. Make it more minimal by removing the field label and use placeholder text instead, like "Your email."

6. Edit the post-submit message. Something like: “Almost there. Check your inbox and click the confirm link Substack just sent you.”

Step 2: Add the script

Paste this into Code Injection, in the Header box:

<script>
document.addEventListener('submit', function (e) {
  var form = e.target;
  if (!(form.tagName === 'FORM' && form.closest('footer'))) return;
  var emailField = form.querySelector('input[type="email"]');
  if (!emailField || !emailField.value) return;
  var body = new URLSearchParams();
  body.set('email', emailField.value.trim());
  fetch('https://SUBDOMAIN.substack.com/api/v1/free', {
    method: 'POST',
    mode: 'no-cors',
    body: body
  }).catch(function () {});
}, true);
</script>

Swap SUBDOMAIN for your own. If your Substack runs on a custom domain, replace the whole address before /api/v1/free.

Here's what it does in plain English: it waits for a form in your footer to be submitted, grabs the email, and sends it to Substack's API subscribe endpoint. Substack takes it from there, and Squarespace still handles its side of the submission how you have it set up to handle it. (You might want to link it to a Google Sheet or some other form of backup storage, even though Squarespace does let you grab all form submissions as a downloadable CSV.)

One note: tthe code above assumes it's the only form in your footer. If you have more than one, or have it in a different place on your site, you'll need a tighter target. Your chatbot of choice can help you adapt the script accordingly.

Step 3: Put the field and button side by side

Squarespace stacks the button under the field by default. I wanted one tight row. Press / in the editor, search for Custom CSS, and paste this at the bottom:

/** Footer form - inline layout **/
footer .react-form-contents {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}

footer .field-list {
  flex: 1 1 auto;
  margin: 0 !important;
}

/* hide the label */
footer .form-item.field label.title {
  display: none !important;
}

footer .form-button-wrapper {
  flex: 0 0 auto;
  margin: 0 !important;
  /* ignore the field's margin; just match the input */
  align-self: flex-start;
}

/* match heights */
footer .form-item.field input,
footer .form-button-wrapper button {
  height: 52px !important;
  box-sizing: border-box !important;
}

Save, refresh, and look at that. Email field and button, shoulder to shoulder. If 52px doesn't match your buttons, nudge it.

Check it on mobile too. It should hold the same row.

A few caveats

• The endpoint is undocumented. Substack runs it, and they could change it any day. If signups stall, investigate that.

• Errors fail silently. The browser can't read Substack's reply, so there's no error message if something breaks. That's another reason your confirmation message and a quick test signup matter.

• Code Injection needs the right plan. It isn't available on Squarespace's entry-level plan.

Test it with your own email before you call it done. Then check the Substack inbox and click the link like a good subscriber.

That's it: a Substack signup built on a Squarespace form, wearing your site's clothes instead of Substack's.

Happy designing!