How to Center a ConvertKit Form in WordPress

If you buy something through a link in our posts, we may get a small share of the sale.

One key to a successful email marketing campaign is in the visual details. While you don’t need much graphic design or coding knowledge, you still need certain skills to produce an attractive form. 

If you’re using ConvertKit for your email marketing, knowing how to center a ConvertKit form in WordPress is important to know how to do when designing various pages.

I’ve created a step-by-step guide for performing this task.

The homepage of ConvertKit

How to Center a ConvertKit Form in WordPress

Centering a ConvertKit form is necessary because it’s typically aligned to the left when you embed it in your WordPress website. 

There are a couple ways to center the form, which I’ll share below.

Method 1: Using the Embed Code

To center a ConverKkit form in WordPress, you’ll need the form’s embed code.

The embed code for your ConvertKit form can be found in the form editor in ConvertKit. To get the embed code, open the form editor and click on the “Embed” tab. The embed code will be displayed in the “Embed Code” field. You can copy the embed code and paste it into your WordPress post or page.

Here are the steps on how to get the embed code for your ConvertKit form:

  1. Go to your ConvertKit account
  2. Click on the “Forms” tab
  3. Select the form that you want to embed
  4. Click on the “Embed” tab
  5. Copy the embed code

Once you have the embed code of the form you want to center, follow these steps to center a ConvertKit form in WordPress:

  1. Copy the embed code for your form from ConvertKit
  2. Paste the embed code into your WordPress post or page
  3. Surround the embed code with <center> and </center> tags
  4. Preview your post or page to see the form centered

Here’s an example of the code you would use to center a ConvertKit form:

<center>

[ConvertKit form id=”1234567890″]

</center>

The id of your form is the unique identifier that ConvertKit assigns to each form. You can find the id of your form in the form editor in ConvertKit.

Method 2: Using Custom CSS

This method requires adding extra code to the custom CSS box to align it centrally. To perform this action, you must copy the following code and insert it into the custom CSS form: { margin: 0 auto; }

Once you do that, save the form and it will be centered. 

Here’s the step-by-step process to follow once you’re logged into ConvertKit.

  1. Navigate to your account dashboard’s “Forms” section. Once you find your form, click on it to access its settings
  2. Navigate to the “Design” tab and click to open it
A page showing the design section in WordPress
  1. Find the “Custom CSS” section and paste this code in it: { margin: 0 auto; }
A page showing the Custom CSS of the design tab in WordPress
  1. Click on “Save” to preserve your form’s design changes
  2. Embed the new code for the form by copying it from the Custom CSS section
  3. Log in to WordPress. Find and replace the old ConvertKit form code with the new one. After you click “Save,” your form should be centered

Reasons for Centering the Form

Following a few simple steps will enable you to have a more eye-catching email capture form. The visual appeal of the form improves the user experience and increases the interaction on your website. Poor user experience can be one of the reasons why your site is failing.

Having an uncentered form can detract from your potential customer’s attention and lower the marketing tool’s overall effect.

You can calculate the success (or lack thereof) of your form by analyzing the number of leads generated through it. ConvertKit allows you to collect leads and build a solid subscriber base by creating conversion-focused forms. 

Related Questions

Why Should I Center My ConvertKit Form in WordPress?

You should center your ConvertKit Form in WordPress because it helps make it more visually appealing and prominent on your website. It also increases the chances of grabbing visitors’ attention and encouraging them to sign up and take action. This could even help your local business increase traffic since it’s one of the basic site improvements you can do.

Can I Center a ConvertKit Form Without Modifying the Code?

Generally, Convertkit forms are aligned to the left by default. To center the form, it requires some code modifications or CSS styling. The process is relatively easy and can be achieved without extensive coding knowledge.

How Do I Find the Shortcode for My ConvertKit Form?

To find the shortcode for your ConvertKit form, log in to your ConvertKit account, navigate to the “Forms” section, and select the desired form. Then, you copy the provided shortcode and use it in WordPress to display the form.

Can I Center Multiple ConvertKit Forms on a Single Page?

Yes, you can center multiple forms on a single page using the same process explained in this article. Simply wrap each form’s shortcode within a separate <div> element and apply the necessary CSS styling to center-align the form.

What if My WordPress Theme Does Not Have a Custom CSS Option?

If your WordPress theme doesn’t have a custom CSS option, you can use a custom CSS plugin, such as “Simple Custom CSS and JS.”

Install and activate the plugin, and follow our instructions mentioned in the article above.

Conclusion

ConvertKit is a useful tool for content creators that are looking to generate leads from the traffic they produce. Even though the forms are initially aligned to the left, it’s pretty simple to center them.

We can set up your email newsletter for you, including adding a pop up and lead gen e-book! Learn more here!

Photo of author

Jared Bauman

Jared Bauman is the Co-Founder of 201 Creative, and is a 20+ year entrepreneur who has started and sold several companies. He is the host of the popular Niche Pursuits podcast and a contributing author to Search Engine Land.

Leave a Comment