There’s been a lot of buzz going around lately about content upgrades and how to grow your email list by offering opt-in freebies that are specific to a certain blog post on your blog.
For example, I recently offered a free CSS cheat sheet to go with my What Is CSS? A Beginner’s Guide for Bloggers tutorial.
Because MailChimp doesn’t give you the ability to offer different content upgrades with one list, you are either forced to create multiple lists (which means one person could end up on multiple lists and count multiple times against your subscriber count) or you have to purchase LeadPages (currently priced at $25/mo minimum).
When you’re bootstrapping your fledgling business and already pay for services like email service providers, social media scheduling, web hosting, e-courses, etc…. it adds up to a lot of monthly expenses!
So being a web designer, I thought I’d figure out a way to hack the system for free (sort of).
First of All, What is LeadPages?
LeadPages is a software service that allows you to grow your list by creating fancy sales pages, opt-in pages, webinar pages, thank you pages, and more using easy drag and drop functionality. It also gives you the ability to add pop up forms, called LeadBoxes, to your landing pages.
Let it be known that I have absolutely nothing against LeadPages, I think it’s highly useful, saves you time and has wonderful features like A/B Testing among other things. I think it’s a service that most serious bloggers should definitely consider at some point.
But if the cost is currently out of reach for you, I have a solution to hack it by creating a fake LeadPages landing page using a self-hosted WordPress blog with ConvertKit.*
This post contains affiliate links (denoted by a *) which means at no cost to you, I may receive a small commission should you choose to make purchase with these links. Read my full disclosure here.
What We’ll Be Creating
In this tutorial, we’ll be creating an opt-in landing page and pop up to let our readers download a freebie that’s relevant to our newest post. The two most recent landing pages I created for my free HTML cheat sheet and CSS cheat sheet are modeled after a LeadPages landing page…
…and a LeadBoxes modal pop-up
…that’s fairly similar to this one I’m sure you’re familiar with:
Then of course we need a Thank You page that also encourages subscribers to share your freebie with their friends!
For this tutorial you will need a self-hosted WordPress blog and ConvertKit* to do this, BUT if you’re looking to fake LeadPages with Squarespace and MailChimp, Angelica Dezel’s got ya covered!
And if you’re wanting to fake LeadPages with WordPress and MailChimp, then Caitlin Cheevers has your back there!
Ok, back to WordPress but first, you can test out the whole sequence right now! Just click the image below to see:
What You Need to Create a Free LeadPages Landing Page with ConvertKit and WordPress
The first thing you’ll need is a content upgrade (or opt-in freebie) for your post. It should be something that basically “upgrades” your post and is therefore related to your post’s topic. Some examples of content upgrades:
- cheat sheet
- PDF guide
- graphics, etc.
Next, you’ll need a great background photo, preferably one of you looking and/or pointing to the side. This image should be at minimum 1500×1000 pixels. Don’t forget to optimize it!!
You also need a super friendly looking profile photo of yourself that is 230px x 230px.
Optional* You may also want an image of your signature, which you can create out of your own handwriting or by using a handwritten font. The ideal size for the signature is about 275px x 175px, give or take.
Then you gotta get yourself the Parallax Gravity Lite plugin. Good news, it’s free! In your WordPress dashboard, go to Plugins > Add New. Search for Parallax Gravity – Landing Page Builder then install and activate it.
We’ll need to add some custom CSS so you’ll need to make sure that you have a custom style sheet you can use. Here’s how to create a custom style sheet if you don’t already have one.
One last thing: Get yourself onto ConvertKit* if you haven’t already. It’s the best way to be able to offer instant content upgrades to your readers while building up your list!
Got what you need? Ok good, let’s continue!
How to Create a Free LeadPages Landing Page
Step 1: Create the Thank You Page First
We’ll start with the Thank You page first. You’ll see why in Step 2. Watch this video and I’ll walk you through creating a beautiful LeadPages-like Thank You page.
(It’s a little unpolished but I wanted to quickly put it together for you guys as I know many of you have been patiently waiting for it!)
Here are the HTML templates I mention in the video.
First is for the Top section of the page:
Second is for the Bottom section of the page:
Awesome! You’ve now created the Thank You page for your free LeadPages-like landing page!
Step 2: Create the Popup Form in ConvertKit
Now I’ll be showing you how to create the Pop Up Form (powered by ConvertKit) that will open up from your landing page.
Well let’s get right to it!
- Sign into your ConvertKit dashboard
- Click on Forms at the top left
- Click +Create Forms
- Select A Form
- Select the middle option
You’ll find yourself on the Content tab:
- Click the magic wand to select your text color, accent color (the top and bottom colored bars) and button color
- Click on the Subscribe button to edit the button text. Not doing this will actually leave the button text blank.
- Click on the ‘Join the Newsletter’ title and change it to something like ‘Get Your Free [FREEBIE]!’
- (optional) Click on the image to upload a preview of your freebie
- Change the text below the image to something that describes the freebie and encourages people to sign up for it
- Click the Save button at the top right
Click on the Settings tab up top. Under Main Settings (on the left)…
- Give your form a name (only you will see this)
- Have ‘Just a form to embed on my site.’ selected
- Select ‘Redirect to another page’ and add the URL for the Thank You page you just created here
- If you have a sequence of emails (like an onboarding sequence) you’d like to send to your new subscribers, you can select that here
- Be sure to click the ‘Save Form’ button
Under Incentive Email (on the left)…
- Add an email subject line.
- Edit the email message if you’d like. Perhaps include something about the content upgrade.
- You can edit the button text if you’d like.
- Click ‘Upload a file’ and select the content upgrade file you’d like them to download.
- Because clicking the button will automatically start the file download, I like to add a message below the button that says something like “Clicking the button above will automatically download your PDF freebie”
- Click ‘Save Form’
Under Style (on the left)
- Select ‘Full’ for Form Style and
- Show this form as ‘Modal’
- Under Display Options, select Scroll Percentage and change it to 100%. This will allow the modal to only show up on button click.
- Under What should we show to return visitors who have already subscribed? select ‘Continue to show the form’
- Click ‘Save Form’
We are now done creating our popup form. Let’s take a break and I’ll show you how to add it to the full image landing page in the next post!
Alright friends, got questions for me? Post them below!
And use the handy links below to share this post if you found it useful!
Hey friend, want free DIY design stuff?
I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!