How to change Contact Form 7 Placeholder Style

Contact form 7 is one of the most used WordPress plugins nowadays for building simple or complex contact forms on your WordPress website.

Here is some custom code you can use to change text color or upper case in cf7 forms.

You can add the bellow CSS code into the Appearance > Customize > Additional CSS

Change CF7 Placeholder text color

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

Extra tip: The !important tag is used in case another style is applied to these CSS selectors. This makes sure that the style will work.

Change CF7 Placeholder text-transform (Uppercase)

::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none !important;
}

You can also add additional style on per element base by adding the class or id tags before the placeholder in cf7 elements:

[email* your-email id:your-email class:form-control placeholder "ex. Jon.Smith@email.com"]