[How To] Change Contact Form 7 Placeholder Text Color

Did you know Contact Form 7 allows you to change the color of placeholder text?

If you’ve ever used Contact Form 7, then you might have noticed that it has a default placeholder text color. You can customize the placeholder text using Contact Form 7’s built-in options—or even customize it with CSS!

This article will show how to change Contact form 7's Placeholder Text Color and provide code examples for both methods.

We've discovered that a lot of clients in our support forum are having trouble with setting or changing the font color of contact form 7 placeholder text.

Contact form 7 is one of the most popular WordPress plugins today, allowing you to create basic or complex contact forms on your WordPress site. We've written already how to fix errors in sending Contact Form 7 nessages.

We'll show you how to customize text color with custom code: If you're unfamiliar with coding but need a simpler and easier-to-use forms builder plugin, try WPForms.

CSS for CF7 Placeholder Text

::-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;
}

Use !important tag

The "!important" tag is used to guarantee that other styles are not applied to these CSS selectors. This ensures that the style works. If you want the style to be used only on contact form 7 fields, you may use this:

.wpcf7::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}

If you need to expose one specific contact form on your site without altering other contact forms 7, look for the form identifier as follows:

Right-click the element in question and select Inspect Element. Shortcuts: F11 (Windows) or CMD + SHIFT + C (MAC) Locate the ID and replace ‘wpcf_id' with it in this code:

#wpcf_id::placeholder {
    color: #000 !important;
    opacity: 1;
}

Feel free to leave a remark or ask a question below!

About the Author

Author: David AttardWebsite: https://www.linkedin.com/in/dattard/Email: david@collectiveray.com

David has been working in or around the online and digital industry for the last 21 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. He has worked with software development agencies, international software companies, local marketing agencies and now is Head of Marketing Operations at Aphex Media - an SEO agency. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today. His blend of technology expertise combined with a strong business acumen brings a competitive edge to his writings.