The Divi Contact Form Module makes it simple for web site guests to get involved with you and so that you can acquire knowledge out of your guests.

By way of default, the Divi Touch Shape Module box labels are displayed within the enter fields. Then again, infrequently, you could need to show the labels above the touch shape fields. On this instructional, we’ll display you the best way to do so with a little bit little bit of CSS.

What We’ll Accomplish

Our objective lately is to head from this:

To this:

Let’s get to paintings!

The right way to Upload Labels Above the Fields in Divi’s Touch Shape Module

For this demonstration, we will be able to use the Touch web page design from the Free Whiskey Distillery Layout Pack. If you happen to’re unfamiliar with the best way to load premade structure packs, take a look at this weblog put up: How to Use a Premade Layout Pack on Your Divi Website.

There are two techniques we will be able to enter customized CSS for your Divi web site: by way of the Theme Customizer, which can have an effect on all touch paperwork throughout your web site, or according to web page within the web page’s settings which can have an effect on particular person touch paperwork. First, we’ll check out the per-page manner, after which I’ll display you the best way to upload the CSS globally.

Navigate to Your Web page

First, navigate on your touch shape web page and permit the Visible Builder.

Extend the Divi toolbar on the backside of the web page and click on the tools icon to deliver up the web page’s settings. Then navigate to Complex > Customized CSS and replica and paste the CSS code.

That is the CSS code you’ll have to replicate and paste into the Customized CSS field:

/* Presentations titles above the fields */
.et_pb_contact_form_label {
    show: block;
}

/* Hides placeholder textual content */
.et_pb_contact_form_container .enter::placeholder {
    colour: clear;
}

/* Hides reproduction titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    show: none;
}

Right here’s what we were given thus far. You’ll understand that our font styling doesn’t raise over, and there’s now a reproduction name above the dropdown box.

So as to repair that, we’ll upload some font styling CSS to the code and a couple of extra strains of code to take away the reproduction name above the dropdown box.

Right here’s the up to date ultimate code:

/* Presentations titles above the fields */
.et_pb_contact_form_label {
    show: block;
    font-family: 'Playfair Show';
    colour: #E7E2BC;
    font-size: 15pt;
    font-style: italic;
    margin-bottom: 15px;
}

/* Hides placeholder textual content */
.et_pb_contact_form_container .enter::placeholder {
    colour: clear;
}

/* Hides reproduction titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    show: none;
}


/* Take away name above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    show: none;
}

And this is the general outcome!

Doing This Globally

Including the code globally will have an effect on all touch paperwork for your web site. If you wish to have the adjustments to use to a particular touch shape best, you’ll wish to upload a CSS ID to the module within the complicated tab. After doing so, position the “#” + your CSS ID in entrance of each CSS elegance you’re focused on within the code.

There are 3 puts you’ll upload the CSS code to take impact globally. In your kid theme’s genre.css stylesheet:

Or the Customized CSS block in Divi > Theme Choices:

Or to the Theme Customizer:

And that’s it!

Extra Assets

There are such a large amount of techniques you’ll genre the touch shape module to make it your whole personal. Take a look at those different tutorials at the touch shape to get began!

• 5 Unique Ways to Style Divi’s Contact Form Module
• How to Reveal an Options Dropdown After Checking a Box in Your Divi Contact Form
• How to Add a Sticky Contact Form to Your Page

The put up How to Add Labels Above the Fields in Divi’s Contact Form Module seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more