How to Center a Form

Introduction

Do you want to center your forms on WPForms? By default, all WPForms are set to 100% width of the container they are placed in, however, you can easily add simple CSS to your site that would have the form float in the center of the WordPress page. In this tutorial, we’ll walk you through each step in order to set up your form to be centered using CSS.

Creating your form

First, you’ll need to create your form. If you need any help with this, you can always review this documentation for assistance.

Once you’ve created your form and added your fields, you’ll need to set each Field Size to Large. To set the Field Size just click the Advanced tab and select Large from the Field Size dropdown.

create your form, add your form fields and remember to set each field size to Large from the Advanced tab

Adding 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 the CSS Class name to the correct field in order to center the form

It’s important to not skip this step. Without adding the class name, the CSS applied to the site in the next step won’t be applied.

Adding the CSS to center the form

And finally, we now just need to add the CSS to our site that will center a form.

For help adding CSS to your site, please have a look at this tutorial.

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

The CSS is using a max-width of 500px for the form, this means the form will never be any wider than 500px. You can certainly play with this amount until you find the one that meets your needs.

The margin CSS rule above is standard when wanting to center any block element on a page with CSS.

That will style just the form elements only. If you’d like to style things like the submit button, labels, form title, descriptions, and the like, use this complete CSS.

/* This styles the form elements only */
.wpforms-container.wpf-center {
     margin: 0 auto !important;
     max-width: 500px;
}

/* This styles the submit button */
.wpf-center .wpforms-submit-container  {
    display: inline-block;
    text-align: center;
    width: 100% !important;
}

/* This styles all pagebreak elements */
.wpf-center .wpforms-field-pagebreak  {
    display: inline-block;
    text-align: center;
    width: 100% !important;
}

.wpf-center .wpforms-pagebreak-left .wpforms-page-button:before,.wpf-center .wpforms-pagebreak-left .wpforms-page-button:after {
	content: none;
} 

/* This styles all labels, field descriptions, form title and form description */
.wpf-center .wpforms-title, 
.wpf-center .wpforms-description,
.wpf-center .wpforms-field-label,
.wpf-center .wpforms-field-sublabel, 
.wpf-center .wpforms-field-description {
    text-align: center;
}

And that’s all you need to center 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’ve added the CSS Class name as mentioned above. Without this step completed, the CSS will not be applied.