Elementor Center Forms Easily & Quickly

No extra plug-ins required! Elementor Pro Required.

Since we already know about the advantages a contact form brings, let’s move on to the step-by-step tutorial explaining how to center and edit it. To achieve a centered form with Elementor, follow these simple steps.

Example of an Elementor centered form. Its Name field, Email field, labels and placeholders are all centered.

Centering the Form Element with Elementor

Here is how to center the form Elementor itself. For centering only the labels and placeholders, see further below!

Important: This shows how to center the form element if nothing is needed on its left or right. In that case, you could simply use a 3 column section, and place the form element in the center column.

Even if you use a three column section to center your form, the instructions below will still show you how to center the labels and placeholders. Just skip to this step.

To begin with, create the form element and go to Advanced > Positioning > Width

Give it a custom width of your liking, according to the design you want. You will want to adjust for tablet, and probably remove this completely for mobile.

Elementor Center Forms Easily & Quickly
Give the form a custom width... for consistent result use PX
Elementor Center Forms Easily & Quickly
Adjust custom width for different devices

Now, go to the column settings, and set horizontal align to 'Center'

Elementor Center Forms Easily & Quickly
Click here to access the column settings

Set the column that contains the form to Horizontal Align : Center.

Elementor Center Forms Easily & Quickly
set horizontal align to 'center'

Finally, to also center the label and placeholders, simply add this CSS to your page

Important: give the form the class name of 'labelcentered', as shown here

Elementor Center Forms Easily & Quickly
Give the form the class name 'labelcentered'

You can add the custom CSS to the page settings > Advanced > Custom CSS . Page settings are at the lower left gear icon.

.labelcentered label.elementor-field-label{
margin: auto;
}
.labelcentered .elementor-field{
text-align: center;
}

.labelcentered label.elementor-field-label{
margin: auto;
}

.labelcentered .elementor-field{
text-align: center;
}

Elementor Center the Form Fields

If you want to specifically center the Elementor Pro form fields, follow the steps above, and then add the CSS provided below.

Example with Name and Email being set to 75% width :

Simply add the following CSS to center the form fields also!

Be certain you have added the CSS class as shown above.

Note that in the field settings, width will need to be set to something other than 100% for this to work!

.labelcentered .elementor-field-group {
margin: auto;
}

Et voila! Thanks for reading!
Let me know if you need help!

Tagged