EverWeb Widgets

MailChimp Signup Form

MailChimp is a really good service for running email campaigns and is free for smaller sites with up to 2000 subscribers. The free account is limited to 12,000 emails per month.
NOTE: The form on this page is a dummy and won't subscribe you to anything!
Click the tab below to signup for a free MailChimp Account …

MailChimp

Don't Miss Out!

To be a regular subscriber to the EverWeb Widgets Blog, please enter your name and email address in the form provided and submit it to get notifications of new posts.

MailChimp Signup Widget

The widget has a heading and a paragraph to the left and the form to the right when viewed on computers and tablets. On mobile phones, the form positions itself below the text.
The heading and text should make visitors want to take the time to fill out and submit the form.
Important:The text should be limited to no more than about 200 characters - otherwise it will overflow the container.
The form container has quite a few styling options and can have a border and/or a box shadow.

MailChimp Form Set Up

Signup for a MailChimp Account or login to an existing one and follow the steps below to obtain the MailChimp ID and security code.

  • Click the "Create" button
  • Choose "Signup Form" from the popup
  • Select your site if you have more than one and click BEGIN
  • In the form options, click on "Show only required fields"
  • Click in the code field and copy - command + c
  • Open a new file TextEdit.app in plain text mode and paste the code into it
  • Click the "MailChimp Code" bar below to open the accordion
  • Identify the ID code - marked in red - in your own code and copy it to your clipboard
  • Paste this code into the "MailChimp ID" field in the widget settings
  • Identify the security code - marked in blue - ii your own code and copy it to the clipboard
  • Paste this code into the "Security" field in the widget settings
  • Save a copy of the ID and Security codes in case they are required in the future

MailChimp Code

<!-- Begin MailChimp Signup Form -->

<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.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="https://domain-name.us19.list-manage.com/subscribe/post?u=8e6e21ad3a666e950e941fff2&amp;id=c35b0ff97b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id="mc_embed_signup_scroll">

<h2>Subscribe to our mailing list</h2>

<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>

<div class="mc-field-group">

<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>

</label>

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

</div>

<div id="mce-responses" class="clear">

<div class="response" id="mce-error-response" style="display:none"></div>

<div class="response" id="mce-success-response" style="display:none"></div>

</div> <!-- 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;" aria-hidden="true"><input type="text" name="b_8e6e21ad3a786e910e771fff2_c35b0ff46b" tabindex="-1" value=""></div>

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

</div>

</form>

</div>

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

<!--End mc_embed_signup-->

© EverWeb Widgets -