Does your form look different on your website than it does within the ConvertKit form builder?
If so, there is probably some styling on your website that is interfering with our form styling. In cases like these, you'll typically need to add some custom CSS to your form in ConvertKit to override the conflict.
In this article, we'll provide some CSS snippets that help resolve the most common styling conflicts we encounter!
Where to add CSS to your form
The Custom CSS box is located on the form builder sidebar under 'General styles':
NOTE: Don't forget that you may need to clear any website caching plugins in between each change.
Form showing behind site content
Depending on the way your site's layout is coded, certain form templates of ours might show up behind your site content. In those cases, try the following CSS code to move it to the front (choose the correct version based on your form's template):
Modal:
:global(.formkit-modal) { z-index: 999999 !important; }
Slide-in:
:global(.formkit-slide-in) { z-index: 999999 !important; }
Sticky bar:
:global(.formkit-sticky-bar) { z-index: 999999 !important; }
If the issue still persists after that, our next recommendation is to try embedding your form's code in the footer of your site instead.
Text styling
You can target the following types of text, if present on your template, with the following CSS classes:
.formkit-header— the main header text.formkit-subheader— the subheader text beneath the main header.formkit-guarantee— the smaller disclaimer text under the form itself.formkit-submit— the text in the submit button
Here's a visual representation of where these classes are located, using our Pine form template as an example:
The CSS snippets below target the header text as an example, but you can replace the class with any of those provided above! Also, be sure to adjust the values (such as the font size, font family, etc.) as needed to your liking:
Font size
.formkit-header { font-size: 20px !important; }
Font family
.formkit-header { font-family: 'Helvetica', sans-serif !important; }
Letter spacing
.formkit-header { letter-spacing: 0px !important; }
Line height
.formkit-header { line-height: 1.35 !important; }
☝️ You can also include multiple CSS styles within one class selector.
For example, if you want to change the font size and the font family of your form's header text, you can target both like follows:
.formkit-header {
font-family: 'Helvetica', sans-serif !important;
font-size: 20px !important;
}
Still having trouble?
Our support team is limited in how much we can provide support for code conflicts outside of ConvertKit, but we will do our best to provide helpful CSS snippets and/or recommend the best next steps. For assistance beyond that, we'd recommend posting in our community!