Everything You Need To Know About ConvertKit and Squarespace

Note: you can now use Zapier directly to connect Squarespace Forms and Newsletter Blocks! Check out their guide here: https://support.squarespace.com/hc/en-us/articles/360000641507

Designing a website can feel daunting at first. 

With Squarespace, you will find that it is both easy to use, and eye-catching to the viewer. If you have not yet checked out this option for your website or blog, here's a bit more about that.

If you're already using Squarespace, and you're ready to take things to the next level, here is how you can embed your form(s) directly into your Squarespace site.

ConvertKit Forms and Squarespace

Embedding a ConvertKit Form in Squarespace is really easy. While there is a bit of code, fear not! It is a very basic copy & paste process that will have your form ready to go in just minutes. Let's do it in 

1. Edit a page and add a new code block.

2. Next, paste in your one-line ConvertKit form embed code.

Available in the Form Editor under "Embed."

3. View the Form on your site

Just kidding, this isn't a step. You're done! Check to make sure it looks the way you want. Good work!

NOTE: This works great with our Modal, Slide-In, and Inline Form styles. Check out our Form Styles for a closer look! If you want something to be on every page, you'll want to add it to your site template instead.

Just in case you'd like to see it in action, we've included these videos.

Here's How To Set Up Squarespace From Scratch:

One More!

Here's how to connect Squarespace forms and cover pages to ConvertKit through Zapier:

BONUS TUTORIAL - HOME PAGE BUTTON CONNECT TO CK MODAL

Special thanks to one of our customers and their roommate for putting this together.
 
 On Squarespace, the 'Page Banner' section (home welcome screen) does not allow a user to use "Embed block" sections. This is generally how a user would insert basic HTML code. Without this feature, a user cannot easily added the required 'rel="ck_modal' to THE main CTA button on their home page.

How to target this button:

1) Click on "Page Banner" settings

2) Access the "Advanced" settings

3) Under "Page Header Code Injection" insert the following code:

<script> document.addEventListener("DOMContentLoaded", function(event) {

document.getElementsByClassName('desc-wrapper')[0].children[4].children[0].rel = "ck_modal"

});</script>

The final part of this is what you might recognize. All of this code simply to add "ck_modal" to the link.

On the basic settings you simply point make it an external link to /#ck_modal.

Do you need help connecting ConvertKit + Squarespace?

Luci is a ConvertKit Expert and a Certified Squarespace designer! Let her help you connect your Squarespace site to your ConvertKit account.

Work with Luci >>

Did this answer your question?