Customize forms in Convertkit with CSS

 

As a small business owner, learning an e-mail marketing system can seem like a dreadful task. What are these opt-in forms, and why am I using them?! E-mail marketing is incredibly powerful in that it empowers small business owners to use incentives, call-to-action buttons and forms, and other features to drive sales.

If you're like me, you made the switch from Mail Chimp to Convertkit. Convertkit allows for much more simple customization options with opt-in forms. 

With that being said, the forms are not the most aesthetically pleasing and can potentially make your website look distracting to visitors. However, there is a solution- custom CSS!

With custom CSS, you can turn something like this,

 
 
custom-css-convertkit.png
 

into something like this.

 
Screen Shot 2018-06-11 at 10.37.05 AM.png
 
 

If you want to check out some of the basic customizations options, you can head to the knowledgebase in Convertkit. But if you'd like a cheat sheet and are looking for the most useful CSS lines to implement into your Convertkit forms, keep reading. These codes apply to both the minimal and full form options.

In order to add custom styling to your form, complete the following steps:

  1. Login to your Convert Kit account

  2. By default you should land on the page with your forms listed. Select the form you’d like to edit

  3. Click the Settings tab at the top

  4. Choose the Style option on the left side

  5. You will see a blank Custom CSS box. If you see a line of code below that is associated with the aspect of your form you'd like to modify, simply copy and paste that line into the box

Remove the shadow around the form

.ck_form {
box-shadow: none;
}

Change the background color of the form

Change the hex (#) value to match your color.

.ck_form {
background-color: #e2e4db;
}

Add a border around the form

You can also increase the width of the border here by changing the px value. Change the HEX value to match your color.

.ck_form {
border: 1px solid #eee;
}

Delete a border around the form

.ck_form {
border: 0px solid #eee;
}

Change the font size of copy

Increase or decrease the px value shown.

.ck_form_content p {
font-size: 16px;
}

Change the font size of the subscribe button

Increase or decrease the px value shown.

.ck_form .ck_subscribe_button {
font-size: 15px;
}

Remove “Powered by ConvertKit”

Add the following to your form's custom CSS to remove it:

.ck_powered_by {
display: none !important;
}

OR if you're trying to remove it from a ConvertKit hosted landing page, use this:

.public .footer a {
display: none !important;
}

If you want to change the font style:

.ck_label {
font-family: 'arial', sans-serif !important;
}

.ck_form_content p {
font-family: 'arial', sans-serif !important;
}

input, .ck_form, .ck_label, .ck_subscribe_button {
font-family: 'arial', sans-serif !important;
}

Do you want to tweak something that I didn’t cover above? Is there a specific line of code you need help with? Leave a comment below and I’ll get back to you as soon as possible!


*Disclosure; Some of the content above may contain affiliate links. However, I wouldn't recommend tools, apps or resources if I didn't use them and find them helpful myself.