Customize A Naked ConvertKit Opt-in Form

How To Customize A Naked Opt-in Form in ConvertKit

Disclosure: This post contains affiliate links. By clicking on the links and purchasing something, I will earn a small commission. This helps me deliver great content for free. Thank you for supporting Lipstick and Pixels!

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 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, Girl Boss!

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

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 Opt-in Form looks like this:

customize naked opt-in form convertkit Lipstick and pixels

 

Step 1: Logn

Log into your CK account and select the desired form you would like to modify

Step 2: Change color

You can change the color of the button right inside ConvertKit, so let’s do this next

customize naked opt-in form convertkit Lipstick and pixels

 

Step 3: Style

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

customize naked opt-in form convertkit Lipstick and pixels

Step 4: Custom CSS

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.

 

customize naked opt-in form convertkit Lipstick and pixels

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 opt-in form convertkit Lipstick and pixels


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 opt-in form convertkit Lipstick and pixels

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 opt-in form convertkit Lipstick and pixels

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 opt-in form convertkit Lipstick and pixels

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

.ck_subscribe_button {
font-family: Playfair Display;
}

customize naked opt-in form convertkit Lipstick and pixels

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 opt-in form convertkit Lipstick and pixels

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

customize naked opt-in form convertkit Lipstick and pixels

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