The dreaded blue button.

The ‘powered by ConvertKit’ text.

The uncentered text and image!

*falls to the ground and throws hands into the sky* The horror!!!

Just kidding.

Our friends over at ConvertKit know that we’re picky with how we present stuff on our websites — which is precisely why they have a place for us to input some custom CSS into our forms. CSS is also known as ‘cascading style sheets’ or ‘lemme fix this up quick right here’.

Let’s get started.

 

How To Customize the ConvertKit Incentive Form

*This post contains affiliate links. For more information, please read our disclaimer.

 

1. Begin by opening the middle form in ConvertKit. This is the one to use when you are offering an opt-in incentive, as you’ll be able to give a sneak peak image of your work.

2. From there, customize your text and add your image. Once uploaded, your image will probably go all crazy and spread across the entirety of your form — Just click ‘save’ to correct this.

Change Text and Photo

3. Next, click onto your style tool (the sparkly-magical-wand-looking-icon) and customize your form to match your brand’s colours. Don’t forget to hit ‘save’.

Style Colours

4. Click on the ‘settings’ tab. Fill out your information in ‘main settings’ and ‘incentive email’.

5. Select ‘style’ in the side menu. ‘Custom CSS’ is where you’ll be entering in your preferred code(s). Make sure to hit ‘save form’ and ‘view’ after you enter each code. This will allow you to keep track of any adjustments you’d like to make.

 

Bottom Border Correction

‣ By default, ConvertKit makes the bottom border of your form a darker colour than the top border. In order for them to match, simply add in your brand’s hex code where ‘COLOUR’ is written. Or if you’d like the bottom border to be a completely different colour than the top, you can add it in there as well.

‣ The box shadow code eliminates ConvertKit’s default shadow around the form. If you prefer for the shadow to remain, simply delete the line from the code.

‣ The border top width makes the top and bottom border lines the same width.

.ck_form.ck_horizontal {
border-bottom-color: #COLOUR;
box-shadow: none;
border-top-width: 10px;
}

 

Title Correction

‣ This code centers your title and makes it uppercase.

‣ If you’d like for your text to remain aligned to the left, simply delete the ‘text align’ line. And if you wouldn’t like your text to be uppercase, delete the ‘text transform’ line.

.ck_form_content h3 {
text-align: center;
text-transform: uppercase;
}

 

Secondary Title Correction

‣ Add this code to make the ‘name’ and ’email address’ labels uppercase.

.ck_label {
text-transform: uppercase;
}

 

Body Text Correction

‣ Add this code to center your body text. (The body text is the text where the description and/or additional information is.)

.ck_form_content p {
clear: both;
text-align: center;
}

 

IMAGE CORRECTION

‣ This code will center your image.

.ck_image {
text-align: center;
width: 100%;
}

 

Subscribe Button Correction

‣ This makes your subscribe button present itself in bold text and in all caps.

‣ If you don’t want your subscribe button’s text to be heavy, delete the ‘font weight’ line. And if you don’t want your text to be uppercase, delete the ‘text transform’ line.

.ck_form .ck_subscribe_button {
font-weight: bold;
text-transform: uppercase;
}

 

Remove ‘Powered by ConvertKit’ text

‣ By default, ConvertKit includes their ‘powered by ConvertKit’ advertisement. This CSS will remove that text from your form.

.ck_form .ck_guarantee {
display: none;
}

 
 

Before using custom CSS

Before Customization

and After using custom CSS

Completed Form

 

What a difference! Now all you have to do is embed it into your website and you’re all set up and good to go. 🙂