[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.

Contents[Show]

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:

change cf7 placeholder text

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
David Attard
Author: David AttardWebsite: https://www.linkedin.com/in/dattard/
David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. 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.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.

Author(s) Featured On:  Inc Magazine Logo   Sitepoint logo   CSS Tricks logo    webdesignerdepot logo   WPMU DEV logo   and many more ...