MailChimp Subscription Forms

I create new subscription forms infrequently… long enough apart that I forget the procedure from one time to the next. Here’s how I do it:

Log in to MailChimp, then click Lists. Select the list for which you want to create the subscription form. In the top menu, click “Signup forms” (that’s their term for subscription forms). Select “Embedded forms,” which takes you to the form creation window.

If the signup form is the only thing on the page, like on this page, I don’t check “include form title,” letting the page title serve as the form title. But when the signup form is embedded later in a page, like on a blog post, I’ll use the form title.

I always select “Show only required fields,” which for me is email address, first name, and last name. The more information you ask for, the less likely they are to sign up. I click “Show interest group fields,” but we’ll do something special with them in a minute. I click “Show required field indicators” so that people understand they need to give me all three pieces of info. I don’t click “Show format options” because that’s more clutter for the subscribers to think about. I don’t click any of the “Enhance your form” options, but I do click “Enable reCAPTCHA” because it adds a Google reCAPTCHA checkbox that says "I'm not a robot" to your signup form, preventing spam bots from adding email addresses to your lists. Next, I click into the “Copy/paste onto your site” field which automatically selects all of the code. Copy.

Or not. If you’ve already created a signup form for that particular list, you can just reuse the form by copying the Raw HTML object that is the current signup form and pasting it on the page where you want the new form, then adjust a little of the HTML. The old form I was using was the one where you can sign up for Walk Appeal book updates. I’ve copied and pasted it onto a blog post where I’ll be collecting subscriptions to Outdoor Room Design book updates. Here are the changes I’m making:

First, here’s something I always do. Near the top, there’s this bit of code:
<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>
I don’t want any special MailChimp formatting… I want the text of the form to flow with the text of the page. So I delete this entire segment of code. With the recycled code I’m working with today, that segment has long been deleted. That’s another reason it’s good to recycle signup forms… it keeps all your customizations.

Next, I decide whether to include a form title. Because this form will be at the end of a blog post, I’m including it as noted above. That line of code is:
 <h2>Subscribe to get Outdoor Room Design book updates</h2>
This tag occurs right after the form action tag.

There’s a <div class=“mc-field-group"> tag for each of the three required fields. One little refinement: in my MailChimp lists, I use all lowercase for the field names (email address, first name, and last name) but I want them to appear in title case on the signup form (Email Address, First Name, and Last Name) so I change it once, and then it’s automatically the way I want it on all recycled signup forms.

MailChimp has a nifty feature known as Groups. A Group is a group of people on your list who match certain characteristics. I use three Group Sets (collection of Groups) in the Mouzon Design list:

I’m a(n)… This group let people tell me what they do. Academic, Appraiser, Architect, Attorney, Banker, etc. I have 25 Groups in this Set that focus on disciplines or interests involved in placemaking and architecture. “But wait,” you ask. “How can they tell you what they do if only the required fields show up on the signup form?” Good question. Roughly once per year, I send out my Eye Candy Swap email. It’s a curated collection of my best recent Mouzon Images work, and I ask them something like “hey, while you’re enjoying these, why don’t you tell me a little more about you? The more I know, the more I can tailor mailings so that I only send you stuff you’re interested in.” This includes a link to a page where the entire signup form is visible, including not only Group Sets, but also all of the other basic info like street address, etc. But I will NEVER ask for telephone numbers  again because I hate unsolicited calls.

I’ve bought… I only use this group for the Mouzon Design list. For the Guild Foundation list, the New Urban Guild list, and the Studio Sky list, this Group Set is omitted because those entities sell mostly services instead of products.

I’m interested in… For Mouzon Design, this Set includes the Catalog of the Most-Loved Places, Mouzon Design house plans and plan books, Mouzon Images, New Media for Designers + Builders, the Original Green, the Outdoor Room Design book, and the Walk Appeal Book.

At the beginning of each Group Set input checkboxes, there is this tag: <div class="mc-field-group input-group”> I add a style attribute at the end of each of the three Group Sets to say this: <div class="mc-field-group input-group" style=“display:none”>. What that does is to tell the signup form not to display this section.

Each Group has an input tag, with the attributes type, value, and name, and ID. This signup form has the following added to the end of the id attribute: “ checked” where the quotation marks are not in the code; I’ve simply used them to show that there’s a space before the word. So for this form, I want to cut the “ checked” from the Walk Appeal input tag and add it in the same place to the end of the Outdoor Room Design tag. What this means is that when someone subscribes, it will subscribe them to that Group without them ever having to see the Group Set. Cool, eh?

Three more things: Near the end of the signup form code, there’s a scary-looking line that says: </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups—> Problem is, the three things I need to do are below that. I experimented, and what I do doesn’t seem to break anything. Here they are:

There’s an <input type=“submit" tag, which defines the Subscribe button. If you want that button to say Subscribe, you’re fine. But if you want it to say something else like Enroll, Get Updates, or whatever, change the value attribute to whatever you need it to say.

For some reason I can’t figure out, the Subscribe button gets cut off at the bottom when I use the default signup form. So I add a <br/> tag between the </form> tag and the </div> tag. I suspect it’s a problem with my web app (Sandvox) and MailChimp, but since the fix is so easy, I haven’t worried about finding the root cause.

Sometimes, I’ll add the following text just below the <br/> tag: You'll receive an email from me with the subject line "Mouzon Design: Please Confirm Subscription." Click Yes to confirm your subscription for Outdoor Room Design book updates. This is helpful because several signup forms are on the Original Green site rather than the Mouzon Design site. I can’t get MailChimp to customize the subject line based on Group, so this seems like a decent workaround.



© 2012 The Guild Foundation Press