Blair Wadman
Blair Wadman 6 minute read
April 8, 2020

How to change the size of a ConvertKit form box

ConvertKit comes with some control over the presentation of forms, but it isn’t obvious how you can change the size of the form box. In this article, I’ll walk you through how you can change the form size and position on your web pages.

The first step is to go to the form itself. After you click on a form in your ConvertKit account, you should see the Styles settings on the right hand side.

ConvertKit CSS field

In the settings panel, you can easily do things like change the:

If you click on the form, the settings on the right hand side will change and you can alter things like:

But you can’t directly change the width of the form. To do that, you need to add a small piece of code, called CSS. CSS stands for Cascading Style Sheets and is the language that controls how websites and web pages look in browsers. ConvertKit landing pages and forms have built in CSS. You can also override this with your own CSS. You’ll find a CSS field in both landing pages and forms.

Adding custom CSS

To get to the field where you can add your own custom CSS, click on the wand icon on the top right corner to go back to the Styles settings. At the bottom of that panel, you will see the Custom CSS field. This is where you can add a little bit of code to control the size of the form box. But don’t worry, it isn’t too scary!

ConvertKit CSS field

Let’s get into it with some examples.

Note: If you don’t have time to do this yourself, or want to make even bigger changes (such as making the forms match the branding of your site), I offer a consulting service where I’ll do this for you. (link)

Example 1: change the width

We’ll start off with setting the form to a fixed with. Let’s say you want to set the width of your form to 500px. To do that, add the following code to the Custom CSS field.

width: 500px;

Width is a CSS property. It is used to define the width of an element such as a form. 500px means 500 pixels. A pixel is a unit of measure for computer screens.

If the form looks too wide at 500px, try reducing the number until you are happy with the width.

Pro tip: if you have CSS experience

If you’ve done CSS before, you might be wondering where the selector (such as the CSS class) is. You’d normally need a selector to target the element to style. ConvertKit forms have a class called formkit-form. Typically when you write CSS, you’d include the selector and the code to set the width of a form would look like this:

.formkit-form {
  width: 500px;
}

But in ConvertKit, you don’t need to include the selector for the form itself. ConvertKit will automatically apply the CSS to the form.

However, if you want to style anything else, like the form header, an image, or a button, you’ll still need to include the selector.

Example 2: use a percentage

One of the problems with setting a fixed width is that it can break if readers reduce the size of their browser window. A way around that is to use a percentage rather than fixed width:

width: 80%;

This will make the form 80% of the container width. If the form is positioned below a blog post, it will be 80% of the width of the post. If the form is in a sidebar, it will be 80% of the width of the sidebar.

Example 3: use a max width

Using a percentage as described above will work on fine on a desktop screen. However, it may actually be too small on a mobile device. 80% might make total sense on a desktop, but it can look very odd on a smaller mobile screen. In most cases, you actually want it to be 100% on mobile.

There are two ways to deal with this. You can set a different width on mobile than you do on desktop. Or you can use a maximum width that will only kick in on desktop instead. Let’s take a look at both options.

Different width on mobile

To set a different width on mobile, you’ll need to use a CSS rule called a media query. This allows you to target specific browser widths and apply CSS only when those widths kicks in.

If you only want to reduce the size of the form on screens bigger than a mobile, you can set a minimum width in the media query. This means that the CSS will only get applied for screen sizes bigger than this.

@media only screen and (min-width: 400px) {
  width: 80%;
}

In this example, the form will be set to 80% if the screen is wider than 400px. If it is less than that (a mobile screen), then it won’t affect it all, and the form will be the default 100% wide.

Maximum width

To set a maximum width, you just need to change the width property in example 1 to be max-width instead:

max-width: 500px;

The width will be set to 500px on desktop, so long as the column the form sits in is bigger than this. But if the column is smaller than 500px, then this value will be ignored and the form will be at full width. Which is exactly what we want on smaller screens.

Example 4: centre the form

If you use the above code to reduce width of the form, it will be aligned to the left of your content area and there will be a gap on the right. It will normally look a lot better if you centre the form, with an equal distance to the left and right side. All it takes it one more line of CSS.

The following CSS will set the form’s width to 500px and centre it.

width: 500px;
margin: 0 auto;

The margin property has a value of 0 auto. The auto part horizontally centres the form. The 0 part sets the margin on the top and bottom to 0 pixels. In other words, it has no top or bottom margin at all.

If you are using max-width instead, then the CSS code is:

max-width: 500px;
margin: 0 auto;

Wrapping up

ConvertKit allows you some control over how forms look with the built in styling options. If you want to take this up a level with total control over how your forms look, adding a small amount of CSS will do it.

If you don’t have time to do this yourself, or want to make even bigger changes (such as making the forms match the branding of your site), I offer a consulting service where I’ll do this for you. Find at more about this service here.