Support » Plugin: MailChimp List Subscribe Form » Input field text and error css

  • Hi there,

    Just installed your plugin and have almost set it up how I would like.

    What I would like to do is have the placeholder text in the input fields which I can’t seem to do. I found a forum thread which was helpful and told me to change placeholder=”‘.esc_html($var[‘default’]).'” to placeholder=”‘.esc_html($var[‘name’]).'” which did work, however, I would like to be able to do it without editing the plugins core files. Also linked with this, is it possible to have the placeholder text disappear on click and then reappear when clicked off if nothing has been typed?

    That is a link to the test site which has mailchimp integration built in within the theme but didn’t quite work exactly how i wanted it to but you can see what I am trying to achieve by clicking on the fields within the green box.

    My second point is regarding the error message when you don’t fill in a field. Is it possible to just highlight the corresponding box with a red border instead of having text above it?

    Sorry if my stupidly long message is confusing but any help would be greatly appreciated.

    Many thanks,


Viewing 3 replies - 1 through 3 (of 3 total)
  • Okay, after some more digging, I managed to update my list on my site and the placeholder text appeared without me editing any of the code which is a good start. However, the email field doesn’t seem to have any placeholder text, how do I enable this?




    MailChimp Support Rep

    Hi W0tti,

    Thanks for hopping in the forum. If you use the default merge value in your list, that will add the text for every field except the email field. Email fields do not have a default merge tag value. Currently, the only way to add the text in the email field, is editing the placeholder code in the plugin (placeholder=”‘.esc_html($var[‘default’]).'” to placeholder=”‘.esc_html($var[‘name’]).'”)

    There is some css, you can add on your site, to make the placeholder text remove on click. Here’s an example that I found in a quick web search:

    input:focus::-webkit-input-placeholder { color:transparent; }
    input:focus:-moz-placeholder { color:transparent; }
    input:focus::-moz-placeholder { color:transparent; }
    input:focus:-ms-input-placeholder { color:transparent; }

    This page from stackoverflow has other ways to do it.

    Your other question was on highlighting input fields when an error occurs. Currently, errors will only display above the form. But I will definitely pass on that feature request.



    Hi mcd,

    Thank you so much for getting back to me.

    I will edit the code in the core file to show the email placeholder text then, that will be fine.

    That bit of CSS you found does exactly what I wanted so thank you very much for that, you’re a legend.

    Regarding the error messages, I think that would be a great feature to add. This is just my personal opinion, but I think if the corresponding box were to outline in a red border to indicate it is a required field instead of some text appearing above it, that would look much nicer.

    Anywho, thanks again for getting back to me.


Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Input field text and error css’ is closed to new replies.