@* life runs on code *@: Customize Your Own MailChimp E-Mail Newsletter Signup Form

If you’ve ever signed up for an email subscription you should know about MailChimp. It’s a company which helps webmasters and marketers deliver newsletters and other similar campaigns. They provide some HTML templates to use for signup forms and confirmation pages, but these are so generic that most subscribers are bored of this same interface.

I’d like to demonstrate how to customize the MailChimp signup form into something more unique. Everything is based off the original MailChimp HTML/CSS code and the form submission will use Ajax. It sounds complicated but the whole process is simpler than you might expect. Take a look at my sample demo to get an idea of the full tutorial.

Live Demo – Download Source Code

Getting Started

First we need to access the MailChimp dashboard to gather their HTML code. Sign into your account or create a new free account. Click “Lists” from the main menu and you’ll get a table of all your subscription lists. You might want to use an existing list, or create a new list for this tutorial. Either way click on the list’s name and we get another table organizing all the subscribers by e-mail address.

Any new list will start out empty but it doesn’t matter how many subscribers you have. On this page click “Signup forms” and we’ll be presented with some options. General forms are too basic and we don’t have control over the code. Select “embedded forms” and you’ll get a sleek interface to copy/paste the HTML.

I’ve chosen Super Slim over Classic because there’s less CSS getting in the way of your design, yet it’s still better than Naked without any styles at all.

<!-- 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="http://byjakewithlove.us6.list-manage.com/subscribe/post?u=58abcfa203271a9db312e69fc&id=ee0af79b60" 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_58abcfa203271a9db312e69fc_ee0af79b60" 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-->

The block above is my default code from MailChimp. There is a lot of organizing to do, namely removing all the comments unless you really need them. Also I’ve created a new stylesheetstyles.css and I’m going to combine everything together. The inline #mc_embed_signup should be merged into a unified CSS file along with the MailChimp slim code. This is my strategy for customizing the original design and sprucing up the layout altogether.

Changes in HTML

It’ll be easier to explain this process by showing the updated block of code so you have the ability to compare. All of the classes and IDs and names have been left alone. It’s wiser to customize the CSS by using the existing classes/IDs to ensure compatibility.

<div id="mc_embed_signup">

  <form action="http://byjakewithlove.us6.list-manage.com/subscribe/post-json?u=58abcfa203271a9db312e69fc&id=ee0af79b60&c=?" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

    <label for="mce-EMAIL">E-mail Newsletter Signup</label>

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

    <div style="position: absolute; left: -5000px;"><input type="text" name="b_58abcfa203271a9db312e69fc_ee0af79b60" value=""></div>

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

  </form>

  <div id="notification_container"></div>

</div><!--@end mc_embed_signup-->

The most important change is my form’s action attribute. Everything in the URL is identical up untilpost-json, which was originally post in the MC template. The post action returns a typical completion page we’re all familiar with. post-json will return a JSON response based on the success or failure of the e-mail subscription. Please note I’ve also appended &c=? to the end of this URL.

The purpose would be to delegate a callback method which is synonymous in JSON responses. I haven’t found a use for it personally, but there are many posts and discussion threads on the topic of callback functions. Just remember it should be part of the action URL.

Also you might notice an extra div at the very bottom of the form container. I’m using the ID#notification_container in a familiar syntax like the MailChimp ID names. Once JSON returns a value we check in JavaScript and then it’s appended onto the page inside this div.

Updating CSS

Aside from the typical page resets I’ve also written my own styles for the alert/success message containers. The properties are fairly typical so I won’t go into details, but you can find them inside my consolidated styles.css file.

The best way to customize MC form styles is to recognize how you want it to look. The form is a mixed bag of percentages and pixels, so it’s really up to you as the designer to make what you want. Responsive or fixed, inline or block-style elements. etc.

I’ve added some extra spacing to my code so there are block-level selectors and inline styles.

/* MailChimp Form Embed Code - Slim - 08/17/2011 */

#mc_embed_signup form {display: block; position: relative; text-align: left; padding: 10px 0 10px 3%; }

#mc_embed_signup h2 {font-weight: bold; padding: 0; margin: 15px 0; font-size: 1.4em; }

#mc_embed_signup input { border: 1px solid #ababab; -webkit-appearance: none; }

#mc_embed_signup input[type=checkbox]{ -webkit-appearance: checkbox; }

#mc_embed_signup input[type=radio]{ -webkit-appearance: radio; }

#mc_embed_signup input:focus { border-color: #799877; }

