[Plugin: MailChimp List Subscribe Form] Request: Add Placeholder text for Mailchimp Widget

Actually, you can add it, but you need to edit the plugin file.

If you open mailchimp_widget.php find this block of code:

<input type="text" size="4" maxlength="4" value="" name="'.esc_attr($opt.'[detail2]').'" id="'.esc_attr($opt.'-detail2').'" class="mc_input mc_phone" />
			';
				break;
			case 'email':
			case 'url':
			case 'imageurl':
			case 'text':
			case 'number':
			default:
				$html .= '
	<input type="text" size="18" value="'.esc_html($var['default']).'" name="'.esc_attr($opt).'" id="'.esc_attr($opt).'" class="mc_input" />';

At the end, just after class=”mc_input” add this:

placeholder="Your best email...."

Or whatever you want your placeholder to be. I’ve added it to the email field in this example, but if you search “mc_input” you’ll find options for address, name, etc.

Just keep in mind that if you update the plugin, you’ll have to go back and redo your edits.

No problem- I love mailchimp! Just gotta bribe it with bananas sometimes. 🙂

Hey there, Beama!

In order to do something like what you’re describing, it’ll take a little CSS tinkering. You’ll want to set the field names to “display:none” and then float the input to the left to have it look something like this:

http://cl.ly/3a1K1Q073j3X2K293x2H

#mc_signup_form .mc_input {
float:left;}
#mc_signup_form .mc_var_label {
display:none;}

From there, you can adjust the margins/padding to get the submit but exactly where you want it.

If we can help with anything else, give us a shout!

Cheers

Glad to help!

Cheers

Hi Matt,

here is the CSS formatting for button from my template. You can add this to your CSS style sheet and customize from there.

#mc_signup_submit.button:hover {
background: #690;
color: white;
border: 1px solid #690;
}

#mc_signup_submit.button {
background: #EEE;
color: #666;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-decoration: none;
margin: 0px 15px 0px 0px;
padding: 4px 8px 4px 8px;
border: 1px solid #DDD;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
}

So I inserted the placeholder code at the end, just after class=”mc_input” as you described at the beginning of this topic, and what I get in all three of input boxes;
email
last name
first name
is each input box placeholder reads with the same text.

How does one have distinct and individual placeholders?
Email for email
First name for first name
Last name for last name

Thanks a bunch!

Hi there, i am also trying to get rid of the labels and create a placeholder. I am having 2 issues at my site http://www.paula.clicksold.com :

1) i added the css display: none float:left to get rid of the labels and that worked on Internet Explorer. In Firefox and on my iphone I still see the labels and all of the formatting disappears because the lines become too long.

2) I followed the instructions above to enter placeholder text and I cannot see the placeholder. Here is the code and hopefully you can help me:

break;
case ’email’:
case ‘url’:
case ‘imageurl’:
case ‘text’:
case ‘number’:
default:
$html .= ‘
<input type=”text” size=”18″ value=”‘.esc_html($var[‘default’]).'” name=”‘.esc_attr($opt).'” id=”‘.esc_attr($opt).'” class=”mc_input” placeholder=”Email Address” />’;
break;

Hey thanks KaelinDesign, This worked like a charm 😉