Content upgrades are an important part of seeing consistent growth in your email list and giving your audience extra material to build that important trust factor. Unfortunately, a lot of the solutions out there are either expensive (LeadPages) or just don’t look that great (ConvertKit). Luckily, there’s a solution! If you have an Elegant Themes subscription you can create gorgeous pop-ups for your content upgrades without having to pay an extra monthly fee for LeadPages!

The tutorial below will walk you through adding your content upgrade in ConvertKit, setting up your pop-up using the Bloom plugin, and adding the pop-up to your blog posts. If videos aren’t your thing, scroll down for a written step-by-step tutorial.

ConvertKit setup

Start by opening up ConvertKit and making a new form. When asked which form style you’d like, choose the simple one on the right.

ConvertKit simple form

After being taken to the form preview, click Settings. Give your form a title and update any other settings based on the functionality you want. I usually choose a welcome sequence to add subscribers to and personalize the success message text.

ConvertKit form main settings

Next, go to the Incentive Email tab and check Send incentive. Customize your Subject and Message and then check Incentive download and upload your freebie.

ConvertKit incentive email

Click Save Form and then go to the Embed tab and click Raw HTML. Copy the embed code and head over to WordPress.

ConvertKit embed code

Bloom setup

In WordPress, go to Bloom > Optin forms and click New Optin. Choose Pop Up from the list of options that appear.

Bloom Optin Options

To keep things simple, give your popup the same name as your ConvertKit form in the Optin Name box. For your Form Integration, choose the last option in the dropdown, “Custom HTML Form”. Paste your ConvertKit embed code in the field that appears.

Bloom Integration Settings

Now we’re going to get rid of all the ConvertKit styling by removing the style tags. In the above image you see the closing style tag so we need to scroll up and find the opening tag (left). Once you find it, select everything from the opening tag to the bottom of the code and delete it (right).

[one-half-first]

Bloom Integration Settings - removing styles

[/one-half-first][one-half]

Bloom Integration Settings - deleted styles

[/one-half]

Near the bottom of the code that’s left, you’ll see text between to button tags that says “Subscribe”. Delete that and replace it with a better call-to-action.

new subscribe text

It’s more fun from here on out, I promise. Now click the Next button and we’ll play with some styling settings. For the purpose of this tutorial I’ll choose the template in the top-right, but feel free to scroll through and choose whichever option you like best. After you’ve chosen your starting template, scroll to the bottom and click Next.

This screen is pretty self-explanatory. Scroll through and update the form’s title, message, and image. I like to center my title and description and check “Hide image on mobile” in the Image Settings section. You can preview your form at anytime by clicking the Preview button in the top-right. Don’t worry if things don’t look quite right, we’ll get that fixed up.

Choose fonts, colors, and styling options that go best with your brand in the next couple of sections. I usually like to add a border in the Optin Styling section and update the form and button colors in the Form Styling section.

[one-half-first]

Bloom optin styling

[/one-half-first][one-half]

Bloom form styling

[/one-half]

If you do a preview now, your text fields and button might look a bit funky. Something like this:

Bloom form preview

 

To make things look a bit more streamlined, scroll down to the Custom CSS box and copy/paste the following:

.ck_form_content, .ck_guarantee { 
 display: none !important; 
}

.ck_email_field_group { 
 margin-top: 10px !important; 
 margin-bottom: 10px !important; 
}

#ck_subscribe_button { 
 font-size: 15px !important; 
 font-weight: bold !important; 
 width: 100%; 
}

.et_bloom_form_text { 
 text-align: center !important; 
}

.et_bloom_form_header img { 
 width: 200px !important; 
}

.et_bloom_form_text { 
 padding-top: 40px !important; 
}

.ck_email_address { 
 margin-top: 10px; 
}

.et_bloom .et_bloom_form_header div { 
 font-size: 24px !important; 
 padding-bottom: 0 !important; 
 font-weight: 600 !important; 
 line-height: 1.1em !important; 
 color: rgba(0, 0, 0, 0.8); 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale; 
}

(Watch the above video for a description of these settings.)

If you do another preview of your form, you should now see something like this:

Bloom form preview after CSS changes.PNG

Looking good, right? Almost done! Click Next to finish up with some display settings.

This section is important for making sure your form shows up at the right times. In this example we want the form to display when a reader clicks a button or image, so we’ll use the settings in the picture below.

Bloom form load settings

In the CSS Selector field, this should be something unique to your download. Each opt-in box you create has to have a different CSS selector string so I suggest naming it according to your opt-in’s title. Make sure the string starts with a period and has words separated by hyphens (no spaces). We’ll come back for that later.

In the Display On settings, check “Everything” and then click Save & Exit.

Bloom display on settings

 

Blog post setup

Now all that’s left is to get the pop-up hooked up and ready to display on your blog posts!

You can make this work for a button or image in the same way, all you have to do is add your CSS Selector to whatever you’d like to trigger the pop-up. If you have an image, it will look something like:

<img src="your-image-path.png" class="your-selector-here" />

If you’re using a button, it will look something like:

<div class="button your-selector-here">Click Here!</div>

You can add your selector to as many images or buttons as you’d like throughout your website. Whenever those items are clicked, your pop-up will display.

To make things easier for future pop-ups, you can duplicate any pop-ups you’ve created in the past and simply update the integration code, title and description, image, and CSS selector.

You did it!

You’re all set with your new pop-up! How do you like it as compared to LeadPages?


This post is by the talented Krista Miller of Krista Rae Strategic WordPress Development.

Hey, I’m Krista! I believe that our websites should be our best employees. They should support our passions and work to help our businesses grow. That’s why I team up with talented designers to turn Photoshop files into websites and provide practical, easy-to-understand tips, tricks, and processes to help them create websites that support their clients’ business goals.

Find Krista on Facebook, Instagram, Twitter and Pinterest.

Krista Miller of Krista Rae

Leave a Reply

Your email address will not be published. Required fields are marked *