Customize A Naked ConvertKit Opt-in Form

How To Customize A Naked Opt-in Form in ConvertKit

ConvertKit is by far the easiest email marketing software I have ever used! I saw great results just by embedding their forms on my website and organizing my email subscribers list using tags. If you are not convinced yet, check out the full list of features they offer.

In my previous tutorial, I showed you how to set up ConvertKit  and create your first form. You might have noticed that by default ConvertKit’s forms don’t look very pretty. Which means that just changing the colors of the buttons or the form borders  won’t give them the branded look you need!

You may be wondering: How do I remove that extra white space around my form? I got you covered, Girlboss!

In this tutorial, I will show you how to customize the Naked ConvertKit Form.

Follow my step-by-step tutorial and learn how to change the layout in order to match your brand by adding a little CSS code ( psst, it’s easier than you think!)

By default, the Naked Form  looks like this:

customize naked form convertkit

 

Step 1- Log into your CK account and select the desired form you would like to modify.

Step 2- You can change the color of the button right inside ConvertKit, so let’s do this first.

customize naked form convertkit

 

Step 3- Once you happy with the changes, go to the Settings tab and then select the Style option on the left side.

customize naked form convertkit

Step 4- After you have selected the Naked form option, scroll down to the Custom CSS field . Here is where you will insert the code below in order to modify the look of your ConvertKit form.

 

Read the instructions below, then copy and paste the desired CSS code into the Custom CSS box of the page. Note: Don’t forget to use your own brand colors!

If you wish to make the button text all caps: 

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

This will give you the following result:

customize naked form convertkit


If you want to expand the form so it fits the full width of your page:

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

This will give you the following result:

customize naked form convertkit

If you want to change the color of the placeholder text:

.ck_form.ck_naked input[type=”text”]::-webkit-input-placeholder, .ck_form.ck_naked input[type=”email”]::-webkit-input-placeholder {
color: #C0972E;
}

.ck_form.ck_naked input[type=”text”]::-moz-placeholder, .ck_form.ck_naked input[type=”email”]::-moz-placeholder {
color: #C0972E;
}

.ck_form.ck_naked input[type=”text”]:-ms-input-placeholder, .ck_form.ck_naked input[type=”email”]:-ms-input-placeholder {
color: #C0972E;
}

 

This will give you the following result:

customize naked form convertkit

If you want to change the font of the input fields:

.ck_form.ck_naked input[type=”text”]::-webkit-input-placeholder, .ck_form.ck_naked input[type=”email”]::-webkit-input-placeholder {
font-family: Playfair Display;
}

.ck_form.ck_naked input[type=”text”]::-moz-placeholder, .ck_form.ck_naked input[type=”email”]::-moz-placeholder {
font-family: Playfair Display;
}

.ck_form.ck_naked input[type=”text”]:-ms-input-placeholder, .ck_form.ck_naked input[type=”email”]:-ms-input-placeholder {
font-family: Playfair Display;
}

This will give you the following result:

customize naked form convertkit

If you want to change the font on the Subscribe button:

.ck_subscribe_button {
font-family: Playfair Display;
}

customize naked form convertkit

If you wish to change the shape of the button to round:

 

.ck_form.ck_naked .ck_subscribe_button {
border-radius: 30px;
}

Note: if you wish just to round the corners a little bit, use a lower value, 5x for example.

customize naked form convertkit

Okay, now let’s combine some of those together in order to achieve the following look:

customize naked form convertkit

Here is the CSS I used:

.ck_form.ck_naked input[type=”text”]::-webkit-input-placeholder, .ck_form.ck_naked input[type=”email”]::-webkit-input-placeholder {
color: #DBBAB3;
text-align:center;
}

.ck_form.ck_naked input[type=”text”]::-moz-placeholder, .ck_form.ck_naked input[type=”email”]::-moz-placeholder {
text-align:center;
color: #DBBAB3;
}

.ck_form.ck_naked input[type=”text”]:-ms-input-placeholder, .ck_form.ck_naked input[type=”email”]:-ms-input-placeholder {
text-align:center;
color: #DBBAB3;
}

.ck_form.ck_naked. ck_subscribe_button {
text-transform: uppercase;
background-color: #F7DDDB;
color: #C0972E;
}

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

Don’t forget to click Save Form after you are done and paste the code on your website.

Can’t wait to see your results! Share with me a screenshot of your ConvertKit opt-in forms after you tried this tutorial 💖

xx Iglika

 

  • Darling CEO

    I needed this in my life! I’m just getting started with ConvertKit but I hate their forms. This made my day!

  • We need custom css options from Convertkit.

  • Dan

    ConvertKit is good, but you can get pretty much the same features absolutely free of charge from Bitrix24 or any of its clones.

Canva Templates for InstagramGET FOR ONLY $14!
+