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

Nelson Miller Pee Aye Creative
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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

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. Required fields are marked *

Recent Posts

0

Your Cart