Mailchimp For Bloggers Part Two

Welcome back friends! Thank you all for the overwhelming support and lovely comments about last week’s MailChimp tutorial, you all literally made my week! If you haven’t had a chance to read Part One of the MailChimp series yet, you can get it here. Don’t worry, we’ll wait for you.

OK, so last time we covered all the general forms that you can create for your emailing list. The next contender on the list is embedded forms, which is what we are going to cover before we get into how to send your first campaign.

Embedded Forms

With embedded forms you can copy and paste a HTML code straight into your blog to collect sign ups. So, for example, last week we looked at creating a button to take your readers through to your signup form. However, sometimes, you might want to skip the button and have the form actually on your page.

If we click on embedded forms from the main screen then, we are taken through to here.

 

As you can see, this really isn’t the prettiest form out there. Whilst I love MailChimp, damn son that form is ugly. I thoroughly recommend, if you are going to use this form, that you change it’s appearance.

Having said that, unlike the fairly straight forward process of altering your ‘general’ signup forms, this involves some CSS work.

If altering CSS sounds incredible tedious/very alarming there is the option to use MailChimp’s Style Builder with the MailChimp plugin. However, that is a premium feature and at $49 for one website, perhaps a little steep if you are just starting out. But I like to give you guys all the options!

OK, so for those of you who want to try out some code styling, before we start: SAVE ALL THE THINGS. Whenever I do any sort of altering of code on my website, big or small, I make sure I have backup of my backups. Just in case something goes wrong and I can’t work out what I’ve done. Or more likely, I can’t be bothered trying to find that one closing tag I’ve forgotten and just want to start from scratch.

So, be safe people. Save.

Now, step two.

In the menu you get the options of classic, super  slim, naked and advance. I want you to choose the ‘naked’ option as this gives us nice clean code to work with.

At the bottom, you can see the ‘copy/paste’ box with your code in. Look for the line of code that says this:

<div id=”mc_embed_signup”>

and replaced it with this:

<div id=”mailchimp”>

Now you need to remove all the <label> tags, but make sure not to accidentally harm any of your <imput> tags.

You can also remove the extra <div> tags:

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

<div class=”clear”>

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

If you remove the <div> tags remember to remove the corresponding </div> closing tags well.

Next we are going to change the text in your input fields. So for example, ‘enter your email here’. Look for your <imput> tag. Within the <imput> tag there should be the world value =””. Inside the quotes is where you should insert your ‘Enter your email here’. Like this:

<input type=”email” VALUE=”ENTER YOUR EMAIL HERE” name=”EMAIL” CLASS=”EMAIL” id=”mce-EMAIL”>

OK, so the next thing we want to do is make sure that when people click on your box, the text disappears so they can add their details into the box.

At the end of your <input> tag add the following code snippet:

onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”>

So the line will look like this:

<input type=”text” value=”Enter your name here” name=”FNAME” class=”name” id=”mce-FNAME”onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”>

 

Stay with me guys, you’re doing great!

 

Next you might want to change the size of your box. For example if you are putting it into a sidebar or smaller area, you might want to reduce the size. To do this just add size=”25px” into your input tag. Of course, you can change the number of px to suit what size you are aiming for.

So now the lines would look something like this:

<input type=”text” SIZE=”25px” value=”Enter your name here” name=”FNAME” class=”name” id=”mce-FNAME” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”>

If you want to change the text on your subscribe button, look for the <input type=”submit” line. In the value attribute at the moment will be “Subscribe”, if you want to change that you can alter it to say, “Join Now” for example. This is how the line would look.

<input type=”submit” value=”Join Now” name=”subscribe” id=”mc-embedded-subscribe” class=”button”>

Let’s evaluate a moment, your code should be looking something like this:

<!– Begin MailChimp Signup Form –>

<div id=”mailchimp”>

<form action=”This is where your MailChimp code goes” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank”>

<input type=”email” size=”25″ value=”Enter your email here” name=”EMAIL” class=”required email” id=”mce-EMAIL” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”>

