How to Create Button Triggered Pop-up Forms Using Squarespace and ConvertKit

How to create button triggered pop-up forms with Squarespace and Convertkit

Hey creatives!

I tried Leadpages for 30-days a while ago and despite loving it, my business expenses had increased lately and I couldn’t commit to the $37 monthly price or the $300 annual one on top of ConvertKit (which I started investing in so I could deliver my free email course with ease and it’s a worthy investment!). What does a person do in this case when you loved Leadpages but you can’t afford it right now?

RELATED: How To Get a 30-Day Free Leadpages Trial

We improvise and find a work-around.

Which is exactly what I did. It took a lot of trying work arounds until I found one that worked for me, which I’m sharing below. Before finding this one, I used one rather complex work-around that involved using the Squarespace lightbox form button which I connected to Google Sheets then used Zapier to automatically send subscribers from the Sheet to ConvertKit.  It worked okay until I became aware of one problem;

That work-around did not record analytics to ConvertKit.

Yikes! I needed something that would make things much simpler and still send analytics to my ConvertKit forms.

I’m pleased to report that I found a way using just Convertkit forms and Squarespace- no creating Zaps required! Even though this method requires a little bit of coding knowledge, don’t stress. I’ll be sharing a step-by-step tutorial so you can create your own button pop-up forms that send subscribers (and the analytics) straight to ConvertKit. Ready? Set? Go.

In ConvertKit

STEP ONE: CREATE YOUR CONVERTKIT FORM AND STYLE IT

If you don't already have a form that you want to use as your pop-up, create one and in the next step, choose the form style you'd like. I prefer using the forms with a picture box (much more like Leadboxes) that can offer subscribers a preview of what they would be getting. 

Creating pop-up forms in Convertkit
Creating pop-up convertkit forms in Squarespace

After picking your form style you can add colour to your buttons and depending on the style you chose, upload a picture for your picture box and write a description. You can also change the colours of your buttons by clicking on the magic wand icon on the top right of the form. When that's done go to settings and in the 'Style' panel choose the 'Modal' option. 

A modal form is another word for a lightbox form where it pops up when triggered. Since we want the form to pop up when triggered by a button, we are going to focus on that.

Converkit pop up form for Squarespace tutorial

STEP TWO: GET THE CONVERTKIT CODES

Now it's time for some coding! Copy the trigger link code you see below the display option box. 

 
Convertkit code for Squarespace pop up forms
 

Tip: To make things easier, open Notepad (on windows) or TextEdit (on Mac) so you can paste the code you copied on one page instead of going back and forth.

After you're done copying the trigger link, go to the 'Embed' panel and copy the one line of JavaScript as shown below:

 
How to use Convertkit modal forms on Squarespace
 

Right! Now that you have your codes, remember to save your form. It's time to head over to Squarespace to set up the forms:

In Squarespace

STEP THREE: ENTER THE STYLING CODE IN CSS

Now, there's a little styling code we need to enter in Design> CSS to style our buttons. Included below is the code I used for my buttons, which I styled to look like my default Sqaurespace buttons.  Just copy the code below and paste it in your Sqaurespace design css and replace the background colour, font-size and colour with ones of your own choosing, otherwise your buttons will look like mine! 

/*Call To Action Button */
#cta-button-container {
 text-align: center !important;
 line-height: 1em;
 margin-top: 50px;
 margin-bottom: 50px;
 }
#cta-button {
 text-align: center !important;
 background-color: transparent;
 padding: 15px 25px;
 padding-right: 25px !important;
 color: #848587;
 font-size: 14px;
 text-transform: uppercase;

STEP FOUR: ENTER THE FORM CODE IN YOUR PAGE

You can enter the form code in whichever page you would like but for this example I'm going to use blog posts as that is where the majority of my form buttons are placed for content upgrades. We'll have to go the coding way instead of the much simpler way of creating a Sqaurespace button and changing the clickthrough URL link to one where the form is hosted, simply because the clickthrough URL option does not support the Convertkit links.

Now that we've gotten that out of the way, choose where you want to place the button on your page (or blog post) and insert the code option as shown below:

Using ConvertKit modal forms with Sqaurespace

