Three steps to creating a ConvertKit leadbox on Squarespace

If you use Squarespace and ConvertKit, then you know that there is no way of creating a lead box on Squarespace unless you buy lead pages or use a third party app. 

The problem with using a third party app is that ConvertKit does not track analytics which is one of the main reasons for using ConvertKit. 

ConvertKit only tracks emails that are sent directly through ConvertKit. So if you're using a third-party app like Zapier, your analytics are going to show people going to the page but not opting in.

So today I am going to show you how to create a lead box on Squarespace that directly connects to ConvertKit so you can always have the correct analytics information.

Add a convertkit leadbox to Squarespace

There are three parts to creating a ConvertKit lead box on Squarespace. Part one is creating the form in ConvertKit, part two is to adding the lead box form to Squarespace, and part three is creating the lead box button using CSS. Let’s get started.

Part 1 - Creating lead box form in ConvertKit

Create Form 

Once you login to your account, create a new form. Yes, you will need to create a new form even if you already have one you want to use. Why? Because the setting on this form is more than likely different from the setting, you already have set-up. You do not want to mess up this form where you have already placed it.

Click on create a new form. You will be asked “how do you want to gather subscribers?” click on the form. Now you will get three styles of forms to choose from, pick the middle style which allows you to add a graphic image to your form. 

Once you have selected the middle form, you can now customize and style your form. You can change the colors, text, and add your graphic image. 

Remember, this is what your form will look like when your subscribers click on the form button. Make sure it matches your branding. 

After you have styled your form, added your graphics and text, click the save button on the top right-hand side of the form. 

Set-up your form

Now that your form is styled click on settings. The main settings and incentive email setting are business as usual. Nothing changes the way you usually set-up your forms. So go ahead and name your form, create success message, add to a sequence, and add your incentive email. Once you are done with that part, move on to the style settings.

The style settings where the magic happens. The form style will already be set to “full” so no changes there. Right underneath that is “Show this form as.” 

Select the modal form, which is the middle style. The modal style is what brings up the pop-up on your site. Once you click the modal style option, the Display Options box will appear. 

Under the Display Options, there are two things you need to change. First select “Timing” and change it from 10 seconds to “99999” seconds. By changing the seconds to 99999, the form will not pop-up unless clicked on instead of popping up after being on your site for 5 seconds. YAY! This is exactly what we want.

The second thing you need to change is the “display settings.” You will want to change the “15” to “0” so that any returning visitor will be able to click on the button, then click save form at the bottom of the page. 

Copy Form JavaScript

The last thing before we move on to Squarespace is copying and pasting the javascript to a TextEdit doc or any place you can easily access it for future use. 

Click on the embed settings, make sure javascript is highlighted, and copy and paste the code into TextEdit. We will need this code for Squarespace. 

Part 2 - Squarespace

Insert a code block
After logging into Squarespace go to the page, you want to add the lead box button to and click the edit button. Once in edit mode add a code block, not button block, to the page and delete any text that is in the code block.

Paste Form Javascript into code block

Go back to TextEdit, where we saved the javascript, and copy and paste the code into the code block. 

Once you insert the javascript, you will see an embedded script form error pop up. Don't worry, your the only one who can see this and it will go away once we are finished. 

Add button code

The last thing we need to do in the code block is add the button code I provide you into the code block. Once you see the button, you can change the button text inside the code block. Click apply and save. 

hbkpYYW5QK.gif

Now refresh your page to get rid of the embed error. Click on your new button and your new lead box is ready. Congratulations! You now have a lead box on your Squarespace site that directly links to ConvertKit.

LNhinF9ik3.gif

Part 3- Styling the button

Now you can leave the button as is or you can customize the button to your brand. So I provided you with some CSS code to insert into the custom CSS in Squarespace
Insert CSS code into Custom CSS

Stay on the page where your button is and in the menu bar click on design then custom CSS. Your Custom CSS should be blank. I use a lot of CSS code on my site so don’t worry about not having anything in there. 

Copy and paste the CSS styling code I provided into your custom CSS panel 

BlpNRuIez6.gif

Customize your button. 

There are many options to change the button. You can modify the font, color, size, and style of the button. Go ahead and make the changes you need to brand your button. 

I also added a hover option, so when you hover over the button, it changes to a different color. 

Enjoy! I hope this was helpful. 


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>

The button styling code

/****** CTA BUTTON ******/

#cta-button-container {
 text-align: center !important;
 line-height: 2.25em;
 margin-top: 10px;
 margin-bottom: 10px;
 }

#cta-button {
 font-family: CINZEL;
 text-align: center !important;
 background-color: #000000;
 padding: 12px 18px;
 color: #ffffff;
 font-size: 18px;
 text-transform: uppercase;
 letter-spacing: 2.5px;
 


By Felicia Urioste  

Hello! I'm Felicia, and I'm a Squarespace Designer & Brand Stylist for the modern day entrepreneur and business owner who needs a beautiful and easy to use website.

You can follow me on my site or my social media pages below!

WEBSITE | INSTAGRAM | FACEBOOK

Nora Conrad