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 a few simple steps.

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.

{ background-color: #3A3F57; }

Remove the shadow around the box

{ 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.

{ border: 1px solid #eee; }

Change the color of the subscriber button

Change the HEX value to match your color.

.formkit-submit { background: #3A3F57; }

Change the font size of the subscribe button

Increase or decrease the px value shown.

.formkit-submit { font-size: 15px; }

Change the font size of copy

Increase or decrease the px value shown.

.ck_subheader { font-size: 16px; }

Change color of the text

Change the HEX value to match your color.

.formkit_header or .formkit-subheader {color: #3A3F57;}

Adding first name on Minimal form

You can do this with the built in editor.

Hide the First Name Field

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

.formkit-input:first-child { display: none; }

Remove “Powered by ConvertKit”

Click on the words Powered by ConvertKit in the form editor and uncheck the box in the settings panel on the right side.

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:

:global(.class_name .formkit-form) {
 color: yellow; font-family: “green-smoothie-pro-free”, sans-serif;