How to Create a Better MailChimp Signup Form

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:

Source code    
<form action="http://xxx.us1.list-manage1.com/subscribe post?u=5baacd70f453387d9cbc00fd9&amp;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:

Source code    
<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.

Source code    
<div style="padding: 10px; margin-bottom: 5px;" class="contentBox" id="subscribeForm">

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.

Source code    
<div style="text-align: left; margin-bottom: 10px;">

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.

 

Source code    
<form id="t4h-subscribe" method="POST" action="http://coupon-wall.us1.list-manage.com/subscribe/post">
       <input value="xxxxx" name="u" type="hidden">
       <input value="xxxxx" name="id" type="hidden">

 

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.

Source code    
<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.

 

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.

29 Comments

  1. Hey Kirk,
    I havent used MailChimp yet, I actully didnt even know about it lol, I was recently thinking about using Aweber, but now i’m going to check this out.
    Thanks for the Details, I love the Code Segments.

    • I do recommend that you start with MailChimp because it’s free (to a limit), so you can start designing your newsletter content at the same time as attracting subscribers. Don’t start with Aweber right away because right now you don’t know how many people will sign up (and you will be paying a monthly fee). Note also that you can export your contacts from MailChimp to Aweber later. That’s the cheapest solution for you.

  2. Hey Kirk,

    Great Post. Very helpful for beginners. Thanks for sharing the awesome stuff.

    Btw. you can also add some hover styles in the input and submit button.

    • Hi Devesh,

      Glad to see you here. I just checked out the blokube site. Very interesting, I will have to add your site into my collection of niche social news sites. Have a great weekend!

      BTW, great idea, will have to update this post.

      • Hi Kirk,

        Great :). Would love to see you over there. Thanks :)

  3. Using MailChimp since years now, very well thought guide, I am sure it will come handy to many people, thanks Kirk.

    • It took me a while before I decided to modify the MailChimp code, but now I am more inclined to make my own unique sign up form. Do you have much experience with MailChimp? Campaigns and the autoresponder are a bit confusing, because in Aweber, they are under one name “Follow up messages”.

      • Not using it an awful lot but I had no problems so far, I love the stats, they are just made so awesomely looking and professionally as well

  4. Hi!

    Thanks so much for this post. This was really helpful! Quick question. My form looks great, and works accept for that fact that every time you enter a name and email, it goes to the errors page link and says there is an error and makes you fill in your info again… even though the info was correct. Any thoughts?

    Thanks!

    Bobby

    • Hmmm… check the tag again and pay attention to the “action” attribute. Your URL in the action attribute is probably wrong. Did you copy that URL from the embed form from MailChimp? Also check the two IDs again. Hope that helps Bobby.

  5. Nicely detailed post you got there. I could do your steps and change my blog although I know theirs a basic answer to this. Hopefully you can help. I need to center the mailchimp form where you enter your email address and name and that. I just installed a mailchimp plugin and I don’t know what part to edit in my blog. Is it somewhere in the plugins editor under mailchimp? I cant find where and what I need exactly..driving me nuts :D

    Thanks

    • Dan, to center the form, you just need to wrap the whole code with a DIV statement. Let me know if this works out for you and contact me if you have problems.

  6. Hey Kirk, thanks for taking the time to post this. Best MC form tweak tutorial I’ve seen. Your work has made my site look much better!

    I made a couple minor tweaks: widened the inputs, changed the order, and made the button a different color. Super easy, especially with your code explanation.

    Thanks again!

  7. Kirk,
    Thank you! This was clear, helpful, and best of all, does not generate HTML errors as does the default Mailchimp form.
    With kind thoughts,
    Alec

  8. Very informative. Thank goodness I bumped into this How-to. Now my MailChimp sign-up form looks neat without the dynamic response coming out when somebody opts in.

    Your instructions are easy to follow. Kuddos!

  9. Great, this look 200 times better than MailChimps default forms. To make it even neater you can include those onfocus/onblur values, so your input fields say “Enter the name here” or something like that. On click in the box it disappears on click somewhere else it re-appears.

    Anyways, thank you very much, this is what I have been searching for, for several hours.

  10. SUPER MEGA THANK YOU!

    Just awesome tutorial! I’ve been struggling with that damn grey box for so long!

    Thank you thank you!!!

    Dave

  11. Thanks kirk,
    Im searching this type of post. You explain very clearly. Mailchimp is very difficult to cusotmize. Now I got my solution.

  12. Thanks! I have been struggling most of the day trying to change some simple things on my mail chimp sign up form.

    How can I make the e-mail address required?

  13. eeek! I just tried out my form, and it didn’t work. I got a weird 404 page from Mailchimp that looked very unmailchimp-like.

    • okay, I got it figured out! And, it appears you’ve got the field forms mislabeled. You’ve got:
      Email Address id=”MERGE1″ and name=”MERGE0″–they should both be MERGE0
      First Name name=”MERGE2″ id=”MERGE2″–they should both be MERGE1
      Last Name name=”MERGE3″ id=”MERGE3″–they should both be MERGE2

      Now, perhaps that depends on how you have set some thing sup in mailchimp? I’m not sure, but I figured it out when I was testing to make the e-mail required.

      Thanks for your post–I never would have figured this out without it.

  14. Great tutorial! I’d looked everywhere and yours is the easiest and most clear. Thanks!

  15. I recently discovered my sign-up form wasn’t working anymore. I tried to figure out what the problem was, but didn’t have any luck. I was on live chat w/ a tech at Mailchimp, trying to fix it, and they said I’d just need to create a new form and embed it. In doing so, I discovered Mailchimp changed their code, and a small change that could be made for it to all work:

    Replace this part:

    With this new code:

    Note that the URL is slightly different. Mine has a 2 after the manage where as before there wasn’t a number. You might need to go through the process of getting the embed HTML code from the mailchimp site for a new form to make sure you have the right URL.

    • shoot, my code didn’t show up & not sure how to fix that.

  16. Thank you! I had been struggling for days to try to get a MailChimp form to work like an Aweber form.

  17. Hey Kirk,
    A very nice post.
    Looks as if you really have explored both MailChimp and Aweber. I am quite new into this world of internet marketing and currently using MailChimp as an email marketing tool.
    I have also designed the sign-up form for my website using MailChimp. But, will surely try out this method to give it a better look.

    Thanks again. :) :)

  18. HEY Kirk,

    Thanks for the post, I have a Question! There is also a Create form tool on mailchimp, but when I use the source code in my text widget, it completely !@# up my style! I have tried to change some of the codes but nothing seems to help. My question therefore is: “How do I place my created form into my sidebar, with the right height and width?

    Thanks For your advice