Updated: July 23, 2019
ConvertKit is my email marketing weapon of choice these days. It offers so (so!) much functionality for the price.
Today I want to give you a power tip to expand the ConvertKit functionality even further.
One of the form options within ConvertKit is a modal form. This allows you to include a popup anywhere on your website, triggered by scrolling, timing or exit intent. There’s also the option to target the modal with a link; however, it’s been asked many times: How can I link a button or image to a ConvertKit popup modal form?
This option is incredibly useful for landing or sales pages, but can also be nice to use within a blog post for content upgrades as well.
Today, I’m helping answer that question with a tutorial.
Step 1: Create your Modal Form
In ConvertKit, your form settings will look like one of the following based on which form builder you’re using:
I always set the Timing for 999999. This ensures that the form won’t pop up while the reader is on the page; they must click the button/image. This is especially useful if you already have a popup form implemented.
Step 2: Decide between an image or button
Your decision will depend on where you need to include a modal popup. On sales pages I would recommend a button, but within a blog post you may want to add an image. Do what feels right to you!
Button
If you want to use a button, it’s pretty simple to create.
You’ll need to add the following code to your stylesheet (CSS file) or in WordPress you can add it under Appear:
.cta-button {
text-align: center;
}
.cta-button a {
background: #e5554e;
color: #fff;
font-size: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
text-decoration: none;
padding: 10px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
text-align: center;
}
.cta-button a:hover {
opacity: .9;
}
You can change the background color, font color or even the opacity for the hover if you’d like. Don’t be afraid to play around with it.
The next part depends on which form you’re using. If you’re using the legacy form builder, then anywhere you want the button, you’ll add the following code. This includes the ConvertKit modal trigger code. You could place this multiple times if you’d like multiple buttons on a page.
<div class="cta-button"><a href="#ck_modal" rel="ck_modal">This is a button</a></div>If you’re using the new form builder, you’ll need to grab the code in the form settings that looks like this:
You’ll then paste that code inside the button code:
<div class="cta-button">ADD FORM CODE HERE</div>It’ll look like this:
<div class="cta-button"><a data-formkit-toggle="f9405b1c90" href="https://pages.convertkit.com/f9405b1c90/9b63a86cd7">Your link text</a></div>Image
If you want to use an image, upload the image to your website and then grab the URL. On WordPress you can grab the File URL by clicking on the image in the media gallery.
If you’re using the legacy form, you’ll include the URL in the code below:
<a href="#ck_modal" rel="ck_modal"><img src="YOUR URL HERE"/></a>If you’re using the new form builder, you’ll first paste the URL into the image tag:
<img src="YOUR URL HERE"/>Then in ConvertKit, you’ll need to grab the trigger code in the form settings. Again, that looks like this:
Where it says “Your link text”, you’ll add in the image code you created above. So it’ll look like:
<a data-formkit-toggle="f9405b1c90" href="https://pages.convertkit.com/f9405b1c90/9b63a86cd7"><img src="YOUR URL HERE"/></a>You can add the code anywhere you want the image on your page or post. You could even add multiple images or a combination of images and buttons. Don’t go too overboard, though, you don’t want to turn away your audience.
Step 3: Adding the Form
Finally, you need to add the form so the modal trigger has something to connect with.
Head back to ConvertKit and under the Settings of the form, choose Embed or in the new form builder, you’ll find the code under the “</> EMBED” tab at the top. You’ll be given three or more options:
Choose whichever option makes the most sense to you. I recommend the JavaScript or WordPress (obviously only if you’re using WordPress).
JavaScript / Raw HTML
The JavaScript or Raw HTML embed can be added anywhere you want to display your form. Just add it once, even if you have multiple buttons and/or images. They can trigger the same form modal.
The difference is, the JavaScript option will be updated automatically anytime you make a change within ConvertKit; Raw HTML will not be.
WordPress
If you’re using WordPress, you can download the ConvertKit plugin. (Not a requirement, you could still use the other embed options.) You can then choose your form on an individual page or blog post.
You will then choose your form on an individual page or blog post. Select the form from the drop-down menu.
Now save your blog post or page and you’ll be all set!
If you need help setting up ConvertKit, I can help!
P.S. If you need multiple modal forms on a page, you’ll want to read this post.
Great walkthrough. By chance, have you figured out how to make the modal scroll on mobile? So, your example here isn’t large enough to need that, but mine is. I see it work on Pat Flynn’s site (smartpassiveincome.com scroll to the very bottom subscribe button). I can’t get that to work on mine. It scrolls the background instead, which is the default.
If you want to see it not work, mine is on nickblevins.com, the 30 Apps image, but the one on the bottom right (not the top right).
If you can figure that out I’d be happy to pay you for the solution and I know it would help other CK users. Let me know what you think.
Hey, Nick! Great question. Let me look into that and I’ll get back to you about a solution soon!
Hi Nick,
Sorry for the delay. So Pat isn’t using the ConvertKit standard form embed. His is (probably) custom and the entire form is actually within another container. So that larger container prevents the background from scrolling and then the form scrolls within it. If that makes sense.
You might be able to find a solution using a plugin that integrates with ConvertKit. Otherwise I could help with a custom solution; however, I’m pretty booked at the moment, so it’d be late August or September before I could take on a new project. Feel free to email me if that would work for you. melissa[at]melissathorpe[dot]com
Melissa
Melissa you are a genius!
Thanks so much for creating this. I use the DIVI WordPress theme and it makes you crave beautiful stuff, including buttons. It is frustrating the Convertkit team hasn’t added this functionality to their signup functionality.
I am all onboard with simple emails, but our websites/posts need to look great!
A quick question, I have been fiddling with CSS to get the text to BOLD but
font-weight: bold;
doesn’t seem to do it. Any suggestions?
Hi Paul! Thank you for the kind words 🙂
For the font-weight, I would try giving it a number. 600, 700, 900, etc. It can depend on the font though. The bold version may not be installed on your website or the font may not have a bold version at all.
Hi Melissa! Does this still work with Convertkit and the new CAPTCHA change?
Yep! The captcha doesn’t occur until after someone tries to sign up multiple times. So linking an image or button to a popup will still work!
PERFECT!!!!! Just needed this exact feature and got it working beautifully in just a few minutes – THANK YOU!
So glad it worked for you Heidi!
So helpful, thank you, Melissa. This post was linked from an FB group of Divi users, so obviously I’m using Divi theme. I’m wondering if I want to use this with Divi will I need to put it into code module? That seems like the way to do it, but I’m really not sure. Thanks for all the coding goodness you offer here!
Hi Nikki,
You should be able to just use a Text module and add the code in the Text tab!
Melissa
I cannot seem to figure this out! I’m trying to add a button but when I add the code and preview it’s not working. Whomp, whomp. Any tips?
Hey Jennifer, How are you including the ConvertKit form on the page? With the WordPress plugin or via JavaScript or HTML embed?
You’ll want to make sure you save the page with the ConvertKit form before adding the button and previewing it. Hope that helps!
Hey Melissa, Great post. I used your tips that you shared in another blog post of yours on modal forms for tutorial on how to do this for Squarespace! Just a note though, the final link “I can help!” is not working.
Thanks Sophia!
This is great but what if I have multiple buttons on my page and I need a different form to pop up for each button. Then I obviously can’t select the form using the drop down menu
Yes, you’ll need to refer to this post then to have more than 1 modal form: https://melissathorpe.mystagingwebsite.com/add-multiple-convertkit-modal-forms/
Hi Melissa,
I’ve followed your instructions, but unfortunately it just doesn’t work for me! I’m using Squarespace – have you got any suggestions?
Thanks,
Bella
Hi Bella,
Unfortunately, I’m not familiar with Squarespace. Sorry!
Hi Melissa, thank you so much for this great step by step. I use Divi builder – I followed your instructions, I got the button to appear, but when I click it, it does not open the modal, instead, it just adds /#ck_modal after the .com on the URL. Am I supposed to replace something on this code This is a button
Hi there, the post is for the old style forms. I will need to update it for the new forms soon! Thanks for the reminder.