Code by Day | Explore By Weekend

Divi Code Snippet Club by Pee-Aye Creative

How To Move Labels Above Input Fields In The Divi Contact Form

This code snippet from the Divi Code Snippet Club will allow you to add or move labels above each field in the Divi Contact Form.

Most contact forms have the labels, such as “name,” “email,” and “message,” above the input fields. In Divi, there are actually two labels, but the ones above the fields are hidden by default. This CSS snippet turns on the labels above the Divi Contact Form Module input fields. You can hide the other set of labels inside the design settings with transparent text.

BEFORE

move the Divi contact form labels above the form fields before

AFTER

move the Divi contact form labels above the form fields after

Copy and paste this code snippet into the Divi>Theme Options>Custom CSS box. To learn more about where to add code in Divi, check out our full guider: Where To Add Custom Code In Divi

/*add labels above the form input fields*/
.et_pb_contact_form label.et_pb_contact_form_label {
display: block !important;
  font-weight: bold;
}
/*hide the extra label*/
.et_pb_contact_form .et_pb_contact_field_options_wrapper .et_pb_contact_field_options_title {
    display: none;
}
/*make placehold text same color as field background*/
.et_pb_contact_form ::-webkit-input-placeholder {
color: #eee !important;
}
.et_pb_contact_form.my_contact :-moz-placeholder {
color: #eee !important;
}
.et_pb_contact_form ::-moz-placeholder {
color: #eee !important;
}
.et_pb_contact_form :-ms-input-placeholder {
color: #eee !important;
}

Now your labels will be above the Divi contact form input fields!

Be sure to adjust the text color of the fields to match, or set them to transparent. You can customize this however you want, but this will certainly get you started moving the labels above the Divi contact form fields!

33
Last updated Jan 3, 2021 @ 1:26 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
46 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
janet
janet
1 year ago

this works except for the dropdown option where it show above and inside the input box. Any ideas?

Billy Smith
Billy Smith

Please give me your code snippet for this case.

Simon
Simon

Try it yourself. When you create a dropdown menu it shows the label above the field and inside the field. Did you not test it? Any way to tweak that? Many thanks.

Deborah L Yeaple (Snapeval.com)
1 year ago

Worked perfectly! Thank you!

juan
juan
11 months ago

How do you change the color of the font for label above input fields. Tried doing it through the divi builder but does not change anything.

makin
makin
11 months ago

Hi ,

Can you share How the label text on the left side of the fiels?
Thanks for the help.

Martin M
9 months ago

Works, but it also adds a label over the email module email field, which I’d like to avoid. Any way to deal with this?

sofie
9 months ago

Hey there! great and simple tutorial. However i only need it on 2 columns/fields in my contactform. How do i do that? its a form to a hotel website so i only need headers for check in and check out ( if it makes sense )

quinndagreer
quinndagreer

Hey. I am trying to do the same thing. Simply want the message section to appear above the border box I made.

I also want to be able to use whichever font I want. Is that possible?

Do you have any CSS I could use?

Thanks.

Katrina Dollano
8 months ago

Hi there! I am relatively new to DIVI. I’m trying to add labels to my contact us forms but when I copy and paste your snippet into the custom CSS field in DIVI I get these messages:

/*add labels above the form input fields*/
.et_pb_contact_form label.et_pb_contact_form_label {
Expected BRACE
display: block !important;
font-weight: bold
} Unexpected token ‘}’

I’m not exactly sure what part of the snippet above I should be copying and pasting and where specifically to do that. I’d like to have labels above all my fields and still have text in the fields as examples.

Thank you!

Melissa de Klerk
Melissa de Klerk
8 months ago

Hi there
I’m really struggling to do this. I’ve read through all the comments, and I’ve also read the “Where To Add Custom Code In Divi” blog post.

But I’m still not sure where to paste the code snippet in my contact form module to move the title labels above the fields.

I’ve added the custom CSS to the Divi>Theme Options>Custom CSS box and saved it.

So that part is done, but I keep getting the same problem as Katrina in the last comment.

What would you suggest?

Kind regards
Melissa

Melissa de Klerk
Melissa de Klerk

Hi there My concern is that I don’t know where to put this code. In the advanced tab, there’s the list of empty fields, and I’m really not sure which one to enter the code in. I inserted something into the “form fields” box, but it made literally my entire form disappear, but the module was still there, and I needed to go into wireframe view to see the form module again to remove the code. And I kept getting the “expected brace, unexpected token” errors. I currently have the labels above the fields as well as in the fields,… Read more »

Melissa de Klerk
Melissa de Klerk

Hello
I’ve indeed read that blog post and taken note of the different locations for the code. As mentioned in a previous comment, I have indeed put the CSS snippets in Divi>Theme Options.

However my problem still persists.

Not to worry, it’s not the end of the world.
Thank you for your time to respond to my comments.
Warm wishes
Melissa

amin
amin
7 months ago

Works like magic! The only thing I need is to show text when typed inside the input field, right now it transparent I can’t see what I’m typing. is there anything I could do to fix that?

amin
amin

I did and it works perfectly, Thank you so much Nelson 🙂

Emily Bryant
Emily Bryant
Reply to  amin
7 months ago

I have the same issue but my field background is also transparent which seems to be making it tricky

Simon
6 months ago

Hey Nelson, this is looking great for my form, and all the focus text on my fields are set to black, but on all the drop down fields, when I click to the next form field the text disappears. I can’t seem to get this to stay as black. Any ideas? Let me know, and I’ll share the page.

Muneeb
Muneeb
6 months ago

Thank you so much!

René
5 months ago

i got the exact same thing as Janet, i.e.

this works except for the dropdown option where it show above and inside the input box. Any ideas?

jbusby825
5 months ago

i plugged the code into the DIVI-Theme Options-Custom CSS, but it is not working at all. i’m not sure what i am missing. i did change the eee to 000 to have it show up in black for now, but it is still showing inside the field instead of on top…

the page is https://calteacherscu.com/2020-strategic-planning-questionnaire

Last edited 5 months ago by jbusby825
Jesse Busby
Jesse Busby

How would I find this “crazy code” as I do not have any other custom css except for this code?

Jeremy
Jeremy
5 months ago

Thanks so much for the code! I’ve modified it slightly to display the proper font for the label now, but for some reason the “Make placehold text the same color as field background” selectors don’t seem to be changing my placeholder text at all. I’ve tried changing the color to black or just doing display:none; but it doesn’t seem to work. Specifically when looking at the form on this page: https://lpwcreative.co/services/ <style> /*add labels above the form input fields*/ .et_pb_contact_form label.et_pb_contact_form_label { display: block !important;   font-weight: bold; font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif; } /*hide the extra label*/ .et_pb_contact_form .et_pb_contact_field_options_wrapper .et_pb_contact_field_options_title {  … Read more »

Nicol Bergou
Nicol Bergou
3 months ago

Thank you for this. Do you happen to have a similar thing but for the Email Optin module please?

Thomas
2 months ago

Thank You so much Nelson, exactly what I needed.
May I ask your for the CSS code to delete the label “Wochenmarkt” inside the dropdown field? Thank you in advance

Thomas

I tried your suggestion – it doesn’t work ; (
But thank you for your answer!!!

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart