How to customize your ConvertKit forms with a little CSS
If you’ve just made the switch to Convert Kit, you’ll know the default forms come with this blue color that doesn’t necessarily match your brand. So how on earth do we customize this to match your brand colors and personalize it a bit? It’s actually easier than you think and I’m about to provide all the css you’ll need to customize your forms!
First, let’s look at an example of a customized form and then we will walk through each section.
Let’s get started
In order to add the styling to your form, you will do the following:
- Login to your Convert Kit account
- By default you’ll land on the page with your forms listed at the bottom. Select the form you’d like to edit.
- Click the Settings tab up top
- Choose the Style option on the left side
- In the blank Custom CSS box, you’ll paste the codes I provide below
How to customize the top and bottom borders
You’ll paste in the below code and tweak the HEX color code for the top and bottom borders to your own.
.ck_form {
border-top-color: #FFF8F6;
border-bottom-color: #FFF1EE;
}
How to remove the borders on the top and bottom
Alternatively, you can choose to remove the borders completely.
.ck_form {
border-top: none;
border-bottom: none;
}
How to change the background color
.ck_form {
background-color: #f9f9f9;
}
How to remove the shadow around the box
I’ve kept the border on my forms but you can remove the shadow with the code below
.ck_form {
box-shadow: none;
}
How to add a border around the entire box
You will just tweak the HEX color code here with the color of your choice. You can also increase the width of the border around the box as well. Keep in mind that when you do this option, it will remove the top and bottom borders and the box will be the same all the way around.
.ck_form {
border: 1px solid #eee;
}
How to change the color of the subscribe button
Again, just change the HEX color code to the color of your choice.
.ck_form .ck_subscribe_button {
background: #3A3F57;
}
How to change the font size on the subscribe button
.ck_form .ck_subscribe_button {
font-size: 15px;
}
How to change the font size of the paragraph text
I found that the paragraph text on the left was a bit too small by default to match the rest of my site so I tweaked that a bit.
.ck_form_content p {
font-size: 16px;
}
How to change the color of the text color
Again, just change the HEX color code to the color of your choice.
.ck_form {
color: #3A3F57;
}
Do you want to tweak something that I didn’t cover above? Leave a comment below and I’ll see about getting that added!
THANK YOU FOR THIS!!!!!
This is great!
awesome. any way i can change the form to look like your blog post image ? so i guess im looking for: how to determine the size of the form, how to setup image as background and how to force to form to be vertical,
Hi Thomas,
The form will automatically resize on it’s own so it looks great across all platforms. To add a background image, you’ll have that to the .ck_form element.
Hello! How did you center your form fields like you have above? I love that!
Hmm.. are you referring to the embedded form within the post? Those are positioned to the right?
Hi there Lauren!
Thanks so much for posting this. I’m brand new with ConvertKit and this extremely helpful. I’m in the process of tying up some loose ends with my wife’s new blog site and have one quick ConvertKit question… I placed a form on the Contact Us page ( https://FamilyFelicity.com/contact-us ) – promise I’m not trying to get a backlink (even though that would be nice). The last form field is a text-area for a multiple line message. For the life of me, I can’t figure out how to 1.) Make the input text start at the top of that field, and 2.) How to get that field to display/use multiple lines as opposed to a never-ending single line. Any help on that would be Amazing! Thanks in advance!
Hi Reggie,
I took a peek at your site and inspected the code a bit and I’m not seeing the issue right off. This could be a plugin conflicting somewhere if you haven’t ruled that out. Beyond that, I think I would submit a support ticket with Convert Kit to see if they have any advice for you!
Thank you for this!
I’d love to know how to change the font on the button, and how to round the corners of boxes and buttons to match the rest of my branding. (8px radius).
Thanks in advance!! 🙂
Hi Natalie,
You’re so welcome!
To add rounded corners to the buttons, you’ll edit this code:
.ck_form .ck_subscribe_button {
background: #3A3F57;
border-radius: 8px;
}
.ck_form {
border: 1px solid #eee;
border-radius: 8px;
}
And you’ll add what I’ve bolded above!
This may be the dumbest question ever but I’m not getting it to work and wondering if my problem is that the code should be stacked altogether or just the few lines you provided. So, would you add more lines of codes based on the manipulations or just pick one? Thanks in advance! (This is so helpful!)
Hi Sara, no question is dumb.. you’re all good!!
So you’ll just stack the code one on top of the other to add all that you need!
Great article! Very helpful!
Is there any way to use a minimal form but add a “first name” field as well?
Hi Stephen,
Wonderful.. I’m so glad this was helpful for you!
I’m not really sure the answer to your question, so that might be something you ask the Convert Kit team.
Where is the hands up Emoji! yay did not even know I could do this, so nice of you to help us out
You’re so very welcome!
Thanks! This is super helpful 🙂
Do you know the CSS for changing the text of the subscribe button to a different phrase?
Fiona, you can actually edit the text of the Subscribe button directly in Convert Kit. Just make certain you’re on the Content tab within your Form and then you can click directly on Subscribe and edit the word right there.
Thanks for this, for some reason the only thing that changed for me was making the edges rounded, the other things refused to change when i copied and pasted them into the style custom css on convert kit, any ideas?
Hi Lola,
Can you paste in your entire code you have in the box in ConvertKit? I’d need to see the full thing.. sounds like something might be broken there.
Hello, thank you for this post! Very useful 🙂
I am wondering if there’s a way to change the font of both the subscribe button and of the text inside my box? I would like to style them to my branding.
You can add a font-family: NAME OF FONT; to these two sections:
.ck_form .ck_subscribe_button {
background: #3A3F57;
}
.ck_form_content p {
font-size: 16px;
}
I’m so excited I found this post! Thank you for sharing. I’m still having trouble formatting mine. I feel like I’m all over the place with what to enter. Can you share what your code looks like for your form in your sidebar? Thanks in advance! -xx
Hi Monica, Can you send me a screenshot of your genesis e-news extended widget so I can help you? Please email it to lesley@restored316.com. Thank You!
Thank you sooooooso much for this help. I almost wanted to cry after seeing that ugly blue box splat in the middle of my cute little site. lol I copied and pasted the exact text for changing the color of the Subscribe button, but nothing is changing. Does it take a few minutes??
Hi Naomi, The changes should actually work right away. Did you click the view button as opposed to just looking at the form under the “content” section? Also, double check the color hex code to make sure that’s correct.
Hi Lauren,
Thank you so much for doing this! Any chance you can advise how to remove the padding on the top of a form (where the title goes)? Thank you in advance!
~ Katie
PS You can see the form at http://www.thebakers.tv (12 Unique Date Night Ideas…for $15 or Less)
Hi Katie,
You’re so welcome!
I’m not seeing the title on your form. Were you able to get that figured out?
Lauren…
Super useful info. Thanks.
My issue is trying to adjust the height of the embedded ConvertKit form. Not sure which element of the HTML or CSS controls that height setting, but I can’t seem to adjust it.
http://www.MedoraHeilbron.com
For reference I included the ugly orange bar above the subscribe box – as that’s roughly the target height for the entire Subscribe box (knowing I’ll also need to decrease the height of the button and the form fields).
Any guidance here is exceptionally appreciated.
Thanks!!
Enjoy………….G
Hi Gary,
I just took a peek but the subscribe box on the home page looks like it’s a plugin and not the embed code from Convert Kit. Did you decide to switch this up?
This is so GREAT! I’ve pinned your article.
I’m a little stuck – how do you change the alignment to the left? For example, I am using a simple email form in a wordpress template and want to make it align left.
website –> iglm.rocks
Hi! Thanks for your article! I’m trying to reduce the padding between the elements. Any idea how I can do that?
Thanks!
Hi Sarah! You’re very welcome! Glad this was helpful!
Are you able to link me to an example so I can see the code?
This is so helpful! Thank you!
Do you happen to know if there is an option to resize an image within a form?
You’re very welcome!
Hmm.. I don’t think so actually! You probably can with CSS but I’d need a link to it to see.
Helpful! Is there a way to put CSS into the Custom CSS box to add an image gallery? i appreciate your help!
Hi Anita! So glad you found this post helpful!
If you’re using the new editor in ConvertKit, they have an option to add Galleries directly to your broadcasts.
This is so helpful! I am also having an issue with the padding. I am trying to reduce the padding above the form where I have it at the top of my homepage and also in my sidebar: https://unanchoredpassenger.com/
Thank you in advance!
You can try adding the following:
.formkit-form[data-uid=”c2f6107938″][min-width~=”700″] [data-style=”clean”], .formkit-form[data-uid=”c2f6107938″][min-width~=”800″] [data-style=”clean”] { padding-top: 0; }