MailChimp subscription form field

[danigorgon]

Hi I have been going through all the mailchimp subscription posts on this support forum (there are about six or seven) and experimenting all tips. But I can’t get the field work the way it should. It’s showing a very light grey font and styling, and a very bold font for submit button. I tried all my little knowledge to change it’s color, get the width right, get the right button – nothing seems to fall in right place at the end of the day. Please help me. I have downloaded the plugin – mailchimp signup form, and activated it. Here is the code I get from MailChimp:

<!– Begin MailChimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/slim-081711.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id=”mc_embed_signup”>
<form action=”//elcome.us5.list-manage.com/subscribe/post?u=ea6a769cb12fbb9f506eb2f47&id=1e4c16810b” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<label for=”mce-EMAIL”>Subscribe to our mailing list</label>
<input type=”email” value=”” name=”EMAIL” class=”email” id=”mce-EMAIL” placeholder=”email address” required>
<!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;”><input type=”text” name=”b_ea6a769cb12fbb9f506eb2f47_1e4c16810b” tabindex=”-1″ value=””></div>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</form>
</div>

<!–End mc_embed_signup–>

Thanks & Regards

[Rui Guerreiro – SUPPORT]

Hi,

Can you send us the link where the Mailchimp form, I didn’t find it.
We need it to be online so we can inspect and provide you a css for the color/width you want to change.

-Rui

[danigorgon]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

I made a few css adjustments, add the code bellow to your custom css.

#header-subscribe{
width:350px!important;
}

#mc_embed_signup input.email{
width:95%!important;
}

#mc_embed_signup input.button{
width: 95%!important;
background-color: #000!important;
}

you can replace the background-color of the button for your desired color.

-Rui

[danigorgon]

Hello Rui, thanks for the help. It worked, and I reduced the width of input button to 50%.

But is there anyway you could help us to achieve:
1) the subscribe button separated from email field with a little space/padding as in two rows.
OR
2) the email field and subscribe button be on the same row but with little space between each other.

We would be happy to go with either one of the options as whichever looks better/smarter.

P.S. I tried adding this to your CSS but it did not help me. padding-top: 5px !important

Thanks in advance for your help.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
#mc_embed_signup input.button{margin-top:10px !important;}
Thanks 🙂
With Best Regards
Mohammad

[danigorgon]

Ho Mohammed, your code worked.

thanks a lot.

[Rui Guerreiro – SUPPORT]

Great.Thanks Mohammad.
-Rui