When the code dialogue box opens, copy and paste the code shown below into it if you want your buttons to be styled like the Sqaurespace lightbox ones (which I am using).

</script><div class="sqs-block-button-container--center" 
id="cta-button-container">
 <a rel="ck_modal" href="#ck_modal" 
span class="lightbox-handle sqs-system-button sqs-editable-button" id="cta-button">
GIMME THE LIST!
   </a>
 </div>
<p style="clear:both;">
</p>

If you want the buttons to be styled like the ordinary Squarespace ones, use this code instead:

<div class="sqs-block-button-container--center" 
id="cta-button-container">
 <a rel="ck_modal" href="#ck_modal" 
class="sqs-block-button-element--medium sqs-block-button-element" id="cta-button">
GIMME THE LIST!
   </a>
 </div>
<p style="clear:both;">
</p>

<script async id="_ck_57199" src="https://forms.convertkit.com/57199?v=5"></script>

And the difference in the two groups of code above? The span class attributes! Save the code in a safe place because this is the code that you will be using over and over again if you want to place more buttons. 

Tip: An easy way to find out which attributes you are currently using is to view your website on another tab and hover your mouse on a button you've used before then right click and click on 'inspect element'. You can now see which span class your button element is wrapped in. 

Let's get onto the next step, shall we? Alright, alright, now take the embedding JavaScript code you copied from ConvertKit in Step 2 and paste it on top of the code so it now looks like this:

<script async id="_ck_10000" src="https://forms.convertkit.com/10000?v=5"></script><div class="sqs-block-button-container--center" 
id="cta-button-container">
 <a rel="ck_modal" href="#ck_modal" 
span class="lightbox-handle sqs-system-button sqs-editable-button" id="cta-button">
YES, GIMME!
   </a>
 </div>
<p style="clear:both;">
</p>

Remember to just paste the Javascript code instead of the whole code shown above. The Javascript code should be the first line of the whole code as highlighted below:

Using Convertkit modal pop up forms in Sqaurespace

Let me explain the code a little: remember that trigger link code we copied from Convertkit in Step 2? In the code above we shortened that one to include Squarespace button attributes so instead of this code:

<a rel="ck_modal" href="#ck_modal">Your link text</a>

We add the Sqaurespace button container code and the styling code ID we pasted in CSS so it looks like this:

<div class="sqs-block-button-container--center" 
id="cta-button-container">
 <a rel="ck_modal" href="#ck_modal" 
class="sqs-block-button-element--medium sqs-block-button-element" id="cta-button">
YES, GIMME!
   </a>

This makes sure the button is styled according to the settings included in the CSS, so all the buttons look uniform.  

Check out the image below to see what each line of code means:

 
Using Convertkit forms with Sqaurespace buttons
 

STEP FIVE: ENTER YOUR BUTTON TEXT

Now that the coding has been applied, replace my 'YES, GIMME!' text with whatever text you want your button to say. Keep the words you include to a minimum otherwise you'll have to go back to the CSS code to adjust the length of the button.

Click 'apply' then save the page or blog post. Don't worry about the embedding grey box, once you view the page on your website you'll be able to see the button just as you've styled them. Or you can click on 'preview'. That works as well.

Aaand...we're done! Check out the pop up game on my blog. Not quite Leadboxes but still free and you get the Convertkit form analytics so you can see where each subscriber signed up!

Faking the Leadpages Leadboxes with Convertkit and Sqaurespace

This was by far my most technical blog post and it's one I wished I could have read somewhere else before trying out the whole Zapier thing or trawling the internet for hours looking for a tutorial that could be a Sqaurespace buttons alternative to Leadboxes. If you want to help someone else out, feel free to share this post! :)

When you need to create more buttons you don't have to add more styling code in CSS, unless you need buttons that look different, then go ahead and style 'em however you wish. 

Next week I'll be back with another tutorial on how to create thank-you cover pages that look like the popular Leadpages ones but you know, not quite Leadpages so stick around!

I'd love to hear from you! If you've used the tutorial let me know by leaving a link to your website in the comments below so I can check your buttons out or if you've got questions, I'm here to answer them!