summaryrefslogtreecommitdiff
path: root/src/old-no-longer-pub/2014-04-26_create-email-courses-mailchimp.txt
blob: 7beeb910d88a6a8b98a27f0f998821828104f2d4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
---
title: Create Email Courses With MailChimp
pub_date: 2014-04-25 12:04:25
slug: /blog/2014/04/create-email-courses-mailchimp
metadesc: How to set up email courses or drip campaigns using MailChimp
tutorial: True

---

I like to teach people how to do things, whether that's a simple tutorial on this site or a [big ol' book](https://longhandpixels.net/books/responsive-web-design). Lately I've been playing with the idea of a "course" delivered via email. 

I use MailChimp for my mailing lists and it turns out you can also use MailChimp to provide a timed series of tutorials as well, a bit like an email-based course. Basically I wanted a way to take sequential and otherwise related tutorials from this site and package them up in something that can be delivered via email.

While MailChimp can do this, it's not really the primary use case and it was not immediately obvious to me how to do it. MailChimp has great documentation, but it doesn't really cover this use case in detail. The MailChimp admin interface also appears to have changed a lot in the last couple years so many of tutorials out there on the web are no longer completely accurate when it comes to menu locations and such. 

This is how I ended up accomplishing what I wanted to do.

Everything that follows assumes you've used MailChimp before to at least send a newsletter. You'll also need to have a paid account because we're going to create a series of autoresponders, which (at the time of writing) are only available as part of paid accounts.

Before we dive in, here's how I want this to work: When a person signs up for the longhandpixels newsletter there will be a checkbox that says "Yes, I'd also like to receive a free 7-day course on responsive web design" or similar. When someone checks that box I want to 1) add them to the main mailing list and 2) start a series of emails that get delivered once a day for the next seven days. If they don't check that box then they should just be signed up for the main mailing list.

Note that you can do this in some sleazy ways that amount to tricking people into getting a bunch of marketing spam they don't want. Please don't do that. Life is short, don't waste people's time. It will just make people hate you and whatever you're offering. But if you have content people actually want, I think this is a great way to get it to them.

## Create the Form

The first step is to create a sign up form with a custom field that offers the option to also get the email course. To do that click the lists menu item to the left of the page in the MailChimp admin. 

Select the mailing list you want subscribers to end up on (or create a new list). That will take you to the list page where, along the top you'll see a series of tabs, click on "Signup forms". You should see three options, General forms, Embedded forms and Form integrations. Select the middle option, Embedded forms. 

![The link to the form builder](https://longhandpixels.net/media/images/2014/mailchimp-form-builder-link.png){: class="img-right"} You should now be on the form customization page. Here you can build your form however you'd like, the thing we need to do is add an extra field so our potential subscribers can take the 7-day course. To do that we'll use MailChimp's form builder, which you can get to via the link under the Form options menu. 

Now we need to add a new field, so double-click the Check Boxes option on the right, which will add a new checkbox field to your form. You can change the field label to something that makes sense. I ended up not displaying this in the actual form, but it's how this segment of subscribers will be identified in the next step so put something in there that makes sense. I chose "rwd_course". 

You can then set the text in the options box to whatever you'd like. I use "Yes, I'd also like to receive a free 7-day course on responsive web design".

[![MailChimp form builder](https://longhandpixels.net/media/images/2014/mailchimp-form-builder.png)](https://longhandpixels.net/media/images/2014/mailchimp-form-builder.png "View Image 2")
: Adding a checkbox using MailChimp's form builder

Alright, now go back to the initial form page and grab the embed code. This is curiously difficult to do. I may be missing something, but the only way I know of to get out of the form builder is to click Signup forms again and then once again select the middle option, Embedded forms. From here you can grab the embed code and customize it to your liking. You can see the example at the bottom of this page to see what mine looks like.

## Set up the Email Course

Now we have a way for people to join our mailing list and let us know they want the course. The next step is to set up the actual course.

To do that we'll need to create a series of autoresponders. Click the autoresponders link on the left side of the page and then click the Create Autoresponder button at the top of the page.

This will take you to the first step in the autoresponder setup process, which is essentially exactly the same as setting up your regular mailings, it just has a few extra options that allow you to control when it is sent out.

The first step is to select whichever list you're using. Then we want to narrow the list by selecting the "Send to a new segment" option. Click the drop-down menu and look under Merge fields for the checkbox option we created earlier. Select "rwd_course" (or whatever you named it), "one of" and the only option available.

[![Setting up the list segment in MailChimp](https://longhandpixels.net/media/images/2014/mailchimp-segment-options.png)](https://longhandpixels.net/media/images/2014/mailchimp-segment-options.png "View Image 3")
: Setting up the list segment in MailChimp

Hit the Next button and you'll see the screen that set what event will trigger the autoresponder and when the mail will be sent. The event we want to start things off with is "subscription to the list". Typically I send a welcome email to everyone who subscribes so I consider this to be first lesson in the course and thus send it one day from when someone signs up. You could, however, use this first autoresponder to send a kind of "thanks for signing up for the course, the first lesson will be here tomorrow" sort of thing, in which case I would set it to send "within the hour" after sign up (which is the shortest time MailChimp offers for autoresponders).

Other options here include the ability to limit which days of the week the mail is sent, for example perhaps not sending your course on weekends. To be honest I haven't touched this yet, but it might be worth tweaking delivery days down the road, based on your response rates.

The next screens are the same as setting up any other campaign in MailChimp, allowing you to customize the mail subject, email, name and other variables. There's plenty of [good documentation](http://kb.mailchimp.com/article/how-do-i-create-a-new-campaign/) on this stuff so I won't repeat it here. See the [MailChimp knowledge base](http://kb.mailchimp.com/home) if you're completely new to MailChimp.

The only thing I'll mention here is that I use a very specific campaign naming structure so I can see the order of emails sent at a glance. Since this will be the first lesson I would name it "RWD Course - Lesson 01". Without the sequential naming scheme it's impossible to look at a list of your autoresponders and know which one is which lesson.

From here you just add your first lesson, pick a nice theme and start up the autoresponder. 

So you have the form set up, and anyone who signs up will get lesson one delivered to their inbox a day later. 

Now you just need to rinse and repeat. Like I said, this is a little outside the typical MailChimp use case so unfortunately there's no simpler way to do it. Luckily you can save a bit of time if you go back to the Autoresponders list page (by clicking the autoresponer link in the left-hand menu) and click on the Edit drop down button where you'll see an option to "Replicate". 

This will essentially clone your autoresponder, keeping everything the same so all you have to change is the subject line, the autoresponder name (now "RWD Course - Lesson 02" or similar) and the actual content. Don't forget to force the plain text content to update as well since it won't, for some reason, always auto-update when you change the HTML content.

Then replicate again. And again. And so on. You can start to see why Nathan Berry is doing well with [ConvertKit](http://convertkit.com/) (which greatly streamlines this process). I don't mind the extra steps, and I like to keep everything in one place so I'm sticking with MailChimp even if my attempts to create email courses are a little outside the usual use case.

Be sure to let me know if you have any questions and if you'd like to see my responsive design course in action, here's the signup form:

<div class="form--wrapper">
<style>
.input--button, .package--button {
  display: block;
  background-color: #d05c1c;
  background-image: -moz-linear-gradient(bottom, #d05c1c, #e26f30);
  background-image: -webkit-linear-gradient(bottom, #d05c1c, #e26f30);
  background-image: linear-gradient(to top bottom, #d05c1c, #e26f30);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#d05c1c, endColorstr=#e26f30)";
  padding: 15px 25px;
  color: #fff !important;
  margin-bottom: 10px;
  font-weight: normal;
  border: 1px solid #c14b0b;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.19), 0px 1px 0px rgba(255, 255, 255, 0.34) inset, 0px 0px 10px rgba(0, 0, 0, 0.05) inset; }
.form--wrapper {
  padding: 2em 0; }

.form--wrapper form {
  margin: 0 auto;
  max-width: 18.75em;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  clear: both; }
  @media (min-width: 32em) {
    .form--wrapper form {
      float: right;
      clear: none;
      max-width: 15em; } }
  @media (min-width: 47em) {
    .form--wrapper form {
      max-width: 23.75em; } }

.form--fieldgroup {
  margin-bottom: 1em; }

label {
  display: block;
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 600; }

.label--inline {
  display: inline-block;
  margin-left: 8px;
  max-width: 21.875em; }

.input--check {
  float: left;
  margin: 0; }

.input--textfield {
  width: 15.3125em; }
  @media (min-width: 32em) {
    .input--textfield {
      max-width: 13.125em; } }
  @media (min-width: 47em) {
    .input--textfield {
      max-width: 17.1875em; } }

.input--button {
  max-width: 250px; }
  @media (min-width: 32em) {
    .input--button {
      max-width: 15em; } }
  @media (min-width: 47em) {
    .input--button {
      max-width: 250px; } }

.input--button__sample {
  max-width: 280px; }

.form--small {
  font-size: 90%; }

.img-open-book {
  margin: 0 auto 2em;
  display: block; }
  @media (min-width: 32em) {
    .img-open-book {
      float: left;
      width: 48%;
      margin-right: 1em; } }
.form--wrapper:before,
.form--wrapper:after {
  content:"";
  display:table;
}
.form--wrapper:after {
  clear:both;
}
.form--wrapper {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
.form--small {
font-size: 73% !important;}
</style>
<img alt="Build A Better Web With Responsive Design by Scott Gilbertson" src="https://longhandpixels.net/books/media/sample-chapter-image.png" class="img-open-book">
 <!-- Begin MailChimp Signup Form -->
<form action="https://longhandpixels.us7.list-manage.com/subscribe/post?u=f56776029b67b1c8c712eee00&amp;id=040927f84d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">

<div class="form--fieldgroup">
<label for="mce-FNAME">First Name </label> <input type="text" value="" name="FNAME" class="input--textfield" placeholder="Jane Doe" id="mce-FNAME" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat no-repeat;">
</div>
<div class="form--fieldgroup">
<label for="mce-EMAIL">Email Address</label> <input type="email" autocapitalize="off" autocorrect="off" value="" placeholder="jane@doe.com" name="EMAIL" class="input--textfield" id="mce-EMAIL">
</div>
<div class="form--fieldgroup">
<label for="mce-group[5529]-5529-0" class="label--inline">Yes, I’d also like to receive a free 7-day course on responsive web design.</label><input type="checkbox" value="1" name="group[5529][1]" id="mce-group[5529]-5529-0" class="input--check" checked="">
</div>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_f56776029b67b1c8c712eee00_040927f84d" value="">
</div>
<input type="submit" value="Send Me the Sample Chapter" name="subscribe" id="mc-embedded-subscribe" class="input--button input--button__sample">
<p class="form--small">
<small>We won’t send you spam. Unsubscribe at any time.</small>
</p>
</form>
</div>

And seriously, don't create spammy drip campaigns no one wants to read.

##Further Reading

* [MailChimp.com - Getting Started Autoresponders: An Experiment in Empowerment](http://blog.mailchimp.com/getting-started-autoresponders-an-experiment-in-empowerment/)
* [MailChimp.com - Advanced customization of MailChimp's signup forms](http://kb.mailchimp.com/article/advanced-customization-of-mailchimps-sign-up-forms)
* [MailChimp.com - Drip Email Campaigns – Setting Expectations](https://blog.mailchimp.com/drip-email-campaigns-setting-expectations/)
* [Smashing Magazine - How To Create A Self-Paced Email Course](http://www.smashingmagazine.com/2014/02/10/how-to-create-a-self-paced-email-course/)
* [ryandoom.com - Setting up a drip email campaign with MailChimp](http://www.ryandoom.com/Blog/tabid/91/ID/26/Setting-up-a-drip-email-campaign-with-MailChimp.aspx)
{^ .list--indented }