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.

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

1. Click Landing Pages and Forms in the Menu

2. Click Add New Form

3. Click Form > Choose Modal > Choose a Modal Form Variation you want. I like Charlotte or Poplar

4. Update the look of your form as needed.

Update the Modal form So It Displays Upon Click

1. 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 Timing

2. If 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%.

3. SAVE the form, by clicking Save in the top right hand corner (below the ConvertKit menu)

4. Go to Embed and click the red copy button to copy the HTML code (image below)

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

1. 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)

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

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

1. Under settings, scroll down until you see “Trigger this modal with a link by copying the code below:” Click the red copy button

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

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

1. Copy your new adjusted code

2. Add a Button Block to your page

3. Edit the button Text

4. In the Clickthrough URL section, paste the code from step 3

5. Click Apply

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

1. Copy your new adjusted code

2. Add an Image Block

3. Click the Design Tab within the Image Settings

4. Paste the new code into the Clickthrough URL of the image

5. Click Apply

6. 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!