Complete guide to customizing opt-in forms in ConvertKit

There are quite a few basic pieces of your form you can customize right in the ConvertKit app. You can learn how to customize those basics in our Knowledgebase. But if you’re curious about customizing the CSS for your forms on ConvertKit, there are

The easiest way to figure out what you can modify is by checking out code. To do this follow these simple steps:

  • Hit the View button on your form page to show a page with only the form on it.
  • Right click on the page and then click on View Page Source– this will give you the full code for your form.
  • This code page is where you can look for all the classes you can target and customize.
  • Find the section starting with <style type=“text/css”>/*layout*/ and everything under that line can be customized.

When you see the line of code associated with the aspect of your form you want to modify, you can copy & paste that line into the Custom CSS box in the Style tab of your form settings.

Change the background color

Change the HEX value to match your color.

.ck_form {background-color: #3A3F57;}

Remove the shadow around the box

.ck_form {box-shadow: none;}

Add a border around the box

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;}

Change the color of the subscriber button

Change the HEX value to match your color.

.ck_form .ck_subscribe_button { background: #3A3F57;}

Change the font size of the subscribe button

Increase or decrease the px value shown.

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

Change the font size of copy

Increase or decrease the px value shown.

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

Change color of the text

Change the HEX value to match your color.

.ck_form {color: #3A3F57;}

Adding first name on Minimal form

With a little extra CSS, you can add a first name field onto a Minimal form.

You can grab the HTML embed code from form settings and the embed tab, then above the email field, add the following:

<input id="”ck_firstNameField”" name="”first_name”" type="”text”" placeholder="”First" />

You may need to adjust the code a bit since the Minimal form was not designed to have the first name field, so the field widths, etc. might be thrown off a bit. You'll also then need to embed this code using the HTML that you modify.

Hide the First Name Field

Just drop in one line of CSS and you can hide the first name field from your visitors:

.ck_first_name_field_group {display:none;}

If you want to hide it for the Naked form style, the CSS will be added as:
.ck_first_name {display:none;}

That code can go under the style settings for each form. Or if you wanted it to apply to every form on your entire site you could add it to your main site stylesheet.

See our Knowledgebase article about hiding the first name field for more information.

Removing padding from the Naked form

To remove the padding for your naked form, please apply the following to custom CSS under your form's setting in the style tab:

.ck_naked {
 margin-top: -30px !important;
 margin-bottom: -30px !important;
}

.ck_form_fields {
 padding-left: 0 !important;
 padding-right: 0 !important;
}

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, this:
.public .footer a { display: none !important; }

Custom CSS affecting other forms

You can wrap your sidebar form code with

Form goes in here

where class_name can be whatever you'd like to name your form.

Then, in the custom CSS box, be sure to call specifically to that form. So you would write something like:

.class_name .ck_form {
 color: yellow; font-family: “green-smoothie-pro-free”, sans-serif;
}

Examples

Use these templates as a starting point for your CSS customizations. Below are 5 examples using the Minimal and Naked forms in ConvertKit. To use one of these examples, simply copy the CSS provided into the Custom CSS field on your form settings.

Colorful

This example uses the Minimal form.


View on CodePen

Simple

This example uses the Minimal form.


View on CodePen

Two-tone

This example uses the Minimal form.


View on CodePen

Sidebar

This example uses the Minimal form.


View on CodePen

Header


This example uses the Naked form and will overlay onto any background color or image below it.

View on CodePen