<input type=”text” size=”25″ value=”Enter your name here” name=”FNAME” class=”name” id=”mce-FNAME” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”>

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

<div class=”clear”>

<input type=”submit” value=”Join Now” name=”subscribe” id=”mc-embedded-subscribe” class=”button”>

</div>

</form></div>

<!–End mc_embed_signup–>

Great job guys! Now, for the actual styling we are going to have to dive into the CSS sheets. This is the point that I remind you to make sure you save a copy of the original files just in case you want to restore your original settings.

CSS MailChimp

I’ve gone ahead a knocked this up for you, so you copy and paste this straight into your style sheet. I’ll talk you through the bits you might want to edit. CSS is actually pretty straight forward when you look at it logically, as you can see most of it is fairly self explanatory.

#mailchimp {

background: #fff;

color: #f1abc1;

padding: 25px 10px;

}

#mailchimp input {

border: medium none;

color: black;

font-family: times new roman;

font-size: 16px;

font-style: italic;

margin-bottom: 10px;

padding: 8px 10px;

width: 300px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

#mailchimp input.email { background: #fff }

#mailchimp input.name { background: #fff}

#mailchimp input[type=”submit”] {

background: #f1abc1;

color: #000;

cursor: pointer;

font-size: 14.5px;

width: 35%;

padding: 9px 0;

 

}

#mailchimp input[type=”submit”]:hover { color: #F2C94C }

First up is the background of your form. In our example we’ve got it white, but if you want your form to appear in a ‘box’ then you might want to change this to grey for example. Next up is color, this refers to the colour of your text on the form itself.

Next is the padding, which indicates how much room you want between your content and your borders. From a design point of view it’s nice to have a good amount of white space, in order to set apart your sign up sheet and call to action.

The next label is #mailchimp input { and this refers to the actual boxes where people will type their information. Here you can adjust the size and type you want in those boxes as well as setting up the width of the boxes and padding. The border-radius attribute refers to the corners of your box. The ‘moz’ and ‘webkit’ attributes are there to talk to Firefox and Apple browsers, although the latest browsers have all adopted CSS3.

#mailchimp input.email and #mailchimp input.name are referring to the boxes in which the subscriber’s email and name are inputted, respectively. This is just changing the background to white.

#mailchimp input[type=”submit”] is your button, this is something you will want to change to a nice bright colour to override MailChimp’s bizarrely chosen grey button that it saddles you with.  As with the above you can change padding and width etc. Fun fact, you can change what the cursor becomes when it goes over your button. In practice you probably want to leave it the same so as not to annoy people, but if you are interested here is a link to w3school’s list of cursor properties.

And finally, my favorite little trick, you can change the colour attribute in this line:

#mailchimp input[type=”submit”]:hover { color: #F2C94C }

And your button will turn that colour when someone’s cursor hovers over it.

Aaaaand that’s it!

If your feeling that this is possibly a little too much work to put in to simply popping an embedded form into your blog, you can also do it via the MailChimp plugin. However, without the premium upgrade, you are somewhat limited in terms of styling. You can select a pre-set theme from the ‘appearance’ section or you can tell it to use the colour of your current WordPress theme.

So, I will just show you quickly what the MailChimp plugin looks like. You can download it from here.

The screen will look a little something like this:

Yes I have whited out my API Key, sorry guys, you’ll have to buy me dinner first.

To connect the plugin to your MailChimp you will need your API key. You will probably end up using your API for a few MailChimp related tasks so it is worth knowing where it is located. The plugin helpfully links you straight to the API page.

However, I will just show you how to get to your API directly, in case you need your API key in the future.

At the top of MailChimp in the main menu, click on your account name and a drop down menu will appear. Click on the ‘account’ option and you will be taken through to the page which has all your payment details.

From the sub menu of this page, click the little arrow next to ‘Extras’ which will bring up another drop down box. From this drop down menu you can click on API keys, which…will take you to your API keys. Voila, you’ll find a long string of numbers at the bottom of the page. It will come in useful one day promise!

 