#mc_embed_signup .button {

  display: block;

  position: relative;

  background-color: #8db671;

  padding: 0;

  margin: 0 auto;

  border: 0 none;

  border-bottom: #719f5a 3px solid;

  border-radius: 6px;

  color: #fff; 

  cursor: pointer;

  font-size: 14px;

  width: 140px;

  height: 36px;

  line-height: 36px;

  font-weight: bold;

  text-align: center;

  text-decoration: none;

  vertical-align: top;

}

#mc_embed_signup .button:hover { background-color: #9cc183; border-bottom-color: #7fac69; }

#mc_embed_signup .button:active { top: 2px; border-bottom-width: 1px; }

This is just a small portion and it focuses on the inputs and the submit button. I’m using a bottom border to make the button appear 3D which then flattens when clicked. It’s all pretty straightforward and none of my CSS code should be confusing. I just repositioned the form container at 350px width so everything appears centered on the page.

Your positioning will change if you need it within the sidebar, or the header or maybe even the footer. In these cases you might relocate the notifications container above the form, or whatever makes the most sense. Feel free to start off with my code but starting with MailChimp’s defaults are probably just as good.

#mc_embed_signup label { display: block; font-size: 13px; text-transform: uppercase; padding-bottom: 7px; color: #616161; font-weight: bold; }

#mc_embed_signup input.email {

  display: block;

  padding: 8px 4px;

  margin: 0 4% 10px 0;

  text-indent: 5px;

  color: #818181;

  font-size: 1.0em;

  background: #f3f3f3;

  font-weight: bold;

  width: 100%;

  -webkit-transition: all 0.2s linear;

  -moz-transition: all 0.2s linear;

  transition: all 0.2s linear;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

}

#mc_embed_signup input.email:focus { 

  color: #666;

  background: #f3f3f3;

  -webkit-box-shadow: 0 0 12px #80cf7b;

  -moz-box-shadow: #80cf7b;

  box-shadow: #80cf7b;

}

If we used the original action URL we could stop at this point and be done. The form is mostly redesigned and once a user clicks submit, a new tab would open asking them to confirm the subscription via e-mail. But to simplify this process we’ll look into a jQuery alternative for handling the submission.

MailChimp Signup and jQuery

If you don’t already have a copy of jQuery then download one and include it within the page header. All my code is written in script tags at the bottom of the page. I actually stumbled onto this solutionin Stack Overflow which outlined much of the process.

$(function () {

  var $form = $('#mc-embedded-subscribe-form');

  $('#mc-embedded-subscribe').on('click', function(event) {

    if(event) event.preventDefault();

    register($form);

  });

});

Right when the document is loaded I’m setting up a jQuery reference variable $form. Whenever the submit button is clicked we prevent the default submission(which would open a JSON results page) and instead call a user-defined function named register(). The $form itself is passed into the function as a parameter.

function register($form) {

  $.ajax({

    type: $form.attr('method'),

    url: $form.attr('action'),

    data: $form.serialize(),

    cache       : false,

    dataType    : 'json',

    contentType: "application/json; charset=utf-8",

    error       : function(err) { $('#notification_container').html('<span class="alert">Could not connect to server. Please try again later.</span>'); },

    success     : function(data) {

      if (data.result != "success") {

        var message = data.msg.substring(4);

        $('#notification_container').html('<span class="alert">'+message+'</span>');

      } 

      else {

        var message = data.msg;

        $('#notification_container').html('<span class="success">'+message+'</span>');

      }

    }

  });

}

It might appear confusing but this function is really one long .ajax() method. Notice we can pull the GET/POST attribute off the form itself, along with the updated action URL. All the input values are serialized and passed in just like PHP. This is the primary reason to leave form input names alone and keep the original template.

Finally there are two Ajax response callbacks on success or error. If we get an error then MailChimp could not accept our request and the alert message appears. Otherwise they did accept the request, but we don’t know if it worked.

If Ajax was successful then we get a new parameter which is returned into jQuery. In this case it’s named data which should appear like a JSON object. If the result data says it didn’t work then we know there’s a problem with the e-mail address, either not valid or just not an e-mail string. Either way the error message is output into the page. I’m using substr() to remove the first portion of the error message code.

Or if the data message is successful, we should get a return string stating the user needs to check their inbox and confirm this new subscription. Either way the return message is output into the notification container by using jQuery’s .html() method.

Please note that even if you signup with a random e-mail, this will not appear in your list until it has been confirmed. To check if this script actually works you’ll need to use a real address and click the confirmation e-mail.

Live Demo – Download Source Code

@* life runs on code *@

Tuesday, 25 March 2014

Customize Your Own MailChimp E-Mail Newsletter Signup Form

Getting Started

Changes in HTML

Updating CSS

MailChimp Signup and jQuery

No comments:

Post a Comment