How To Center A Form In Elementor

Learn How To Center Titles and Placeholder Text In Forms
How To Center A Form In Elementor

Adding a contact form is vital for any online business. It is crucial that your customers have an easy and effective way to contact you. But if you have used the form widget before you, know that you cannot center the title and placeholder text in the form. With a little bit of creativity and a little bit of code you can edit your forms to match the vision you’ve always had for your site. In this tutorial, you will learn how to center a form in Elementor. Let’s get started!

What You Will Need:

1. Create Element

Open the Elementor editor on your contact page. Then add a new section to the page. Once you have your new section created, click and drag the forms widget into your newly created section. With the forms widget still selected, navigate to Advanced -> Positioning -> Width. Give the element a custom width of your liking. The units available for setting your width are PX, % or VW. For this example, I will give the form a width of 500px.

 

Give the form a custom width in px

 

Make sure to adjust the width of your form for tablet and mobile view

2. Adjust Column Settings

Select the column that your form is in. This icon is located in the upper left hand corner of the column.

 

Under the Layout tab of your selected column, find the Horizontal Align dropdown and set it to Center

3. Center Label & Placeholder Text

Select your form and give it the CSS Class Name of “centeredlabel”

 

Now it is time to add this CSS code below to the Custom CSS section of the page:

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

 

To get to the Custom CSS for the page, click the gear icon in the lower left-hand corner of the Elementor editor. Then click Advanced and paste the code in the CSS section.

 

center a form in elementor

And as you can see, you now can center a form in Elementor. Make sure to play around with the styling to give this form your own personal touch.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Chris Erbstoesser
Chris Erbstoesser
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents