How to Center a Form

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.

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.

Centering 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;
/* Adjust the width in the next 2 lines as your site needs */
    max-width: 500px !important;
    width: 500px !important;
}

/* Readjust the form width for smaller devices */
@media only screen and (max-width: 600px) {

	.wpforms-container.wpf-center {
	/* Reset the width for devices under 600px */
		max-width: unset !important;
		width: auto !important;
}
	
}

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.

But also note in the CSS, we are resetting the CSS back to auto on smaller devices so that anyone viewing the form on a mobile device will still see the centering but we’re letting the screen determine the width of the form.

The margin: 0 auto !important; CSS rule is standard when wanting to center any block element on a page with CSS.

Centering all the elements on the form

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

/* This centers the form elements only */
.wpforms-container.wpf-center {
    margin: 0 auto !important;
/* Adjust the width in the next 2 lines as your site needs */
    max-width: 500px !important;
    width: 500px !important;
}

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

/* This centers all pagebreak elements and makes it fullwidth */
.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 titles, and form descriptions */
.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;
}

/* Readjust the form width for smaller devices */
@media only screen and (max-width: 600px) {

	.wpforms-container.wpf-center {
	/* Reset the width for devices under 600px */
		max-width: unset !important;
		width: auto !important;
}
	
}

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 and the form will not be centered.

Q: How do I center just the Submit button?

A: By default, the CSS will also center the button as well as the fields, but if you only want to center the button only, you’ll still need to add a class name to the Form CSS Class but this time we’re going to use wpf-center-button instead of the class mentioned in the previous steps.

Next, add this CSS to your site.

/* This centers the submit button */
.wpforms-container.wpf-center .wpforms-submit-container {
text-align: center;
}

Once the CSS is added, you’ll notice that the button is now centered to the form.