Ria du PlessisHave you noticed that most contact forms on websites these days have labels such as “Name,” “Email,” and “Message” above the input fields? Well, with the Divi Theme, this is completely different. The Divi Theme shows the labels as placeholder text by default. I know that sometimes this is not ideal, and you want to change it. But how? Well, it is very easy to do with just a few lines of CSS code snippets. In this tutorial, I will show you how to show labels on fields in the Divi Contact form module by moving from within the field to above the fields. Ready? Let’s go!
Table of Contents
Add Custom CSS Class To Contact Form Module
To start with, add a custom CSS class to the Contact Form module. This class will be used to specifically target the module with the code and ensure that the changes only apply to this particular 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 “dm-contact-form-labels” in the CSS Class input field of the Contact Form module.
Add The Custom CSS Code Snippet
The second step is to add the custom CSS code to your website. This step is easy, you will only add a few lines of CSS code. Place this in your Divi>Theme Options>Custom CSS code box.
/*move the labels above the form input fields*/
.dm-contact-form-labels .et_pb_contact_form_label {
display: block !important;
}
/*hide the label in the field*/
.dm-contact-form-labels .et_pb_contact_field_options_title {
display: none;
}
/*make the placeholder text the same color as field background*/
.dm-contact-form-labels input::placeholder,
.dm-contact-form-labels textarea::placeholder {
color: #eee !important;
}
After adding and saving your custom code, you will see that the labels will now be showing above the form fields. The text inside the fields will also match the default background color of the fields, which you can adjust as needed.
If you want to adjust the design, just use the sample code below to get started.
/*adjust the label design as needed*/
.dm-contact-form-labels .et_pb_contact_form_label {
font-weight: bold;
color: #000000;
font-size: 20px;
}
Wrapping up
I hope you enjoyed learning how to display labels on fields in the Divi Contact Form. If you’re interested in creating your own Divi Child Theme, be sure to check out our other tutorials!
Try Divi Areas Pro today
Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.
Click here for more details
More Articles You Will Like
