Styling the placeholder

What's a placeholder?

A placeholder is a bit of text that you can add to an input field. Your visitors and would-be subscribers will be able to see this text. It will disappear once you start typing in the field, and the text will not be used once someone submits your form by accident. It's a great way of telling people what input you expect them to put in the field!

You can set this text within the Add a new field generator, which looks like this:
Adding placeholder to MailChimp for WordPress

Which generates the following code:
A field with a placeholder - MailChimp for WordPress

When you place this form inside a widget, page or post, the placeholder will be visible for all the see. Usually it has a grey color, and it will disappear once you start typing something in the input field.

Preview of a placeholder - MailChimp for WordPress

Styling the placeholder

Styling the placeholder is a bit harder because of the way the various browsers handle this, separately.

It can be done by adding a few lines of CSS to your theme its style.css file. You can find this file by going to WP Admin > Appearance > Editor or over FTP by browsing to `/wp-content/themes/your-theme/style.css`.

Another, perhaps easier, option is to use our Simple Custom CSS plugin.

Below you'll find a list of lines to add to the stylesheet.

.mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
	color: black;
	font-size: 12px;
}

.mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: black;
	font-size: 12px;
}

.mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: black;
	font-size: 12px;
}

.mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
	color: black;
	font-size: 12px;
}

That's it! You should now have a black placeholder text with a font size of 12 pixels.

Was this article helpful? ·