How To Change Contact Form Labels Placement In Divi Form Modue

Empowering seamless communication between website visitors and you while effortlessly gathering valuable visitor information—this is where the Divi Contact Form Module excels.

By default, the Divi Contact Form Module conveniently positions field labels within the input fields. Nevertheless, there may arise instances where you prefer to showcase the labels above the contact form fields. In this comprehensive tutorial, we will demonstrate how to achieve this desired effect by employing a touch of CSS wizardry.

Design Preview

This is how our design will look like once it's done.

Add Labels Above the Fields in Divi’s Contact Form Module

Let's Utilize the Contact Page Design from the Free Whiskey Distillery Layout Pack.

To demonstrate the desired effect, we will employ the captivating Contact page design from the Free Whiskey Distillery Layout Pack. To implement custom CSS on your Divi website, we have two options: the Theme Customizer, which will impact all contact forms across your website, or the per-page method, which will modify individual contact forms. We will begin with the per-page approach and later explore the process of adding CSS globally.

Rest assured, our step-by-step instructions will be presented in clear and concise English for your convenience.

Go To the Contact Page

Go to your contact form page and turn on the Visual Builder first.

To access the page's settings, expand the Divi toolbar at the bottom of the page and click the gear symbol. The CSS code should then be copied and pasted after selecting Advanced > Custom CSS.

You must copy and paste the following CSS code into the Custom CSS box:

/* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
}
 
/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}
 
/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}

Here is what we currently have. You'll see that our font styling isn't preserved, and the title above the dropdown field has been duplicated.

As a result, to correct that, we'll add some font styling CSS to the code as well as a few extra lines to get rid of the duplicate title above the dropdown field.

Here is the revised complete code:

/* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
    font-family: 'Playfair Display';
    color: #E7E2BC;
    font-size: 15pt;
    font-style: italic;
    margin-bottom: 15px;
}
 
/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}
 
/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}
 
 
/* Remove title above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    display: none;
}

And here is the final output.

Make The Design Global

To modify the appearance of all contact forms on your website, you can opt for the global approach by adding the code. However, if you wish to customize a particular contact form exclusively, you'll need to assign a CSS ID to the module in the advanced tab. Once completed, ensure that you prefix the CSS class you intend to target with "#" followed by your CSS ID in the code. When it comes to incorporating the CSS code, you have three available options to achieve the desired global effect. You can add it to your child theme's style.css stylesheet.

Also, you can do this from the Custom CSS block on the Divi > Theme Options section.

Or from the theme customizer, wherever you like.

There you go! You have changed the label field on the Divi contact module.

Wrapping Up

In conclusion, changing the placement of contact form labels from inside the input fields to the top can have a profound impact on visitors. This simple adjustment not only impresses users but also enhances the overall beauty and visual appeal of your website. With Divi's built-in contact form module, achieving this desired label placement is effortless and accessible.

Divi, as a renowned web development platform, consistently follows the latest trends and features in the industry. By embracing cutting-edge functionalities like customizable label placements, Divi empowers the web development community to create engaging and visually stunning websites. So, seize the opportunity to captivate your visitors with Divi's flexible contact form module and stay ahead of the curve in web design.