040: How to Connect Leadbox with Your ConvertKit Form that has a Checkbox
Hello there!
So you want your Leadpages/Leadbox opt-in box set-up in such a way that when someone clicks on it, a form pops up that has a checkbox AND it feeds into a tag inside ConvertKit? Then this video + blog post show you how to do that.
Something that looks like this:
Watch the video to see me walk you through all the steps
Step 1: Open up the form in ConvertKit that you want connected to your Leadbox. Or Create a new form.
Note: When you integrate a third party app like Leadbox/Leadpages with ConvertKit you will most likely need to connect it with a ConvertKit Form/Tag/Sequence. In this case, we will be using a form. What this means is that when someone subscribes by clicking your Leadbox, the information is then fed into ConvertKit. (You will need to make sure that your Leadpages account is connected with ConvertKit using API - this step is not shown in the video).
Step 2: (Optional but recommended) Customize the form to fit the Leadbox pop-up style. You will go into ConvertKit Form -> Style -> Custom CSS
Copy the code below:
.ck_powered_by { display: none !important; }
.ck_form {box-shadow: none; }
.ck_form {
border-top: none;
border-bottom: none; }
.ck_form { background: #fff; border: none !important; }
.ck_form_content, .ck_form_fields { padding: 1%; }
.ck_form_content h3 { text-align: center; }
.ck_form_content, .ck_form_fields { float: none; width: 100%; }
You don't have to do this styling. But it helps to add this code so that when the Leadbox is clicked it pops open a form that fits the sleek sytle of a leadbox. This (step 2) is completely optional but I highly recommend it.
Step 3: In Leadpages Account, create your leadbox or open up an existing one. Style the form the way you want it.
Step 4: While still working with the Leadbox, replace the form that's there with HTML block. Delete the Opt-in Form section that was in-built there.
Step 5: Jump into your ConvertKit Form. Click on Embed -> then Raw HTML. Copy the entire Raw HTML. You will be pasting this code into the Leadbox but before that open up a text editor.
Step 6. In a text editor, like Pages on the Mac or Word on a PC, paste the entire Raw HTML code. This is because it is easier to work with the Raw HTML code when you can see it better in a text editor. You will copy it all in the end and bring it into Leadbox eventually.
Step 7. Look for the section that starts with <button class. Right above it, paste the code for a checkbox.
Here's that code:
<!-- Begin Checkboxes -->
<div class="ck_control_group">
<label style="display: block; margin-top: 10px">
<input type="checkbox" name="tags[]" value="444444" /> Yes, send me your weekly newsletter.
</label>
</div>
<!-- End Checkboxes -->Step 8. Make sure to update the tag value. This is very important. The way to do it is to click on the tag inside ConvertKit that you want the checkbox data to go to. Then look in the URL for the tag value. See steps 2 and 3 in Blog Video 039 that shows you how to do this visually.
Step 9. Now copy all of this Raw HTML code including the checkbox code
Step 10. Now paste it into your Leadbox. Specifically into the HTML code box. (Click the pencil icon to edit).
Step 11. Click save. Then click Publish. Click the Button Link. Stylize it. Click Get Code and then copy it.
Step 12. Jump into your Squarespace website or wherever you want the Leadbox to show up. Add a Code block. Then paste the code you grabbed from your Leadbox. Click save. Refresh the page. And test the form by adding in your info and checking your ConvertKit account to see that it is working.
That's it. You are done! Watch the video I've created as it may be easier to understand what I mean when I demonstrate the steps visually. Let me know in the comments if there's something unclear and I will help you out!
Thank you for watching. Also, I'd love to know what other questions you have so I can answer them in my next tutorials.
Thanks, Sophia