Back in the plugin, once you’ve copied and pasted your API key into the box you can go into the ‘forms’ option in the plugin and create your signup form.

 

To create your form just click the options like ‘first name’ to insert that into your form and MailChimp will just copy the code out for you. The appearance tab at the end of the row will let you change the colour that your form will go when the boxes are clicked on.

There is also the option to integrate your MailChimp with your Contact7 form as well. This is useful if you think your Contact7 form is a little bit more stylish than the exceptionally ugly MailChimp version.

Subscriber Pop Up Forms

After the general forms and the embedded forms, there is also the option to create a pop up form. Now, I know many of you will read the word pop up and think negative things. Pop ups are extremely annoying. Nevertheless MailChimp does give you the option to create one if you so choose.

MailChimp makes designing your pop much easier than styling your embeded form, so you can choose layouts, fonts and colours pretty simply.

To be honest, I’ve never used MailChimp pop ups. There are so many plugins out there that will provide you with pre-made templates that are optimized for popup marketing that, for me, it’s not worth spending the time styling one in MailChimp.

Also, I find MailChimp’s options fairly limiting when it comes to modal settings. You can only choose to delay your pop up by pre set times of ‘immediately, 1, 2 and 5 seconds’. It also doesn’t give you any options regarding whether your pop up should be shown to a repeat visitor again and other useful features.

You can get into the code of your form to tweak these things but there are so many good plugins out there where you can do it with a click of a drop down box. It seems a bit of a waste of time unless there is something particularly custom you want to do.

I use SumoMe, which integrates with MailChimp, so you have more options whilst all your emails still go straight to your MailChimp lists. I have experimented with the pop up options but as I find them personally so annoying I don’t use them for the site. However SumoMe does give you loads of options about under which conditions your pop-up should or should not be seen, which is very useful.

Also, there are what we call ‘exit pop-ups’ which you might have seen or heard of. These are popups that only ‘pop’ when a visitor is about to leave your site. According to Wishpond;

“A well executed exit pop-up can increase leads by 600% or more”.

However, considering Fishpond sells exit pop-up subscriptions I might take those numbers with a pinch of salt. I have seen them on a number of sites and they are less annoying then regular pop-ups and as your reader is already leaving the site there is some argument that ‘you might as well.’ That’s totally up to you and your analytics.

Edit: Just to pop in with a bit of an update on pop ups. You might be aware that Google has announced recently that it will be penalizing websites that have popups which, er, pop up and obscure the page when someone first lands on your site. So far, exit popups seem to be safe still but just FYI.

Campaigns

Alllllrighty then, the somewhat unhelpfully named campaigns tab, right at the top of your screen, is where you go to start sending your emails. Click through and look for the big grey button on the right that says Create Campaign.

If you already know what type of campaign you want to create you can click the little downward arrow on the right of the button which will give you a list of the different campaigns. Alternatively, you can just click the button and you will be taken through to the screen below, which will list them all for you as well.

The type of campaign you will most likely want to send is ‘regular campaign’ so we will come to that in a moment.

Plain Text

A ‘plain text’ campaign really does what it says on the box. This is if you want to send a campaign without any images or complicated graphics. Text only versions of emails are a good idea if you are sending to a platform which can’t display HTML. Some people also elect to block HTML emails.

If you gave your readers the option to opt-in for plain text emails on your signup sheet form, then, of course, your plain text campaigns will be going to them automatically.

Regular Campaigns

At the top of the list is your regular campaigns. This is where you will be likely spending most of your time. If you click on regular campaign you will be taken through to your subscriber lists. Unfortunately there isn’t a way to select them all at once. However, once you have sent the campaign you can ‘replicate’ it, so you don’t have to go through the process again.

To replicate a campaign, simply click onto campaigns in the main menu. A list of your previous campaigns will appear. Next to the ‘View Report’ button is a little arrow. Click that arrow and select ‘replicate’ to copy the campaign and send it to another list.

