Trigger a ConvertKit Modal Form With a Link Click in Squarespace
Have you ever wondered how web designers get a subscription form to pop-up with the click of a button?
You may have seen this cool feature put into place on someone else’s website and wondered, “How did they do that?”
In this post, I’m going to teach you how to create a link trigger to a ConvertKit Modal form embedded into your Squarespace website so that when you click the link, the form will pop up.
Watch me do it in the tutorial. It’s short. ↓
Create Your Modal Form
If you don’t have a ConvertKit account yet, here’s a link to create one. They are my favorite Email Service Provider because I find ConvertKit to be very intuitive with great video tutorials and an excellent customer support team.
Once you’re logged in:
Select Grow > Landing Pages & Forms
Select +Create New > Form > Modal
Choose whichever one you like. I always choose ‘Poplar’ because it allows for a headline and body text.
Create your form (this tutorial doesn’t cover how to create a form, but you might find this YouTube Video helpful for creating one).
Create the Link Trigger
Go into the settings of your form:
In the ‘General’ tab, select ‘Timing’ and change this number to 9,999
Create a note, a text file, or a document where you can copy, paste, and edit the link trigger
Copy the link trigger into the note. It will look something like this:
<a data-formkit-toggle="FORM ID IS HERE" href="https://FORM URL IS HERE">Your link text</a>
Copy everything from https:// up to and including the quotation mark and paste it in a new spot in your note. You’ll be adding onto this. It will look something like this:
https://FORM URL IS HERE"
Now copy everything from data-formkit-toggle all the way through the form ID without copying that last quotation mark. Paste it at the end of the string. It will look something like this:
https://FORM URL IS HERE"data-formkit-toggle="FORM ID IS HERE
This is your link trigger, or what I refer to in the video as your ‘click-through link.’ Copy this link and paste it into your website however you’d like—it works just like any other link. I put mine on a button. No need to open in a new window.
Embed the Modal Form Into Your Squarespace Website
Head back over to your ConvertKit form:
Select ‘Publish’
Copy the JAVASCRIPT code that appears in the window
Come back over to your Squarespace website on the page you just pasted your link trigger in
Select +Add Block > Code
Paste the code you just copied out of ConvertKit
Select ‘Save’ and test it out
If You Have to Edit Your Form
If you end up having to make an edit to your ConvertKit form, you will have to publish it again and replace the code in the embedded code block.
Always test it out to be sure things are working properly.
Will you try this?
Pretty cool, huh? Are you going to try this out? Are you doing this already? What will you use it for? Share your thoughts in the comments. 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
