Placeholder text (the light gray hint text inside empty fields, like “Your name” or “Your email”) is styled entirely through CSS. Contact Form 7 doesn’t have a built in color setting for it, but you can change it in seconds by adding a short CSS snippet to your WordPress site. This method also works for plain HTML forms and other form plugins.
Steps to Change Placeholder Text Color with CSS
Step 1: Add This CSS Snippet
If you’re using WordPress, go to Appearance → Customize → Additional CSS (or your theme’s custom CSS panel, such as an “Additional CSS” field in Elementor or your page builder) and paste the following code.
If you’re working with a plain HTML site, add this same code inside a <style> tag in your page’s <head>, or in your main .css file if you’re linking one:
::-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;
}Step 2: Replace the Color Code
Swap #000 in each rule with any hex color code you want (for example #999999 for gray, or #666666 for a darker gray). Keep the four browser prefixed rules together, since older Firefox and IE versions each need their own syntax to apply the color correctly.
Not sure which color to use? Try our free color palette generator to find a shade that matches your form design.
Step 3: Style the Placeholder Font (Optional)
While you’re editing the CSS, you can also adjust the font style, weight, and size of the placeholder text in the same rule block:
::placeholder {
color: #999999;
font-style: italic;
font-size: 14px;
}This keeps the placeholder visually distinct from text the user actually types, which helps users tell at a glance whether a field is empty or filled.
Does This Work for Other Forms Too?
Yes. This CSS method is not limited to Contact Form 7, it works on any HTML form input, including WPForms, Gravity Forms, Elementor forms, and plain HTML <input> fields. Placeholder styling is a browser level CSS feature, not something the plugin controls. If you want to target only your Contact Form 7 fields specifically and leave other forms on the site untouched, scope the CSS to CF7’s form class instead:
.wpcf7-form ::placeholder {
color: #999999;
opacity: 1;
}A Note on Accessibility
Placeholder text should never be the only label for a field. Screen readers and some browsers do not treat placeholder text the same way as a real <label>, and it disappears the moment a user starts typing. Keep visible field labels in place, and use placeholder text only as a hint, not as a replacement for the label. If you’re styling the color, aim for a contrast ratio of at least 4.5:1 against the field’s background so the hint text stays readable for users with low vision.
Troubleshooting: Placeholder Color Not Changing?
- Make sure !important is included in each rule, since theme styles often override placeholder defaults.
- Clear any caching plugin (LiteSpeed Cache, WP Rocket, etc.) after adding the CSS.
- Confirm the CSS was saved in Additional CSS and not accidentally added to a single page’s custom CSS instead of site wide.
- Check that no other plugin (page builder, form styling plugin) is loading a placeholder rule after yours in the stylesheet order.
Frequently Asked Questions
Can I change placeholder color without CSS?
No. Placeholder color is a visual style controlled by CSS. There's no native Contact Form 7 setting for it, so a short CSS snippet is the only way to change it.
Why isn't my placeholder color changing?
The most common reasons are a missing !important, a caching plugin serving the old stylesheet, or another plugin's CSS loading after yours and overriding the rule.
Does this affect other fields on the form?
No. These rules only target placeholder text specifically. Field labels, submitted values, and typed text are unaffected.
Can I change the placeholder color for just one field, not all of them?
Yes. Instead of using the general ::placeholder selector, target the specific field by its ID or class. For example, if your email field has id="your-email", use #your-email::placeholder { color: #999999; } to style only that field and leave others unchanged.
Will this CSS break if I update my theme or Contact Form 7?
No, as long as you added the CSS through Additional CSS (not by editing a theme or plugin file directly). Additional CSS is stored separately from your theme and plugin files, so it stays intact through updates. Avoid editing core plugin or theme files directly, since those changes get wiped on update.
