If you’re like me, you’ve probably been drooling over ConvertKit for a while.  Mariah Coz introduced me to its powerful features, and a webinar she co-hosted with ConvertKit creator Nathan Barry sold me on it.  They also gave the attendees a free month of ConvertKit, which is rare!  I love Mariah’s simple yet effective yellow box opt-ins, and I wanted to recreate a ConvertKit on-click button while I tested it out with my trial.

Turns out if was harder to find a solution than I thought, but I did, and now I want to show YOU how to do it too!

How to Create an Easy ConvertKit On-Click Button!

Disclaimer: This post may contain affiliate links.  These affiliates help us keep The Spare Room Project going.  Thanks for your support!

If you want to create a customizable button, it’s not too hard.  I’ve adapted the code for you already, and once it’s set up, you can use a shortcode to insert it into your posts and your site.  Easy, right?!  Well, it took me about 5 hours to figure out how to nest the code properly, because ConvertKit’s modal forms work a little differently than regular opt-in boxes.

Want ConvertKit?  Click here to get it!

I tried a couple different plugins for buttons before I realized that not only were they not working, because of how the buttons were configured, but I didn’t like the look of the buttons and who really needs another plugin!  I tried Googling every keyword combo I could think of to find a ConvertKit on-click button tutorial that would look and work the way I wanted, and guess what?  There weren’t any!  As I worked on a solution, I tried all sorts of variations, and even broke my site for a couple minutes!  You don’t want to go through all the heartache that I did to find the solution, so here you go: a lovely tutorial, served up on a platter for you.  A very merry unbirthday to you!

How to Create an Easy ConvertKit On-Click Button

Okay, here’s how it works: you’ll add the code for the button into your style.css and functions.php files (go ahead and open those now in new tabs).  Once that’s added and styled the way you want, I’ll show you how to set up your ConvertKit form and properly nest the code.  Once you know how to do that, it’s super simple to use the ConvertKit on-click shortcode anywhere on your site!

First, I want to make sure you have a child theme set up.  If you don’t, your shortcode will disappear on your next theme update.  I’m planning on writing a tutorial on setting up a child theme, but for now, you can check out the official WordPress article on that.  Setting up a child theme means that you will still be using the theme you have selected, and you will get your regular updates, BUT it will NOT delete any customizations you make in the child theme files.  Nifty, huh?  Okay, now that we’ve gotten that crucial piece out of the way, we can move onto getting ready for ConvertKit!

I found this article while looking for a ConvertKit on-click button solution.  Problem was, it wasn’t exactly what I wanted or needed, and it was geared towards Genesis users, whereas I use Divi.  Luckily, I have a bit of a programming background, so I was able to modify it.  To get started, we’re going to get into our functions.php file:

WordPress Appearance Editor Access functions.php file

Make sure you’re accessing it in your child theme and NOT your parent theme.  Again, this is crucial!  It will give you a warning message and a Proceed button.  Click Proceed to get into the file.  Once you’re in your functions.php file, you’ll insert this code:

