The ConvertKit email marketing platform has been exploding lately, and for good reason. For the first 7 months of running my business, I used MailChimp. I have nothing against MailChimp and still think it’s the best choice for beginners, but I’m so happy I upgraded to gain more control over my list.

As amazing as the features of ConvertKit are, a common complaint is that their opt-in forms are…well…ugly. I don’t blame them, they have more important features to worry about than making opt-in forms that everyone likes. So today I’m here to help you out with a video and step-by-step written tutorial of how to customize the look of your ConvertKit opt-in forms.

We’ll go through customizing two of the form styles today. First, the simple horizontal form and second the option that shows an incentive.

How To Customize A ConvertKit Opt-In Form 1
How To Customize A ConvertKit Opt-In Form 2

If video is your preferred learning method, you can watch the step-by-step tutorial below. The video starts out with the simple horizontal form and instructions for the incentive form start at 6:34. If you prefer text tutorials, scroll past the video for written instructions.

How to customize the horizontal ConvertKit form

Log into ConvertKit and click the Create Form button under your Subscribers graph.

How To Customize A ConvertKit Opt-In Form 3

Choose A form. (Stay tuned for a landing page tutorial)

How To Customize A ConvertKit Opt-In Form 4

Let’s start with the simple horizontal form, shown all the way to the right.

How To Customize A ConvertKit Opt-In Form 5

We’re starting off with this – could be worse, but not gorgeous, right?

How To Customize A ConvertKit Opt-In Form 6

Change the color of the Subscribe button and text by clicking the little magic wand next to Save.

How To Customize A ConvertKit Opt-In Form 7

You can now change the button and text colors to match your brand.

How To Customize A ConvertKit Opt-In Form 8

So far, mine looks like this. #progress 🙂

How To Customize A ConvertKit Opt-In Form 9

Click Save and then go to the Settings tab. Take a look at the Main settings options, being sure to enter a name for your new form. The rest of the settings are all up to you!

How To Customize A ConvertKit Opt-In Form 10

Don’t skip over the Incentive Email tab, but since that doesn’t have anything to do with making your signup forms pretty I won’t go over any of that here. Let’s move on to the Style tab.

In this tab, I added CSS to do the following:

  • Decrease the space above and below the form
  • Remove the form’s maximum width so it can extend across your entire page
  • Change the button text to uppercase
  • Remove the shadow around the text fields
  • Darken the placeholder text
  • Make the text fields font size a tad smaller

In my video tutorial, I tell you how to change some of those settings to make the font size larger, add a maximum width, and increase the space on the top and bottom of the form. If you want to make any customizations be sure to check it out.

Copy and paste the following CSS into the Custom CSS textbox on that page and click Save Form.

.page .ck_form.ck_naked {
margin: 10px auto;
max-width: none;
}

.ck_form.ck_naked .ck_form_fields {
padding: 10px 0;
}

.ck_form.ck_naked .ck_subscribe_button {
text-transform: uppercase;
}

.ck_form.ck_naked input[type=”text”], .ck_form.ck_naked input[type=”email”] {
box-shadow: none;
font-size: 16px;
}

::-webkit-input-placeholder {
color: #333;
}

:-moz-placeholder { /* Firefox 18- */
color: #333;
}

::-moz-placeholder { /* Firefox 19+ */
color: #333;
}

:-ms-input-placeholder {
color: #333;
}

That will leave you with something like this!

To add the form to your website, go to the Embed tab, copy the script line and paste in whichever post, page, or widget area you’d like it to appear!

How To Customize A ConvertKit Opt-In Form 16

How to customize the ConvertKit incentive form

Log into ConvertKit and click the Create Form button under your Subscribers graph.

How To Customize A ConvertKit Opt-In Form 3

Choose A form (Stay tuned for a landing page tutorial)

How To Customize A ConvertKit Opt-In Form 4

The middle option will let you display your checklist, workbook, eBook, or any other incentive.

How To Customize A ConvertKit Opt-In Form 13

And here’s what we’re starting with. …no thanks.

How To Customize A ConvertKit Opt-In Form 14

You are free to click any of the text on this form and edit it to fit your brand and your incentive. For the sake of this tutorial, I’ll leave mine as the defaults.

Change the color of the Subscribe button and text by clicking the little magic wand next to Save.

How To Customize A ConvertKit Opt-In Form 7

You can now change the button and text colors to match your brand.

How To Customize A ConvertKit Opt-In Form 8

