If you are using mailchimp for managing your newsletter campaigns, then you can either use a link to mailchimp site or use subscription form directly on you website. In both cases users are taken to mailchimp’s site, but in case of subscription form user enters the email address on your website. This reduces the barrier to subscribing to the newsletter.
Mailchimp default form
In case you are using subscription form option, here is how the default form code looks like:
<!-- Begin MailChimp Signup Form -->
<link href="http://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="/path/to/form/submit/url/" 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>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End mc_embed_signup-->Here is how it looks when implemented.
This code also uses an external css file http://cdn-images.mailchimp.com/embedcode/slim-081711.css. The file is not too big. But still it causes one extra round trip to MaillChimp CDN site.
Mailchimp lightweight form
Since user only needs to enter email on your website, a simple subscription form should be enough for your site. The form can just an html form, other fields and some inline css. You can avoid an external css file. Here is the form code which I tried.
<div id="mc_embed_signup">
<form action="/path/to/post/url/" method="post" target="_blank" >
<label style="display:block;" for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div><input style="background: #666; color: white; padding: 3px 10px; border-color: #666; border-radius: 4px;" type="submit" value="Subscribe" name="subscribe"></div>
</form>
</div>Here is how it looks when implemented.
You can use this code as a starting point and change its html and css according to your needs.
