How to Link a Button or Image to a ConvertKit Modal Popup in Squarespace
Have you been trying to implement a modal popup form on your Squarespace website?
But just can’t get it to work?
Watch this mini Squarespace and ConvertKit tutorial to learn how to get the modal to work with text and images!
🛑Image Update 2/17/2023🛑
The trick no longer works for images. Please see the explanation in the blog post.
Table of Contents Show
ConvertKit Pop-Up Video Tutorial
In this ConvertKit Tutorial you will learn how to
Launch a Squarespace Modal Form with a Squarespace Button (without CSS)
Launch a Squarespace Modal form with an Image on Squarespace
Steps to get a ConvertKit Click modal on your website
What You need
1. a Modal Form on ConvertKit
2. A Squarespace button or an Image of your choice
Create a Modal Form In ConvertKit
Click Landing Pages and Forms in the Menu
Click Add New Form
Click Form > Choose Modal > Choose a Modal Form Variation you want. I like Charlotte or Poplar
Update the look of your form as needed.
Update the Modal form So It Displays Upon Click
Next, click in the settings for that form (the cog in the right-hand menu)
Scroll down, and under Display Options, and select Scroll Percentage or TimingIf you only want the modal to appear based on the click you can set the timing really high (9999 seconds) or set the scroll percentage to 100%.
SAVE the form, by clicking Save in the top right hand corner (below the ConvertKit menu)
Go to Embed and click the red copy button to copy the HTML code (image below)
Save the form again for good luck!
NOTE as you read the tutorial the EXAMPLE CODE. “YOURINFO” will likely be your website or business name. And YourFormID will be a string of numbers that ConvertKit Provides to you.
Embedding a ConvertKit Click Modal Form on Squarespace
Go back to Squarespace and add a code block to your desired page or blog post (you can also add it to the header of your page or site)
Erase any code within the block and paste in the javascript code you just copied from ConvertKit
<script async data-uid="YourFormID" src="https://YOURINFO.ck.page/YourFormID/index.js> </script>
Save the code block
Adjusting the code so the Pop Up Modal Form will trigger on a Squarespace Button or Image
Go Back to the ConvertKit Form you created
Under settings, scroll down until you see “Trigger this modal with a link by copying the code below:” Click the red copy button
Open a text file, word document, or Google Doc and paste the code. It will look like this
<a data-formkit-toggle="yourformid" href="https://YOURINFO.ck.page/YourFormID">Your link text</a>">Your link text</a>
Next, you’re going to rearrange and delete some of the coding until it looks like the example below. Make sure to take notice of where the quotations are and where the quotations aren’t
https://YOURINFO.ck.page/YourFormID"data-formkit-toggle="YourFormID
Adding ConvertKit Pop Up Modal Form to Squarespace Button
Copy your new adjusted code
Add a Button Block to your page
Edit the button Text
In the Clickthrough URL section, paste the code from step 3
Click Apply
Save the Page
Adding ConvertKit Pop Up Modal Form to Squarespace Image
Unfortunately, Squarespace has made some updates to the how image links work. Before you could add a quotation mark (") within the link, but now Squarespace changes a quotation mark within an image link to the code: "
For example:
https://YOURINFO.ck.page/YourFormID"data-formkit-toggle="YourFormID
To Squarespace this looks like a link, and then returns a 404 site within ConvertKit. You can see what I mean by clicking the image example below.
Copy your new adjusted code
Add an Image Block
Click the Design Tab within the Image Settings
Paste the new code into the Clickthrough URL of the image
Click Apply
Save the Page
Now when you click on the button or image, the Modal form will appear!
Here are two examples!
Woohoo! You’re all done!
Are You On Pinterest?
If you enjoyed this post please share it, thanks!