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.
Now, go to the column settings, and set horizontal align to 'Center'
Set the column that contains the form to Horizontal Align : 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
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!
Elementor Centered Form Template
This download gets you the following template :
Elementor Centered Form Template
Related tutorial : Elementor Centered Form
