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.
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.
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;
/* Adjust the width in the next 2 lines as your site needs */
max-width: 500px !important;
width: 500px !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.
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 titles, descriptions, and the like, use this complete CSS.
/* This styles 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 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 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;
}
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.