But first, let’s go back to regular campaigns and choose the list you want to send your emails to and click next on the button at the right hand side of your screen.

Campaign Info

So for all your campaigns you will need to fill in the campaign information.

First, you can name your campaign. Your subscribers won’t be able to see this so you can name it something relevant to you, so you know what it is in the future. Trust me, these campaigns mount up pretty quickly!

The most important bit of this screen is the email subject. What are you going to write to get your subscribers to open your email? Just because they have subscribed to you is, unfortunately, no guarantee that they will open your email.

The overall industry standard is around the 20% mark and varies per category. For example, the art business scored a 27.58% open rate, whilst business and finance should know better at 21.49%. If you are interested, MailChimp has complied the statistics here.

Usefully, if you click the blue link underneath the subject line box entitled ‘how do I write a good subject line’ you can use MailChimp’s tools to check whether your keywords will score well. For example, to test it I put in the phrase ‘blog post’. The words ‘design blog’ came out very well, whilst the phrase ‘latest posts from’ performed poorly.

So I definitely recommend testing out your subject line with this tool before you commit!

Moving on, if you don’t want replies going straight to your inbox you can select ‘Use Conversations to manage replies’ option on the top right. MailChimp will create a special address for replies to go to and you can access them from your MailChimp account through your reports.

There is also the option to personalize the ‘to’ field. This means that you can change the ‘to’ field in your email to your subscribers’ first name or last names to make it more personal. As MailChimp points out, this is also more likely to help your email get past any spam filters.

At the botton of your screen is a plethora of tracking options. MailChimp actually does a very good job of explaining what all these options do. However I would like to especially highlight the eCommerce option, if you are running any sort of online business. You can track your customers’ purchase behavior and then use it to segment your email list. So for example, for people who purchase things from your shop you might reward their loyalty with a discount offer. We will be talking about segmentation in next week’s tutorial.

Beneath there are also options if you want to auto-tweet or share to Facebook.

Template

Moving onto the next stage, this is where the fun begins. Choosing your template.

One of the many awesome things about MailChimp is that it has a vast array of templates for you to choose from, each with a different goal or target market in mind. For example, you can choose your template by industry or you can choose templates advertising an event. There are lots of fun seasonal templates you can use or if you have ever so slight control issues like me, you can select a blank template and start from scratch.

Whatever template you choose, just have your purpose in mind and think about which template is going to help you best achieve this.

Behind the Scenes 

Yes, this is a skeleton template for the Creative & Coffee newsletter, welcome behind the curtain!

There are so many features in the MailChimp design arsenal that I could sit and write an entire book, or at least an entire chapter, on going through them all. So I just want to point out the main features you should be aware of and then let you play around to see what fits you best.

Content 

To the right you will immediately see all the different sorts of content you can include in your email. You simply drag and drop these elements into place and then click to edit them.

Design 

First in this section is Page design, where you can set the overriding styles to be used throughout the email. So for example font families and heading styles to be used.

Next you can alter the template by section. So for example, you might like a different colour background for your header than the body of your email. You can also alter the text styles for that section.

Comments

The final option is not so much to do with design but rather about getting feedback from your collaborators. If you send a test email out to them, then their comments will appear in this panel.

 The Email

If we take a quick look at the actual page, just a few things to note. The small line at the top is the content preview, this is what people will see before they open your email, so make it something compelling.

Next, you can see that I’ve inserted an image to act as my header. I think it’s important to establish a visual connection with your brand early on. As I said in last week’s lesson, sometimes I get emails and I have no idea what blog they relate to because they don’t include any identifiable branding.

Next you can see I’ve used ‘text’ to create the introduction to the newsletter. In settings you can alter how many columns you want your content to be. You can also choose the boxed text option, to place a border around your text for emphasis.

