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:

View fullsize

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

Related Videos:

039: How to Add a Checkbox to your ConvertKit Opt-in Form?

Hello there,

ConvertKit forms collect names and emails. But you can also have checkboxes giving people a chance to choose something specific. Or you can use checkboxes to give your subscriber the option to opt-into your newsletter and/or marketing emails and offers. And then that info feeds into a tag inside your ConvertKit account

The EU regulation, the General Data Protection Regulation (GDPR) goes into effect on Friday May 25th, 2018. I won't got into all of the regulation requirements because I am not legally qualified but I can show you technically how to do some of the things towards becoming compliant. One of the things that online entrepreneurs are putting into place is a way to get consent from new subscribers right on their opt-in forms.

If you are using ConvertKit, then this video is right for you. I will show you how to enable one or more checkboxes on your form. And then also how to tag those who select the check-box.

Note: To get GDPR compliant, make sure to get your own legal advice based on the needs of your business and the location of your business. 
 

Task:
adding checkboxes to a ConvertKit Form, feed that info into a tag

Purpose/Use Cases:
+ to give subscriber a choice for opting-in to a newsletter or marketing offers.
+ make opt-in forms GDPR compliant (EU law effective May 25, 2018).
+ to give subscriber choice of other supplementary content like additional Free PDFs.
+ to tag subscriber based on preferences (give them checkboxes to self-select tags). [Thanks Jason Troyer for your question in the comments].

Code needed:
Yes

Related Videos:
Blog 040: How to Add Checkbox to a ConvertKit form that is integrated with Lead Pages 
Blog 041: My exact email for refreshing consent from my existing subscribers for the GDPR EU law.

Scroll to the bottom of the blog to see Video Tutorial!

There's a video showing you the steps below. But here is quick summary of what you've got to do:

Note: You will need to use the Raw HTML to embed your ConvertKit form to your website or if you are using Leadpages, then into Leadpages. This is because of the customization that we need to do in order to make checkboxes happen in ConvertKit forms.

Summary of Steps

1. Decide how many checkboxes you want and what the text will be.
2. For each checkbox, create a corresponding tag. So for example, if the first checkbox says "Yes, I want your newsletter", then have a tag that says "Consent - Newsletter". 
3. Click on each tag and note down the tag id that shows up in the url. (see video)
4. Create a new form or open an existing form on which you want the check-box. Style it like you want it just like a regular form. Hit Save ALWAYS after making a change.
5. Go into Embed tab, and grab the Raw HTML.
6. Then go to your website, where you want this form to appear. In Squarespace, you will use the code block to paste this Raw HTML code.
7. Next, in the Raw HTML, look for the section that starts with <button class =
8. Right above it, paste the following code but look at step 9 and 10 for customizing:

<!-- 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 -->

9. Where it says, value= "444444", repalce the "444444" with the tag id that corresponds to the first checkbox.
10. Adjust the text, "Yes, send me your weekly email newsletter." to fit what you want the checkbox to contain.
11. Save and test.

Bonus steps if you want to add another checkbox: 

12. To add another checkbox, duplicate part of the code from above and customize it using step 9 and 10. 
<label style="display: block; margin-top: 10px">
         <input type="checkbox" name="tags[]" value="444445" /> Yes, send me emails about your online program and other marketing offers.
       </label>

13. So the entire code for having two checkboxes will look like this:

<!-- 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>
        <label style="display: block; margin-top: 10px">
          <input type="checkbox" name="tags[]" value="444444" /> Yes, send me your emails about your online program.
        </label>
      </div>
      <!-- End Checkboxes -->

14. Save and test.

Watch Steps 1 - 11 in this Video

If you want to integrate your ConvertKit forms with Leadpages and have checkboxes, then look for my other blog post that I will be publishing on this very topic. (Until then, just follow the above steps and paste all the code into the HTML block inside Leadpages. Make sure to test it). 

So that's it. I hope this is useful. Share your comments + questions below.
 

---

Related Videos: