C ConvertKit

How to add custom CSS styling on ConvertKit

intermediate 8 min read Updated 2026-03-18
Quick Answer

You can add custom CSS styling to ConvertKit forms and landing pages through the Settings panel in the editor. Access the CSS section, paste your custom styles, and preview changes before publishing.

Try ConvertKit Full ConvertKit Review

Prerequisites

  • Active ConvertKit account
  • Basic understanding of CSS syntax
  • Access to form or landing page editor
  • Text editor for writing CSS code

Step-by-Step Instructions

1

Access Your Form or Landing Page Editor

Log into your ConvertKit account and navigate to Forms or Landing Pages from the main dashboard. Select the form or landing page you want to customize and click the Edit button to open the editor interface.
Make a backup copy of your form before adding custom CSS in case you need to revert changes.
2

Open the Settings Panel

In the form or landing page editor, locate the Settings tab in the right sidebar. If you don't see it immediately, look for a gear icon or settings symbol. Click on Settings to expand the configuration options.
3

Find the CSS Section

Within the Settings panel, scroll down to find the CSS section or Custom CSS option. This may be labeled as Advanced Styling or Custom Code depending on your ConvertKit plan and interface version.
Custom CSS options are typically available on Creator Pro plans and above.
4

Write Your Custom CSS Code

Click in the CSS text area and add your custom styles. Use proper CSS syntax with selectors, properties, and values. For example:

.formkit-input {
  border-radius: 10px;
  border: 2px solid #3498db;
}

.formkit-submit {
  background-color: #e74c3c;
  font-weight: bold;
}
Use browser developer tools to inspect ConvertKit's default CSS classes before writing your custom styles.
5

Target ConvertKit-Specific Elements

Use ConvertKit's default CSS classes to target specific elements. Common classes include .formkit-form for the entire form, .formkit-input for input fields, .formkit-submit for buttons, and .formkit-header for form headers.
Add !important to CSS properties if your styles aren't overriding ConvertKit's default styling.
6

Preview Your Changes

After adding your CSS code, click the Preview button to see how your styling changes look. Check that all elements display correctly and that your custom styles are being applied as intended.
Test your form on different devices and browsers to ensure consistent styling across all platforms.
7

Save and Publish

Once you're satisfied with your custom styling, click Save to apply the changes to your form or landing page. Then click Publish or Update to make the styled version live for your subscribers.
Keep a copy of your custom CSS code in a separate document for future reference or troubleshooting.

Common Issues & Troubleshooting

Custom CSS not appearing or being applied

Ensure you're on a ConvertKit plan that supports custom CSS. Add !important to your CSS properties to override default styles, and check for syntax errors in your code.

Styling looks different on mobile devices

Add responsive CSS using media queries like @media (max-width: 768px) to ensure your styling works across all device sizes.

CSS changes not showing after saving

Clear your browser cache and refresh the page. Sometimes it takes a few minutes for changes to propagate across ConvertKit's servers.

Unable to find CSS section in settings

Verify your ConvertKit subscription plan includes custom CSS features. If not available, consider upgrading to Creator Pro or contact ConvertKit support for plan-specific limitations.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official ConvertKit website before purchasing.
Visit ConvertKit View ConvertKit Pricing