The Divi Touch Shape Module makes it easy for website online visitors to get in touch with you and so that you could acquire wisdom from your visitors.

By means of default, the Divi Contact Form Module field labels are displayed inside the input fields. However, every so often, you could want to display the labels above the contact form fields. In this tutorial, we’ll show you simple strategies to take action with somewhat little little bit of CSS.

What We’ll Accomplish

Our serve as in recent years is to go from this:

To this:

Let’s get to artwork!

Simple learn how to Add Labels Above the Fields in Divi’s Contact Form Module

For this demonstration, we will use the Contact internet web page design from the Loose Whiskey Distillery Format Pack. If you happen to occur to’re unfamiliar with simple learn how to load premade construction packs, check out this blog post: Easy methods to Use a Premade Format Pack on Your Divi Website online.

There are two techniques we will be able to input custom designed CSS to your Divi website online: by means of the Theme Customizer, which is in a position to have an effect on all contact paperwork all the way through your website online, or in step with internet web page inside the internet web page’s settings which is in a position to have an effect on particular person contact paperwork. First, we’ll check out the per-page approach, and then I’ll show you simple learn how to add the CSS globally.

Navigate to Your Internet web page

First, navigate to your contact form internet web page and allow the Visual Builder.

Building up the Divi toolbar at the bottom of the internet web page and click on at the equipment icon to hold up the internet web page’s settings. Then navigate to Advanced > Custom designed CSS and replica and paste the CSS code.

That’s the CSS code you’ll have to copy and paste into the Custom designed 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 copy titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}

Proper right here’s what we got previously. You’ll understand that our font styling doesn’t lift over, and there’s now a duplicate identify above the dropdown field.

In an effort to restore that, we’ll add some font styling CSS to the code and a few additional strains of code to remove the copy identify above the dropdown field.

Proper right here’s the up to the moment final 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 copy titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}


/* Remove identify above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    display: none;
}

And that is the full end result!

Doing This Globally

Together with the code globally will have an effect on all contact paperwork to your website online. If you wish to have the changes to make use of to a specific contact form most simple, you’ll need to add a CSS ID to the module inside the difficult tab. After doing so, place the “#” + your CSS ID in front of each CSS class you’re occupied with inside the code.

There are 3 places you’ll be capable of add the CSS code to take have an effect on globally. On your child theme’s style.css stylesheet:

Or the Custom designed CSS block in Divi > Theme Possible choices:

Or to the Theme Customizer:

And that’s it!

Additional Property

There are so many techniques you’ll be capable of style the contact form module to make it all your private. Check out the ones other tutorials on the contact form to get started!

• 5 Distinctive Techniques to Taste Divi’s Touch Shape Module
• Easy methods to Disclose an Choices Dropdown After Checking a Field in Your Divi Touch Shape
• Easy methods to Upload a Sticky Touch Shape to Your Web page

The post Easy methods to Upload Labels Above the Fields in Divi’s Touch Shape Module appeared first on Chic Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more