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!

This download gets you the following template :

Elementor Centered Form Template

Related tutorial : Elementor Centered Form

Name your price $

Tagged

23 Responses

  2. Hi there! Wondering if you also know how to center the text on the Elementor 'Select' Form Field, which is a drop down menu? I've added the code, which worked for the First Name and Email Address fields, but did not work for the drop down menu. Thank you!

    2. Amélie Normand This, unfortunately, doesn't work to align the items in the menu, nor does it work on Chrome.

      To align the selected option in the center, on Chrome and Firefox, use this CSS

      .labelcentered select {
      text-align: center;
      text-align-last: center;
      }

      Edge and Safari might support this also. That will only center the selected option, and not the items in the options menu ... for these, there is no simple way yet to center them.

Leave a Reply