6 Clever Ways to Style Your ConvertKit Forms for Gorgeous Opt-Ins

6 Clever Ways to Style Your ConvertKit Forms for Gorgeous Opt-Ins

This post contains affiliate links. Please read my disclosure for more info.

I need one of those t-shirts that say “I love ConvertKit.”

Just in case anyone was wondering how I felt about the email marketer.

I’m really into how easy it is to use and kept organized. I love how straightforward it is and that it has a landing page option with different types of pop up designs.

Something I don’t like so much? What their opt-in forms look like.

To add to the problem, I’m not a coder and I’m a ‘good’ design junkie.

So with some playing around and tweaking…and tweaking some more, I came up with a few creative ideas to up your opt-in design game.

Seriously. No one has time to deal with ugly photocopies of opt-ins.

Let’s get started—

First we need to choose and modify the opt-in form.The opt-in form type we’ll be using is the naked, inline form. You can find that once you’re logged in, click forms at the top left corner> + create form> (choose third option).

You’ll be greeted by a form style that looks like the one below. I already went ahead and changed the color with the wand icon right beside the save button. I also changed the button text to ‘download’ by simply clicking on it.

 

 

 

 

After you’re happy with what your form looks like and hit ‘Save’. you can then click on ‘Settings’ in the top bar.

Like I said before, I am not a coder, but with a little research, I was able to find a superbly helpful post by Kristae Rae on How To Customize A ConvertKit Opt-In Form.

Here she gives you the exact code to change the settings of the naked inline form version we’re using. Her code will do a couple of things:

  • Lessen the space around the form
  • Remove limits so form can extend your page width
  • Remove any extras like the shadowing around the form
  • And tweak font size for an overall better look.

You can copy and paste it to the Custom CSS section in your style settings if you’d like to change the look of your form for a sleeker design.

in the settings under ‘Style’, make sure you choose the right settings for the ‘Naked’ form style and to show the form as ‘inline.’

This is where you can copy and paste the CSS style modifications if you’re interested in changing the look. Always remember to save the form.

 

 

 

 

BIG TIP TO KEEP IN MIND: If you don’t like the spacing between the opt-in form and your image, you can go back to Custom CSS under style settings and paste this piece of code at the end:

 

.ck_naked {
margin-top: -30px !important;
margin-bottom: -30px !important;
}
.ck_form_fields {
padding-left: 0 !important;
padding-right: 0 !important;
}

 

This will minimize the space between the opt-in and your image and make your design look more put together with better spacing.

So, after styling the form and all the appropriate opt-in specifications you can then start playing around with the style of your opt-in on your post. These ideas work whether you can to stick them in the middle of your posts or at the end:

The Image In The Middle Opt-In

I like to call this the classic opt-in because it’s clean, non-cluttered, and to the point. All you have to do is add bar dividers to each side of the opt-in to set it apart, add your text, add a centered image of your choice in thumbnail size, and add the opt-in form code below. You can get results like these:

 

 


Need the outline I use to perfect my writing?
Download the outline below to keep handy when writing your next blog post!


 

 

You might have to play around with the image size to get it to where you want. I uploaded the image size as a 500 x 300 px PNG image and was then able to resize it on WordPress as 263 x 197 pixels.

You can either adjust the image by exact number or after clicking the image use the image handles to make smaller or bigger.

The Right Aligned Image Opt-In

This one is similar to the one above except it aligns the image to the right of your post. The sizing is the same, just make sure when you click on the image you choose the ‘right align’ option (the left align option works too!). You can use icons or screenshots of the actual freebie. Here’s an example of a right aligned opt-in:

 

 


Download your guide
to sell the crap out of your post!
Get the 10 strategies I use to close the sale every single time.

 


 

 

The Centered Image Opt-In

You can add a bar style image, center it, and add the opt-in form at the bottom. It can look something like this:

 

 




 

 

You can make it background less for a ‘floating icon effect’ by saving an image with a clear PNG setting:

 

 


Get access to the complete library of blog boosting material to get you on the path to success!


 

 

The Image Button Opt-In

Instead of having the opt-in form embedded right your post, you can include just the clickable image, where the opt in will show up in ‘modal’ form.

 

 

 

To create this opt-in type we’ll be using the full form style in the modal setting.

Go to forms > + create forms > ‘choose the middle option’> and then modify to your liking. Here I’ve added a quick icon with a title and changed the button text to ‘download.’ Remember, you can change to your exact brand colors by using your color codes under the magic wand icon beside the ‘Save’ button.

TIP: Adding an image to the text box under the actual image box will usually work better. Adding an image to the provided image box can distort the alignment of your live opt-in form.

 

 

 

 

After you’ve personalized your form, you can save and move on to modify the settings.

under settings > style, make sure the right options are checked off (‘full’ form style. show this form as ‘modal’). When you check ‘modal’ additional options automatically appear. Here is where you’ll have to do some copy and pasting into the ‘text’ of your post.

 

 

 

 


You can replace the IMAGE LINK text with the URL to your image. To get my image URL, I upload the image to my WordPress image library, click on it, and copy and paste the URL in place of the IMAGE TEXT.

Preview your post and click the image for a modal form to pop up!

 

Side Bar Image Opt-In

Side bar opt-ins can be personalized to exactly how you want them to look with the image + form hack. For my side bar opt-in I used the image jetpack widget (which you’ll get once you download the Jetpack plugin. Highly recommended for the WordPress editor.

 

 

 

 

You can add your image URL from your media library and under captions add your ConvertKit code for it to show up right under the image! Depending on your theme, you’ll have to play around with the width and height pixels to align and size it accordingly.

Extra Tip: If you’d like your side bar opt-in to be ‘sticky’ and scroll down along with the page, download the Q2W3 Fixed Widget. It’ll give you the option of making your opt in and other parts of your page ‘sticky.’

This is what I use to style my sidebar.

 

 

Extra Tips

To make your beautiful opt-in is as enticing and action inducing as possible, follow these three basic call-to-action tips:

Start with a question!

A questions is stronger than a simple sentence because it makes the reader automatically want to answer it. A question commands their attention and reels them in.

Use a bold statement

Bold statements are the way to go for higher conversions with opt-ins.

“Stop being forgettable: Make a change with this downloadable guideline and turn awesome.”

Is more exciting and attention getting than:

“Download this guideline to learn to become awesome.”

Ever will be.

Use ‘you’ language

There is something about using ‘I’ in opt-ins that make them less desirable. After all, its all about helping and giving value to your audience.

“Download MY cheatsheet”

“Get MY case study”

—All sound better when you make them ‘you’ centered.

“Download YOUR cheatsheet.”

“Get YOUR case study.”

See a difference?

Lastly, have fun with it.

Play around with what works and what doesn’t work for you to modify it to your own blog style.

ConvertKit is a great email marketer if you’re serious about growing your blog list and making it profitable from the very beginning.

You can get started with ConvertKit here (affiliate link).

Any ConvertKit modifications I missed? Share them below 😊