1. Home
  2. Tutorials
  3. How to center a form

How to center a form

Heads up!

This article contains CSS code and is intended for developers. We offer this code as a courtesy, but don't provide support for code customizations or 3rd party development.

For extra guidance, please see WPBeginner's tutorial on adding custom CSS.

Dismiss

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.

1) Add CSS class to form

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 CSS snippet to your site

.wpf-center {
     margin-left: auto !important;
     margin-right: 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.

3) Make form fields full 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.

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

4) Optional: Add CSS to center form title text and submit button

If you’d also like to center the form’s title and submit button within the form container, you can use the CSS snippet below:

.wpf-center .wpforms-head-container, 
.wpf-center .wpforms-submit-container {
     text-align: center; 
}
Updated on May 30, 2018

Was this article helpful?