How to fake a LeadBox on Squarespace using ConvertKit

Let me start out by saying I'm a fan of LeadPages, they do really good work, and this isn't meant to be all debbie-downer on them. If you can afford a LeadPages subscription, along with all the other running costs of a business, then I urge to bite the bullet. But not everyone can. So enter the 'poor (wo)man's' work-around.

We've all seen them. Those lovely buttons or graphics (or both!) in a blog post that seductively call your name, enticing you to click and grab that download you didn't know you needed.

Once you do, a pop-up box appears asking for your name and email address. And as pop-ups go, this is probably my favourite kind. Because you ask for it. You enter your details, like magic the download is yours. Ah, content upgrades. The nectar of online business.

Content upgrades are the best way I know to build your list, and are a perfect way to drive listeners and viewers from your audio and video content to your website. But here's the problem, unless you have a LeadPages account these pop-up boxes aren't available to you right?

Wrong.

Well ... sort of. This is a hack, afterall, so it doesn't quite look as good.

But it'll certainly do until you can afford that LeadPages subscription!

Master the content upgrade pop-up using ConvertKit and Squarespace and no third-party integration / TorsG

here's how ...

This isn't the usual tutorial for the LeadBox work-around. That one involves using the form block within Squarespace and setting it to lightbox, putting together a Google Sheet to collect form entries, and creating a Zap to join up Google Sheets with ConvertKit*.

Why is this different?

Because that hack doesn't allow ConvertKit to collect analytics on your form.

And isn't that one of the great things about ConvertKit (and incidentally, one of the things you pay for)?

PLUS this gives you a fully customised button type that you can use exclusively for content upgrades, allowing you to style it differently from the other buttons on your site, AND it has a mouse over action (it changes colour when the mouse is over the button). As an added bonus, it's completely free to use.

If you're not bothered about the mouse over action, or really really hate code, I recommend just creating a graphic instead, but that's a whoooole other tutorial.

So! Enter the other work-around. Which requires a little coding. But don't panic, I'm gonna give you everything you need.

I'd like to give a shoutout to the Squarespace Answers forum, and Silvabokis for posting the button codes. I cannot claim credit for that part.

what you need to get started ...

This is a pretty easy list, you need a Squarespace website, a ConvertKit* account, and a blog post with a free download you want to offer.

One last note: this will not work if you want multiple forms on the same page because CK doesn't specify which form the pop-up belongs to in the pop-up part of the code. Haven't found a way around it I'm afraid.


Start with ConvertKit

1. Log into your ConvertKit* account

You want to start by creating a new form. Don't be all, hah! I've already got one I want to use! Because this is unlikely to be the only place you use that form if that's the case, and this method will probably screw up your form wherever else it is.

So start by creating a new form.

Unless your form isn't being used anywhere else, then you may go ahead and use that with my wholehearted support.

You want your form to be a form, and not a page. And you want it to be the middle type of form, that allows you to add in an image.

Make any style changes you want to the form itself by clicking on the magic wand, upload your image (usually of the opt-in you're offering), and amend the text so it makes a little more sense.

2. Set-up your form

Once you're done customing your form, click save at the top of the page and then click into the settings.

Choose style from the menu along the left of the page, and choose the modal form from the choice of styles.

You want to make sure that the form is set to continue to show to peeps who've already subscribed, or things have the potential to look hinky for anyone that comes back to your site and clicks on the button.

Once you click on modal a new section appears at the bottom of the page. This is where you tell ConvertKit when you want the form to pop up. So make sure you choose timing, and enter 9999 in the box. This is so the form doesn't pop up before the reader requests it. You also want to add 0 into the display settings box above the custom css section, so that returning visitors still see the form if they click on your button.

Click save form (I always forget that bit).

Go to main settings and choose your sequence, name your form, customise the success message or redirect to a thank you page on your website. Customise your incentive email, blah blah blah. 

Now you're ready for the Squarespace bit.

the Squarespace bit

1. Log into your Squarespace account

You can do this from squarespace.com. From there you'll need to select Design, then Custom CSS from the menu.

2. Copy button styling code into custom css in Design section of Squarespace

Copy the styling code from below, then paste it into your Custom CSS panel. Be careful not to overwrite anything that may already be in there, but don't be surprised if it's empty as that's the norm.

Hit save, and navigate over to the blog post where you want to add the button.

3. Add the button code

Do this by adding a code block (not a button block) to your post.

Why this way?

Because you can create a different looking button (or several different looking buttons) using the styling code, and then you only have to add the short button code wherever you want it because the styling code will be site-wide.

But most importantly, this is how you get the form to pop-up when the button is clicked.

ConvertKit's modal form is designed to be a pop-up when additional html coding is added to the link code. You can't do that from within Squarespace's usual link interface, which is why you need the code block.

Incidentially, it's also the reason ConvertKit is able to track the number of people who land on the page but don't sign up to your form. Which is the big bonanza we're after here.

As you can see, as soon as I paste my code in, the button appears. Just like magic! You can customise the text on the button in the code block so it says whatever call to action you want.

So now you have a button, but you need to tell Squarespace what you want to happen when people click it. So head on back to ConvertKit to grab the embed code.

4. Copy the one-line Javascript embed code from ConvertKit

I mean, you could copy the full raw html and paste that into your code block instead, but personally I think that's a little overkill. Really you'd only want to do that if you were planning on customising this version of the form and wanted it to look different on other pages on your website. I don't wanna do that, so I'm gonna stick with my own styling code I've already pasted into my custom css panel as per step number dos (2) above.

So take that single line sucker, and paste it into your code block along with the button code. It should look something like the below:

You can see that I've got an embedded script alert, that'll disappear once the page reloads - plus you should be the only person that sees that message ... unless you do something terribly wrong I guess. But this is going swimmingly, so let's not borrow trouble!

Hit apply and then test your button.

Or test mine ...


here comes the code

the styling code

/* CTA Button */
#cta-button-container {
 text-align: center !important;
 line-height: 2.25em;
 margin-top: 40px;
 margin-bottom: 40px;
 }
#cta-button {
 text-align: center !important;
 background-color: #ffcf68;
 padding: 15px 25px;
 color: #fff;
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-weight: 600;
 display: inline-block;
 }
 #cta-button:hover {
 background-color: #555
 color: #fff;
 }

My website design includes a line along the bottom of my solid buttons, if you'd like this look add the following line to the #cta-button section of the styling code (the bit in the middle). 

box-shadow: 0 2px 0 0 #d9a959 !important;

I've then added it to the #cta-button: hover section as a transparent line so it doesn't show when the mouse hovers over the button. Like so:

box-shadow: 0 2px 0 0 transparent !important;

 

the button code

<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">
Grab Your Copy!
   </a>
 </div>
<p style="clear:both;">
</p>

over to you ...

Let me know if you use this tutorial on your website, I'd love to see your buttons in the wild! Leave a comment with your website URL included once you've got the button all set up so that I can go check it out!

tors

* affiliate link - if you decide to sign up for ConvertKit using this link I'll receive a commission at no extra cost to you.


pin for later

Master the content upgrade pop-up using ConvertKit and Squarespace and no third-party integration / TorsG

want more?