I think it’s nice to include a few images in your email, especially if it’s a longer one, to break up the text. However, I wouldn’t recommend inserting too many images because you need to consider the load time as well as the fact most people access emails on a portable device. ie the screen is smaller and you don’t want your subscribers to have to scroll through hundreds of pictures to get through your content.

As you can see there is a lot to play with here and it’s just a matter of adjusting all the elements to suit your brand style.

Confirm

When you are finished designing click confirm and MailChimp will give you a list of things that you should double check before you send. At the bottom you will find the ‘send’ and ‘schedule’ button. If you want to send out your email straight away click send and confirm it.

If you want to schedule there are a couple of different options. You can pick a specific time in the future yourself or you can ask MailChimp to auto schedule it for you at the optimal time for your mail to be sent out to that list. MailChimp can send out email based on timezone as well, if you happen to have a list with a wide range of countries.

RSS Feed

Now, before we go, I know some of you guys are interested in sending your RSS feed content through to your mailing list. Feedburners can be unreliable and a little ungainly to look at so using MailChimp to send out your content is definitely a good alternative.

To do this, go to your list of campaign options and select RSS campaign from the bottom of your campaign type list.

First, you need to type in your URL of your RSS feed, you can usually find the links to your RSS feeds by looking for the little orange logo. You can also find it by looking at the code of your site. To do this, right click on your web page and a drop down menu will appear. Select the option, second from the bottom, ‘view source’. Click that and you will be taken to the code of your page. Press Ctrl + F and search for rss.

You should find something that looks a little like this:

<link rel=”alternate” type=”application/rss+xml” title=”Creative &amp; Coffee &raquo; Feed” href=”http://www.creativeandcoffee.com/feed/” /> the highlighted link will be your URL.

Beneath you have the option to choose how often your content gets sent out. This can be daily, weekly or monthly. If you haven’t posted anything within those time frames then no campaign will be sent out. When you first set up your campaigns, if you set it to monthly then MailChimp will include posts that fall within the month time frame, even those that you posted before you set up the RSS Feed with MailChimp.

You can also choose what days to send your campaigns out on. You also have the option of choosing to automatically re-size your images so they will fit into the template, which you will create in a few moments.

Now click ‘next’ when your finished, which is in the button right of the screen. You will be taken to your subscriber lists and you can select which list you want to send your feed to.

Once clicked you have the option to send it to your entire list, or a segment. We will talk about segments next week, so for now just go with your entire list. Click next.

Campaign Info

This will be the same as above, except your email subject will be filled out for you, along with your from name and email address. Check these are all correct and recognizable to your readers.

The rest is the same as regular campaigns, as above.

A/B Testing Campaign

Now this is getting into the advanced stuff that we will be covering more of next week. However whilst A/B testing is for more advanced users, in the sense that it works best with bigger email lists, it’s fairly straight forward to set up.

MailChimp gives you the following options to test; subject line, from name, content and send time.

You can have up to three combinations of the above and MailChimp will generate a different campaign for each variable.

You also select what percentage of your readers receive your tweaked email. For example, if it is something more experimental, you may only want 25% of your audience to receive the new email, rather than 50%.

To determine what your ‘successful’ criteria is you can choose from four options: by click rate, by open rate, by total revenue and by manual selection (eg just going to the reports page and picking which you think went best).

The rest of the set up is just like creating any other, normal campaign.

Obviously this is incredibly useful once you have started building a bigger audience. MailChimp recommends that you start measuring this when you get to the point where you can create segments of 5, 000 subscribers. I think it is still useful with less than 5, 000 but certainly you want to be looking at some pretty hefty numbers to make it worthwhile doing.

Conclusion

Another epic session guys. I hope that it’s not been too overwhelming for you, I know we covered a lot of ground this week!

The final chapter of our little series covers the advanced MailChimp features of how to use segmentation and groups and automation sequences.

If there is anything you need help with that we haven’t covered yet please feel free to give me a shout out in the comments below and I would be happy to help/ include it in next week’s post. Until then I will be hanging out on Twitter a lot this week, so please so come by and introduce yourselves!