Why do Form styles look different on my website?

Hold up. Something looks different.

Sometimes, the Form you design in ConvertKit can look a little different once it’s embedded onto your site. Let’s take a look at why that is, and then how to fix it! 

Embedded Forms become a part of your site

When you set up your website you choose a lot of styles for the content you put on the site. This includes (but isn’t limited to):

  • What fonts are used.
  • Colors for various aspects of the site.
  • The shape, size, and color of buttons.

When you embed a ConvertKit Form, the Form becomes a part of your page and the CSS file that controls your website styles can sometimes override what you’ve set up in ConvertKit.

Ooooooh. 

So then what? 

How do I keep the styles I chose in ConvertKit?

The best long term solution to styling conflicts on your site is to consult a web designer that can edit the CSS of your site, and remove any styles that you don’t want.

For a short term solution, refer to our custom CSS guide. You can style specific elements of your Form using custom CSS.  Use !important to override your website styles, like this:

.formkit-header { font-size: 40px !important; }

FAQ

Where do I put custom CSS styles for my Form?

Each Form in your account has a custom CSS box located in the style section of the Form Settings. 

Learn more about form style settings →

How do I center a Form on my page?

Many website builders have the option to center content, which should center the Form as well. If that doesn’t work, add the following CSS to your Form:

{ margin: 0 auto; }

I’ve tried adding custom CSS and nothing changes. What now?

If you’re stuck, reach out to our team! If there’s a major problem with a Form, we definitely want to know about it and will be happy to diagnose the problem with you.

Still need help? Contact Us Contact Us