The Divi contact form shows its field labels inside the empty input boxes. Use this CSS to show them above the boxes instead

This is from: https://www.peeayecreative.com/how-to-move-labels-above-input-fields-in-the-divi-contact-form/


/*----- MOVE LABELS ABOVE THE FIELD BOXES -----*/
/*add labels above the form input fields*/
label.et_pb_contact_form_label {
display: block !important;
  font-weight: bold
}
/*hide the extra label*/
.et_pb_contact_field_options_wrapper .et_pb_contact_field_options_title {
    display: none;
}
/*make placehold text same color as field background*/
::-webkit-input-placeholder {
color: #eee !important;
}
.my_contact :-moz-placeholder {
color: #eee !important;
}
::-moz-placeholder {
color: #eee !important;
}
:-ms-input-placeholder {
color: #eee !important;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *