“The Divi Contact Form Module serves as a convenient and user-friendly tool, allowing visitors to easily get in touch while providing you with valuable information. By default, the module displays field labels within the input fields, but if you prefer a customized design with labels positioned above the form fields, you can achieve this effortlessly through the implementation of CSS.
Our goal is to transition from the default layout:
[Default Layout Image]
To the customized design:
[Customized Design Image]
To make this transformation, follow the step-by-step guide below:
1. **Enable Visual Builder:**
Go to the page containing the contact form and enable the Visual Builder.
2. **Access Page Settings:**
Expand the Divi toolbar at the bottom and click the gear icon to access page settings.
3. **Insert Custom CSS:**
Navigate to Advanced > Custom CSS and insert the following CSS code:
“`css
/* Display labels above form fields */
.et_pb_contact_form_label {
display: block;
color: transparent;
display: none;
}
“`
4. **Add Font Styling and Adjustments:**
Paste the CSS code into the Custom CSS box. To ensure proper font styling and eliminate duplicate titles above dropdown fields, add the following lines:
“`css
/* Additional styling for font and dropdown field title */
.et_pb_contact_form_dropdown .et_pb_contact_form_label {
display: block;
font-family: ‘Playfair Display’;
color: #E7E2BC;
font-size: 15pt;
font-style: italic;
margin-bottom: 15px;
}
“`
By following these steps, you will successfully achieve the desired result of having labels above the form fields.
**For Global Application:**
To apply this design across all contact forms on your website, incorporate the CSS code in one of the following locations:
1. Your child theme’s style.css stylesheet.
2. The Custom CSS block in Divi > Theme Options.
3. The Theme Customizer.
Congratulations! You have now mastered the technique to position labels above fields in Divi’s Contact Form Module. For further guidance and resources on styling the contact form module, explore our collection of tutorials.”
