Using ConvertKit with Squarespace

(Approximately a 3-minute read) 

Everything You Need To Know About ConvertKit and Squarespace

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! 

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. Here's how in 3 quick steps! 

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

Screen Shot 2015-09-22 at 2.31.21 PM

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

Available on your form settings page under "Embed."

Screen Shot 2015-09-22 at 2.33.04 PM

3. View the form on your site

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

Screen Shot 2015-09-22 at 2.33.32 PM


ConvertKit Hint: 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: 


Special thanks to one of our customer 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"
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.

Have you joined our Slack Community yet? Jump in today and don't miss out on live updates!

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 >>

Still need help? Contact Us Contact Us