How to Center a Form

Overview

Do want to center a form in WPForms? Centering items on a webpage can be complex, and often requires modifying CSS added by the WordPress theme. In this tutorial, we’ll cover the basics of centering a form to help you get started.

By default, all WPForms are 100% width of the container they are placed in.

Setup

If you’d like to center the form you can follow each of the three steps outlined below.

1) Add the CSS Class

In the form builder, you’ll need to go to Settings ยป General. In the field labeled Form CSS Class, add wpf-center.

Add CSS class for centering form

2) Add the CSS code

.wpforms-container.wpf-center {
     margin: 0 auto !important;
     max-width: 500px;
}

After adding this CSS to your site, you may need to increase or decrease the max-width value to fit your needs or you can just remove this all together if it’s not needed.

3) Set Field Width

The previous two steps will center the form container however some form fields may not yet appear centered. Next, you’ll need to set the form fields to take up the full width of the form container.

To do this, open the form builder and click the field to open its Field Options panel. Under Advanced Options, you’ll need to set the Field Size to Large. This will need to be repeated until all fields are full width.

Field Size options in WPForms

You could also consider setting up a multi-column layout in your form.

And that’s all you need! You’ve now centered your form. Would you like to be able to change the submit button color on your forms? Take a look at our article on How to Change the Submit Button Color.

FAQ

Q: Why is the CSS not working for me?

A: Please make sure you follow the instruction in Step 1. Without the class name, the CSS won’t be applied.

Q: How can I center the form title and description?

A: When the CSS is added to your site and the CSS class name is added to your form, your form title and description are automatically centered by default.