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
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!
this works except for the dropdown option where it show above and inside the input box. Any ideas?
Hi Janet, can you share a link? Also, let me know which label you want to show and I can hide the other with CSS.
Please give me your code snippet for this case.
Hi Billy,
As I said before, I would need a link and context as to what you need.
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.
To answer your question, no I did have time to create a test. If the link would be provided as I asked before, the real answer may already be given 🙂
Worked perfectly! Thank you!
Awesome Deborah, you are welcome!
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.
Hi Juan,
Try adding your color here:
/*add labels above the form input fields*/
label.et_pb_contact_form_label {
display: block !important;
font-weight: bold
color: red;
}
Hi ,
Can you share How the label text on the left side of the fiels?
Thanks for the help.
Hi there, could you explain that again and maybe share an example of what you want to achieve?
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?
Hi Martin,
Sure, just add .et_pb_contact_form before all the CSS selectors in the snippet and that will limit it to the Contact Form.
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 )
Hi Sofie,
You can target individual fields. I can try it for you, but I’d have to have a link and know which ones you want to show. Let me know!
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.
I don’t know what you mean by a border box. Do you have a link? And yes you can set the font in the module.
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!
Hi Katrina, it sounds like you are just pasting it at the wrong place. You should place it in Divi>Theme Options>Custom CSS. Here’s a post that might help: https://www.peeayecreative.com/where-to-add-custom-code-in-divi-css-javascript-php/
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
Hi Melissa,
It looks like there was a semicolon missing after the “font-weight: bold” so just add that and it should be good!
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 »
Hi Melissa,
You can almost always put any CSS snippets like this in Divi>Theme Options. You can learn more about where to add code to Divi in this post: https://www.peeayecreative.com/where-to-add-custom-code-in-divi-css-javascript-php/
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
If you share the link I might be able to see what the issue is.
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?
Hi Amin,
You can change the input color by changing the #eee to anything you want. Does that help?
I did and it works perfectly, Thank you so much Nelson 🙂
I have the same issue but my field background is also transparent which seems to be making it tricky
Hi Emily,
See my comment to Amin, that should work!
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.
Hi Simon,
Yes, share the page. Are if you can explain it a little more too that would be great. I wasn’t sure if you meant the select field dropdown color, or what. Or maybe it would be obvious when I see it!
Thank you so much!
You’re welcome!
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?
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
Hey there,
I tried it on my site and it works great. I see all kinds of crazy code on your site that is conflicting, so that would be the issue.
How would I find this “crazy code” as I do not have any other custom css except for this code?
It looks like the link is broken now.
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 »
Thank you for this. Do you happen to have a similar thing but for the Email Optin module please?
Hi Nicol, no because the Divi Email Optin module does not have any hidden labels and the input fields are the placeholders, so it’s impossible.
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
Dropdowns are very difficult to style, I would suggest maybe making a blank or dummy option as the first one.
I tried your suggestion – it doesn’t work ; (
But thank you for your answer!!!
Thank you for this – I would like to implement this on the DIVI optin form – please can you assist with the code.
Sure, what fields do you have already? Can you share the link?
Hi Lee, works great! However I have some sort of struggle with the dropdown options: I have a form created here https://bajuna.de/generator-impressum/ and the label above the droptdown box is exactly the same as the first choice. Is it possible to un-double it?
Not that I know, it is very difficult to hack dropdowns but you may be able to hide the label by using more specific CSS to just that dropdown.
Same issue bro. The placeholder for dropdown is still visible.
I don’t see the link?
Hi! How can I turn on the labels above the field only in one contact form, not in all the forms of the site? Maybe some css code for this module? Thank you very much?
Hi Maria
Sure, you can always do that with any code by using a custom CSS. By default the CSS is targeting the contact form, but if you only want it to target one just add a custom class before each selector in the code and in the module.
I have the same question, but no idea what your answer means, could you explain it like I’m five? Please and thanks!
Please go to the Contact Form Settings > Advanced > CSS ID & Classes and provide a custom class to the module so our code only affects this contact form and not all of them. For example, the custom class is pa-contact-form
After that go to the WordPress Dashboard > Divi > Theme Options > General > Custom CSS Panel and paste the code given below:
.pa-contact-form label{
display: block;
}
This will display the label for that only form.