How to Connect ConvertKit Forms to Your Squarespace Website

Get set up to collect email addresses in minutes

*This post contains affiliate links. I receive a commission if you click a link and purchase. Note that I only recommend software or products I use, have used, or can recommend!

I love ConvertKit* for email marketing and Squarespace* for website building and hosting—they are both incredibly user friendly and make running an online business simple, even if you’re not the best at tech.

I use them in my own business and suggest them for most of my website design clients.

Getting setup with an opt-in form on your Squarespace website is super easy:

Step 1: Sign up for ConvertKit

If you’re not signed up with ConvertKit yet, you can use my link*. It’s totally free if you have 1000 subscribers or less, or if you just want to use it to collect emails. (It’s $29/mo if you want to do things like automated emails, but let me tell you, it’s worth every penny!)

I prefer ConvertKit to Mailchimp, Flodesk and Squarespace Campaigns—though each of these softwares has their merit. You can read my Flodesk vs. ConvertKit comparison here.

In short, I prefer ConvertKit because it’s simple and straightforward, but has powerful email marketing functionality that can help drive sales and revenue. It’s great for small businesses, but can grow with you if you go big-time.

Step 2: Create a Form in ConvertKit

Once you’ve signed up for ConvertKit you’ll need to create a form—it can be a pop-up modal, inline, slide in or sticky bar form that collects email addresses, first names, and whatever other info you want to collect when people subscribe.

Tip: It’s best to ask for the bare minimum information, as your form will convert better.

I like to ask for first names so that I can send personalized emails, which also tend to convert better.

How to choose a form:

Choose the form that makes the most sense for your business, visitors and website. There are form hacks that I’ll cover in my course, but in short, choose the one that you think will match what you want on the form—if you want an image, description text, a disclaimer, then choose the Charlotte form. If you don’t like pop-ups, you can use a slide in or inline form.

Experiment until you find the form that works for you.

Don’t worry—you can always change the form to another style. You can also duplicate one form and try out different designs or headlines on that duplicate. If you don’t immediately see the changes reflected on your site, make sure to clear your cache so that your browser isn’t showing you the old version of your form.

You can use multiple forms if you want.

I like to use multiple forms on my site—an inline form on my homepage, an inline form on my footer, and a pop-up “modal” form that pops up when someone is leaving the site, also known as “exit intent” pop-up, because they intend to exit. :) I can’t tell you how well this form converts! Ok, I will tell you—it converts well!

Step 3: Grab the Javascript

I know, it sounds scary. JA-VA-SCRIPTTTT. But I promise, you are just copying and pasting code that’s generated for you by ConvertKit. You can copy-paste, right? ;)

Navigate over to where it says “Embed” in the top right corner when you’re in the Form area of the site. Copy and paste the Javascript code into a Notes app or Google doc—you’ll need it in a moment!

Step 4: Put Javascript on Your Squarespace Site

First you need to decide if your form will be on just one page, or site-wide.

For instance, you might want a pop-up to show up on every page of your site, and you might want an inline form to show up on your homepage only.

If you are putting the form in a specific location on one page, or in the footer, use the Code Block.

Go to the location you wish to embed the form. Press “Edit”, select the Code Block option from the content blocks on the right hand-side (look for the + sign) and drag the Code Block to where you want it to be on the page.

Then paste the javascript code (that you copy-pasted into your Notes app or Google Doc) into the Code Block. It may not look like it worked once you save it, but if you visit your site as a user—rather than being in the backend of Squarespace—refresh the page and you should see your form there!

If you’re using a pop-up modal that you want site-wide, use Code Injection.

Note: You must have the Business plan or higher for this one.

Navigate to your Squarespace backend—click “Settings,” then “Advanced,” then “Code Injection”—paste the Javascript code for your popup modal in the Header—it should look similar to this: 

Don’t forget to label your Javascript like I did to keep your code organized! Copy paste the following above the Javascript so you can easily see what the code corresponds to on your site: <!-- ConvertKit modal -- >

Step 5: Test the form.

ABT. Always be testing! Pretend you’re a user on your site and fill out the form. Check ConvertKit to make sure you're logged as a subscriber.

Note that if you’ve set up your form to confirm subscribers (recommended!) then you’ll need to confirm your subscription first via the automated confirmation email, and then you’ll be in ConvertKit as a Confirmed Subscriber. Alternatively, you can toggle “Unconfirmed Subscribers” and if you didn’t confirm your subscription, your email will be listed there.

That’s it!

Now your form is ready to collect emails, and whatever other information you’ve chosen.