To upload an image, click the image placeholder and choose the file to upload. When uploading a file, don’t make it any larger than it needs to be. The final form I created had an image that got sized down to 132×170. Since your file is shown at such a small size, don’t upload anything larger than 340px in height, if you don’t have to.

If the image you choose is overflowing out of the space, just click the Save button and everything will look good once the screen reloads.

Here’s what I’ve got so far after setting my Accent Color to pink, my Button Color to orange, and uploading my image.

How To Customize A ConvertKit Opt-In Form 15

Click Save and then go to the Settings tab.

Take a look at the Main settings options, being sure to enter a name for your new form. The rest of the settings are all up to you!

How To Customize A ConvertKit Opt-In Form 10

Don’t skip over the Incentive Email tab, but since that doesn’t have anything to do with making your signup forms pretty I won’t go over any of that here. Let’s move on to the Style tab.

In this tab, I added CSS to do the following:

  • Make the bottom border color the same as the top
  • Make the top border size the same as the bottom
  • Remove the form’s shadow
  • Change the large text on the left to be centered and uppercase
  • Center the image
  • Decrease the spacing between the form borders and content
  • Change the field labels to uppercase
  • Make the forms and buttons have square corners, rather than rounded
  • Hide the “Powered by ConvertKit” text

In my video tutorial, I tell you how to change some of those settings to make the font size bigger, add a maximum width, and increase the space on the top and bottom of the form. If you’re interested in making changes like that be sure to scroll back up and check out the video.

Copy and paste the following CSS into the Custom CSS textbox on that page and click Save Form.

.ck_form.ck_horizontal {
border-bottom-color: #YOURCOLORHERE;
box-shadow: none;
border-top-width: 10px;
}

.ck_form_content h3 {
text-align: center;
text-transform: uppercase;
}

.ck_image {
text-align: center;
width: 100%;
}

.ck_form_content {
padding: 20px 0 15px 0;
}

.ck_form_content p {
clear: both;
padding-top: 10px;
text-align: center;
}

.ck_label {
text-transform: uppercase;
}

.ck_form input[type=”text”], .ck_form input[type=”email”] {
border-radius: 0;
margin-bottom: 15px;
}

.ck_form .ck_subscribe_button {
border-radius: 0;
font-weight: bold;
padding: 13px 0;
text-transform: uppercase;
}

.ck_form .ck_guarantee {
display: none;
}

That will leave you with something like this!

How To Customize A ConvertKit Opt-In Form 17

To add this to your website, go to the Embed tab, copy the script line and paste it wherever you’d like your fancy new form to appear on your website!

Are your forms looking better?

I hope your forms are looking a whole lot better after working through this tutorial!


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

[wc_row]

[wc_column size=”two-third” position=”first”]

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.

[/wc_column]

[wc_column size=”one-third” position=”last”]

Krista Miller of Krista Rae

[/wc_column]

[/wc_row]

Leave a Reply

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

9 thoughts on “How To Customize A ConvertKit Opt-In Form

  1. OMG! I have been waiting for so long for someone to write a post like this. I wish ConvertKit’s forms were easier for code newbies like me. THANK YOU so much for the code examples, now my subscribe form looks 100000x better on my site! I am so excited!

    Posted on October 20, 2017 at 12:16 am
    1. I’m so happy you found it helpful! Be sure to head over to Krista’s site too. She has a lot of helpful goodies!

      Posted on October 23, 2017 at 9:28 am
  2. Wow this was totally helpful! Thank you so much Katie. When first I saw that the bottom line is darker, I just didn’t get it. Why??? You made it disappear 🙂 Thanks again. Aliz

    Posted on November 26, 2017 at 4:09 pm
  3. Thank you so much for this timely post! This was so helpful in getting my forms to look on brand and more professional. Much appreciated!

    Posted on January 5, 2018 at 4:48 pm
  4. Thanks again for the tutorial. In addition to the Incentive form, I’d also like to use the modal form for button sign ups in Squarespace. I’ve figured out how to do the Squarespace side but can’t see how to customize the modal form in Convertkit. Do you have a code for that like the above for the Horiontal form?
    Thanks so much.
    Kelly

    Posted on January 5, 2018 at 5:42 pm
  5. Thank you for this! I was not a fan of the preset designs!

    Posted on January 26, 2018 at 2:49 am
  6. This was incredibly helpful! Thanks!

    Posted on February 18, 2018 at 3:57 pm
  7. Katie, thank you SO much, you are wonderful! xXx

    Posted on February 23, 2018 at 4:28 pm
    1. p.s. I mean Krista and Katie! 🙂 xXx

      Posted on February 23, 2018 at 4:42 pm