<?php
function sButton($atts, $content = null) {
extract(shortcode_atts(array('ahref' => '#',
'rel' => '#',
), $atts));
return '<a class="download" href="'.$ahref.'" rel="'.$rel.'"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('download', 'sButton');
?>

This code will reference the CSS class that we’re about to add, and this will be what makes it possible to add the actual shortcode to posts and the rest of your site.  You’ll notice that download is highlighted in red.  This is because you can name your shortcode whatever you want!  I named mine download because it’s going to be what people use to get their downloadable incentives, and also because Divi already has a shortcode called button, but it didn’t work for the ConvertKit on-click button, hence why I made my own.

Get more tips and tricks for your blog or business!
And if you want to open up the option of having a ConvertKit on-click button in a widget, add this code under the add_shortcode line:
add_filter('widget_text', 'do_shortcode');

Next, open up your style.css file from the right-hand menu of the functions.php menu.  You might get the warning message again; just click Proceed.  Now click Enter twice at the end of whatever code is already there, and then you’ll insert this code:

a.download {
display: inline-block;
font-size: 24px;
font-weight: bold;
padding-right: 10px;
color: #183f4c;
background: #fff38e;
text-decoration: none;
}

a.download:hover {
color: #fff;
text-decoration: none;
}

a.download span {
display: block;
line-height: 24px;
padding: 8px 0 9px 10px;
background: #fff38e;
}

a.download:hover span {
color: #fff;
}

Everything in red is something you can play with.  Well, technically, you can play with it all, but I don’t recommend it if you don’t understand CSS.  At any rate, font-size will clearly change the size of your font.  font-weight makes it bold, but if you don’t like that, you can get rid of this line or change it.  You can add font-family after font-weight, if you want to customize it to the font you usually use.  It would look like this:

font-famiy: "Imperator Bronze", Snickles, sans-serif;

Note that this includes three different options.  Imperator Bronze is more than one word, so it needs to be encased in quotation marks.  If Imperator Bronze can’t be displayed for some reason, it will display Snickles.  Finally, if it can’t display Snickles, it will revert to a generic sans-serif font.  You can add as many alternatives as you would like to by adding a comma and the next font name.  Just make sure that the last one is generic, like serif or sans-serif.

Moving along the line, padding will specify how much space should be between the edge of the button box and the text.  I find that 10 pixels is just about perfect – for me, anyways.  For the text, you’ll want to adjust the color hex code.  The one given here is an off-black, which works nicely in most cases.  To adjust the color of the box itself, change the background hex code.  Mariah Coz suggests yellow, as it has had the highest conversion.  I used a nice yellow that we already have in our branding color palette, but you can use whatever you want!

In the hover section (the second section), the color field specifies what color the text will change to when someone mouses over it.  It’s a nice, subtle way to get their attention!  The hover span section’s color should match the hover section’s color hex code, as well.  In the span section (the third section), the line-height field should match or be just slightly larger than the font-size field from the first section.  The original tutorial I found had a height field, but I found that that messed things up more than anything, so I took it out.  Now it seems to auto-adjust to however many lines my call-to-action requires, which is much better!

Get more tips and tricks for your blog or business!

Integrating Your New Shortcode into a ConvertKit On-Click Button

Now your button shortcode is ready to go!  In order to use your shortcode with ConvertKit, you’ll need to do things a little differently.  First, make sure that your ConvertKit form is set to Modal:

ConvertKit On-Click Button Full Modal Form

To get here, click on your form in your ConvertKit dashboard, click Settings, then Style.  Tick the Full and Modal radio buttons (you can use the Minimal or Naked style if you really want to, but the Full looks much better usually!).  I usually set the scroll percentage to 100%, because that way, they only see the form when they click the button or scroll all the way down, which is rare.  I also leave the Continue to show form button marked, because that way, if they lost the download, they can get it again really easily.  That’s one of the great things about ConvertKit – they only count as one subscriber, not matter how many times they give you their info! (Take that, Mailchimp!)

Once you have that saved (don’t forget to click Save, now!), you’ll want to go to the Embed tab.  ConvertKit On-Click Button Embed Form

You can insert this embed code anywhere in your post/page, really, but I usually just put it directly in front of the first ConvertKit on-click button, like this:

<script src="https://app.convertkit.com/landing_pages/42638.js"></script>
<center><a href="#ck_modal" rel="ck_modal">[ download ahref="#ck_modal" rel="ck_modal"]CTA TEXT HERE[ /download]</a></center>

Just make sure to remove the spaces after the opening brackets in the download code.

Copy the second line of code.  This is what you will need in order to make your button.  I just pasted it into Evernote so that I can copy-paste it whenever I’m adding ConvertKit on-click buttons.  Just replace “CTA TEXT HERE” with whatever your Call to Action is going to be.  Other than that, as long as you have your embed code from ConvertKit pasted somewhere in your page, everything else is universal!  Just make sure you put ALL of the code in on the Text tab in WordPress, NOT the Visual tab, or it 1) may not work correctly and 2) will just plain look weird.  It WILL look weird in your Visual tab after you input it into the Text tab, but click Preview and you’ll see that it shows up just fine in the actual post.

See the ConvertKit on-click button in action!
Get more tips and tricks for your blog or business!

Have any questions or want to show off your new ConvertKit on-click button?  Just use the comments below!  I’m here to help, and I’d love to see your finished buttons.

 

Want ConvertKit?  Click here to get it!

Spare Room on Facebook
Spare Room

The Spare Room Project is a community of artists dedicated to helping people realize their creative potential with the resources and space they already have. Some have found their voice again as we collaborate on music and audio production. Many have benefited from honest and practical articles about how to live a more creative life. All it takes to pursue your passions is to carve out a physical space for them – a bedroom, a corner, even a card table.


Pin It on Pinterest