Place field name inside the field

Hi LeuName7,

Thanks for hopping in the forum. You can set your default merge tag values in your MailChimp account, which will then show as placeholder values in your plugin’s signup form. However, since default merge tag values can’t be set for the email field, that will remain blank. Editing some of the code of the plugin will use the field name as the placeholder instead.

-In wp-admin, go to Plugins > Editor > MailChimp > mailchimp_widget.php.
-Locate this line of code:
<input type=”text” size=”18″ placeholder=”‘.esc_html($var[‘default’]).'” name=”‘.esc_attr($opt).'” id=”‘.esc_attr($opt).'” class=”mc_input”/>’;
-Change $var[‘default’] to $var[‘name’]. This will begin using your field label as what appears in the placeholder attribute for your input fields.

You can then hide the label that appear above the fields by adding this bit of code to your site’s css.

#mc_signup_form .mc_var_label {
display: none;
}

One warning when editing the plugins code, updates to the plugin could overwrite these changes. Let us know if you have any other questions.

-mc_d

Thanks a lot!

Worked perfectly.

Hi,

I hope you don’t mind me crashing in on this topic.

I’ve done as said, have hidden labels, and Email Address now only appears inside submit box. To change this to ‘enter email address here’ I’ve followed instructions on mailchimp adding a new text field label which I’ve called that.
But it still says Email Address. I understand this new tag needs to be inserted somewhere, but I’m stomped now.

Any suggestions?

Actually, I just needed to update my list in WP-admin. However, it also worked with just changing the field name of the actual email label, so adding that new text seems unnecessary? Am I wrong?

Hi thetravelingrepublic,

Thanks for posting. Generally speaking any changes made to a list in MailChimp would necessitate an Update List from the settings page of the plugin in WP-admin to pull the changes into WP. I’m not sure I follow exactly what you’re saying regarding “adding a new text field label” on the MailChimp side, and which new text was added that seems unnecessary.

If things are all good with your plugin form at this point, that’s great. I’ll be happy to help if you need any additional assistance!

-Kath

Hi Kath,

Thanks for answering. Somewhere in the tutorial it says you can’t change the field label for ‘Email Address’ for the email function; therefore you have to make a custom field label. But I made it work. I might’ve misunderstood, though (probably).

The issue will probably come up again when I implement MC straight into a Facebook app when this field label will say ‘enter your email address here’ as seen on my website (www.thetravelingrepublic.com, disclaimer: still some work to be done). I don’t know when I’ll get that done yet, but if issues come up I’m sure to ask.

While I have you “here” and you’re on my website (maybe) – I’ll intrude on this topic – you can see that my widget box for MC is red. This raises problems when readers add their email to the newsletter list and confirmation is in red. If email is already on list it will appear in green. I’ve tried to find where to change this text color to white, but it escapes me. Do you understand, and where do I change it?
Thank you,

Hi thetravelingrepublic,

I think I understand where the wires got crossed – I tried out your form and took a peek in your MC account from this end, and I see that you renamed your Email Address field label, but also it looks like to had created a secondary field with the same label. That second “enter your email address here” field wouldn’t be necessary (or really functional in this case) so I think that’s what you might have been referring to.

Anyway – I do see that the widget box is red, and I’m happy to point you to the place where you can change the response text color.

In the mailchimp.php file, find and edit the following code:

function mailchimpSF_main_css() {
?>
.mc_error_msg {
color: red;
margin-bottom: 1.0em;
}
.mc_success_msg {
color: green;
margin-bottom: 1.0em;
}

Changing the “red” and “green” there will allow you to have different colors for the response (error and success) messages displayed on your widget form.

Have a good day!

-Kath

Thanks Kath!

One last thing that didn’t work out for me. And as you may have seen when you used your example mail to subscribe is that when you do sign up both the error and success message overlap with the label above.
I tried using margin, but that only pushes the text out of the box, and seriously messes up in different ways in both FF and IE. Chrome was fine. Margin-top, etc did not work out. I only tried in the “function mailchimpSF_main_css() { ?>” part. Couldn’t find a sensible (to me) place elsewhere to put it. Any suggestions?

Hey thetravelingrepublic,

I gotcha! You’re going to want to add in a margin-top snippet in the CSS of the widget itself in the mailchimp_widget.php file.

Adding margin-top into the CSS for #mc_signup_form will increase the space between any header text you have and the subheader/form area.

Adding margin-top into the CSS for .widget_mailchimpsf_widget .widget-title will increase the space above the header text you have (and push the subheader/form area down accordingly). Worth nothing, I did notice in my testing that this worked on certain instances of my widgets on my theme but not all of them.

There will probably be a little trial/error with this but I was seeing the same behavior between browsers when working with the CSS in mailchimp_widget.php so that will be a much better area to edit than the mailchimp.php file. Most of the styles you’ll want to tweak will be in the widget file in general.

Let me know if there’s anything else I can help with!

-Kath

Hi There,

I have placed the labels inside as mentioned here, but some people say they can’t see them?
Is there a browser incompatibility issue?

I can see them on Chrome Version 39.0.2171.65 m, Firefox 33.1 as well as Explorer Version 11.0.9600.17420

My page is:
wentworthwest.com.au

Thanks

Regine

Hi nutsonshells,

Unfortunately I’m not able to recreate a situation causing the in-field labels to not appear, but it could definitely be a compatibility issue or potentially a browser add-on causing the fields to appear differently than expected. Certain displays may show the text with a much lower contrast, making it more difficult to see, which may be what’s occurring as well.

– Kath