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.
