How To Move The Contact Form Field Labels To The Left Side Tutorial by Pee Aye Creative

How To Move The Contact Form Field Labels To The Left Side

In this tutorial I will show you how to move the Divi Contact Form field labels to the left side instead of the top.

FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!

Divi Contact Form Helper by Pee Aye Creative

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Follow The Previous Tutorial About Showing The Form Fields

The first step in the tutorial is to first complete our previous tutorial. This is required in order to actually show the labels on the fields before we can move them. Just head over the tutorial about showing the field labels and follow the steps, then meet us back here for step #2.

How To Show Labels On Form Fields In The Divi Contact Form Tutorial by Pee Aye Creative

2. Make The Fields Fullwidth

The second step in the tutorial is to make sure all the fields in your form are set to fullwidth. This is necessary to achieve the desired layout. To do this, simply open the Contact Form module settings and then open each of the individual fields. In the Design tab, open the Layout toggle and be sure to enable the Make Fullwidth setting.

make the Divi contact form fields fullwidth for labels on left side

3. Add A Custom CSS Class To The Divi Contact Form

The third step in the tutorial is to add a custom CSS class to the Contact Form module. This is used to target the correct module with the code in order to only move the labels on this specific contact form module. 

To add the custom class, open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-contact-form-labels-left” in the CSS Class input field of the Contact Form module. Since this tutorial is basically an addon to the previous tutorial, you will now have two CSS classes in the module separated by one space.

add CSS class for moving the Divi contact form labels to the left side

4. Add The Custom CSS Code Snippet

The second step is to add the custom CSS code to your website. This step is also very easy, and we are doing the work with only a few lines of CSS.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*move the contact form field labels to the left side*/
@media (min-width:981px) {
	.pa-contact-form-labels-left p.et_pb_contact_field {
		display: flex;
		align-items: start;
		justify-content: flex-end;
		gap: 2%;
	}

	.pa-contact-form-labels-left p input,
	.pa-contact-form-labels-left p textarea,
	.pa-contact-form-labels-left .et_pb_contact_select {
		width: 80%;
	}
}

After adding and saving the code, your form fields would look like this:

after screenshot of the Divi contact form labels after they are moved to the left side

The code is very simple. It targets the custom class added to the module and changes the display property of the label element. It aligns the text to the left, and sets a width of the fields to 80% so that the labels have room on the left side. You can customize this value to whatever works best based on the length of your label text.

Do It With A Setting!

Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!

Divi Contact Form Helper by Pee Aye Creative

The Divi Contact Form Helper plugin has settings built in to show the labels on the frontend, customize the label text, and move the labels to the left side. Using the plugin is super easy and works just like other Divi modules.

field show label on frontend text settings in the Divi Contact Form Helper plugin
show label on left side and width setting in the Divi Contact Form Helper plugin

To learn about how to use these settings, please check our documentation.

Last updated Apr 28, 2023 @ 5:37 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart