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:
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:
Step 3: Style
Once you happy with the changes, go to the Settings tab and then select the Style option on the left side.
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.
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:
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:
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:
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:
If you want to change the font on the Subscribe button:
.ck_subscribe_button {font-family: Playfair Display;}
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.
Okay, now let's combine some of those together in order to achieve the following look:
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