MailChimp is the second most popular Email Marketing and Email List Management service, rated behind Aweber by many affiliates today. MailChimp offers a free plan which allows you to have 2000 subscribers and 12,000 emails sent out each month (that’s six emails per subscriber per month for free). If you need more than that, you will have to purchase a monthly subscription plan. The service itself is very good and MailChimp now offers a lot of additional features.
One of the reasons why MailChimp is not favored by lots of bloggers and affiliate marketers lies in its signup form design. The default MailChimp signup form doesn’t look the best, especially when compared to the default signup form from Aweber. If you look at the code from the MailChimp signup form, you’ll see lots of code which makes it hard to customize.
You are probably reading this because you already know this and you want an easy way to fix your signup form.
Just follow my easy tutorial and in a few minutes, you will have a MailChimp signup form that looks like the one shown on the right.
Better MailChimp Signup Form Tutorial
There are only a few steps and some code mods to get your signup form looking better:
1. Log in to your Mailchimp account.
2. Click on the Lists menu. Then click on the Forms link of the list that you want to create a signup form for.
3. On the forms and response emails dropdown, select Signup form
4. Click on create embed code for small form
5. Find this line in the code segment:
<form action="http://xxx.us1.list-manage1.com/subscribe post?u=5baacd70f453387d9cbc00fd9&id=3884facc0f" .....
6. Copy the entire URL and paste into something like Notepad because you will need it later.
There are three parameters that we want to extract from this line:
URL Value: http://xxx.us1.list-manage1.com …
U Parameter: 5baacd7…
ID Parameter: 3884f…
7. Now copy the following code to where you want to put your signup form.
e.g. In WordPress, you can create a Text widget and just paste the following code in:
<div style="padding: 10px; margin-bottom: 5px;" class="contentBox" id="subscribeForm"> <div style="text-align: left; margin-bottom: 10px;"> <form id="mysubscribeform" method="post" action="Paste%20the%20URL%20value%20here" name="mysubscribeform"> <input value="Paste the u value here" name="u" type="hidden" /> <input value= "Paste the id value here" name="id" type="hidden" /> <div style="margin-bottom: 5px;"> Email Address: <input value="" size="25" id="MERGE1" name="MERGE0" type="text" style="border:1px solid #BBBBBB;font-size:12px;padding:5px;" /> </div> <div style="margin-bottom: 5px;"> First Name : <input name="MERGE2" id="MERGE2" size="25" value="" type="text" style="border:1px solid #BBBBBB;font-size:12px;padding:5px;" /> </div> <div style="margin-bottom: 5px;"> Last Name: <input name="MERGE3" id="MERGE3" size="25" value="" type="text" style="border:1px solid #BBBBBB;font-size:12px;padding:5px;" /> </div><input value="Subscribe to list" type="submit" style= "-moz-border-radius:5px 5px 5px 5px; background-color:#018249; border:1px solid #BBBBBB; color:#FFFFFF;cursor:pointer;font-weight:bold; padding:5px;" /> </form> </div> </div>
8. Next, put the URL, U and ID values from Step 6 into lines 3, 4 and 5 (see the “Paste the…” placeholders in the code). You don’t have to change anything else in the code unless you have some HTML knowledge and you want to make some further modifications.
9. Save your widget and it’s done. You now have a decent looking MailChimp signup form.
Code Explanation and Further Modifications
I’ll now explain the relevant sections of the code you just used, in case you want to make additional modifications.
Line 1 defines a box for your subscriber form. You can change how much space you want between the labels, text boxes and the border by changing the padding values.
Line 2 defines an inner box that aligns everything to the left. You can align all elements to the right by changing the word left to right.
Lines 3 to line 5 are extremely important because it’s how people can sign up to your mailing list by sending the request to the right web address and passing the correct User and ID values. If your new MailChimp form is not working correctly, recheck the values you pasted into this section.
Line 8 displays the email address text box. You can change the length of the text box by changing its size. If you want to change the color, modify the color value #BBBBBB.
<input value="" size="25" id="MERGE1" name="MERGE0" type="text" style="border:1px solid #BBBBBB;font-size:12px;padding:5px;">
I have also put up a video which walks you through this process.
[wp_lightbox_prettyPhoto_video link=”http://www.youtube.com/watch?v=H5mS-bBYwCc” description=”Handy video tutorial (sorry… no sound).” source=”http://www.eblogcamp.com/wp-content/uploads/2011/08/mailchimp-video.jpg” title=”How To Create A Beautiful MailChimp Sign Up Form”]
What do you Think?
I hope this tutorial helped you. Make sure to post a link to your new MailChimp signup form in the comments.