WordPress.org

Ready to get started?Download WordPress

Forums

MailChimp List Subscribe Form
Request: Add Placeholder text for Mailchimp Widget (21 posts)

  1. mattmikulla
    Member
    Posted 2 years ago #

    It would be great if the this widget allowed you to add placeholder text in the text field. "enter your email" or whatever.

    http://wordpress.org/extend/plugins/mailchimp/

  2. KaelinDesign
    Member
    Posted 2 years ago #

    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.

  3. mc_nate
    Member
    Posted 2 years ago #

    Fellow-Wordpress users to the rescue!

    Good looking out, Kaelin!

  4. KaelinDesign
    Member
    Posted 2 years ago #

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

  5. Adrian
    Member
    Posted 2 years ago #

    I really like how the widget looks with the placeholder text. I was wondering if (1) you know how to remove the label "Email Address" from before the input box and (2) how I can have it so that the input box and submit button are on the same line.

    Here is the temp site I am currently working on, so you can see what I am talking about.

    http://treksinthewild2.netfirms.com/canoe-rentals/

    Thanks!

  6. mc_nate
    Member
    Posted 2 years ago #

    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

  7. Adrian
    Member
    Posted 2 years ago #

    Beautiful! that's perfect!

    Thanks!

  8. mc_nate
    Member
    Posted 2 years ago #

    Glad to help!

    Cheers

  9. turndogmillionaire
    Member
    Posted 2 years ago #

    hi all, hope you may be able to help

    as you can see on my site i've taken some of the advice from this post, but i'm not a fan of the submit button. I'd love to be able to have a button like the one on Beama's site

    I am using the mailchimp Widget, so any idea how i can replace the default button with a more attractive one???

    any help would be great

    Matt

  10. Adrian
    Member
    Posted 2 years ago #

    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;
    }

  11. turndogmillionaire
    Member
    Posted 2 years ago #

    Huge thanks, that has worked perfectly :)

    Slowly but surly i'm getting there

    thanks again

    Matt (Turndog Millionaire)

  12. jrfehringer
    Member
    Posted 1 year ago #

    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!

  13. mc_nate
    Member
    Posted 1 year ago #

    Hey there, guys.

    There is a way to pull in some value for that field, automatically from your MailChimp list. What you'd want to do is set a "Default Value" in your forms in MailChimp, first:

    How do I set default merge values (like Dear Customer)?: http://eepurl.com/hcDC

    Then, after setting the value for each field, you'd want to update your list settings in WordPress by going to "Settings" -> "MailChimp Setup" -> "Update List".

    Cheers

  14. paulaa
    Member
    Posted 1 year ago #

    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;

  15. TaxGems
    Member
    Posted 1 year ago #

    I'm having the exact same problem as 'paulaa'. I've entered the placeholder tag and cannot get the placeholder text to show up in the email input field. Any ideas?

    I got the first name to show up by setting the "default value" on the mailchimp site. The email input does not have a "default value" on the mailchimp site.

    http://www.taxgems.com

  16. b-summers
    Member
    Posted 1 year ago #

    Hey thanks KaelinDesign, This worked like a charm ;)

  17. HWI
    Member
    Posted 1 year ago #

    To show a placeholder for email I moved and dublicated some of the code
    Like this:

    break;
    
    			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="'.esc_html($var['default']).'"/>';
    	break;
    			case 'email':
    	$html .= '
    	<input type="text" size="18" value="'.esc_html($var['default']).'" name="'.esc_attr($opt).'" id="'.esc_attr($opt).'" class="mc_input" placeholder="E-mail"/>';
    				break;
    
    		}
    		if (!empty($var['helptext'])) {
    			$html .= '<span class="mc_help">'.esc_html($var['helptext']).'</span>';
    		}

    Moved case 'email': and added another placeholder term

  18. kylefitzp
    Member
    Posted 1 year ago #

    So, I'm trying to add place holder text for Mailchimp widget following the instructions above, but I must be missing something. Is the above placeholder="Your best email...." written exactly as it should be (minus "your best email...")?

    This is what I have:

    <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"/>' placeholder="Your best email....";
    break;

    Thanks for your help!

  19. kylefitzp
    Member
    Posted 1 year ago #

    Never mind! Dumb mistake on my part. Your instructions were perfect!

  20. Jens D
    Member
    Posted 1 year ago #

    I have also tried to get a placeholder in both fields, but I'm struggeling...

    I have used the

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

    placeholder="Your best email...."

    trick but that displayed "Din email... (Your email...) in both name and email field. I then used the

    default merge values

    trick by mc nate, but I can only do it in the name field, and the text is a different color (solid black) and you have to manually remove all the text before typing your name.

    Is there a way to use the first approach, but have different text in the two fields?

    Right now my mailchimp_widgte.php looks like this:

    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="Din email...." />';
    				break;

    And another question: How do I remove " *=required field" ?

    Best
    Jens

    http://www.marleneasmund.dk

  21. Chris Barrett
    Member
    Posted 1 year ago #

    I know this is an older thread, but there is a better way of adding the placeholder. If you have multiple fields you want on your form, the placeholder="Your best email..." adds that text inside all boxes.

    Instead, use placeholder="'.esc_html($var['name']).'" and your MailChimp Field Label will be displayed.

    Cheers!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags