MailChimp-friendly Signup Form

If you’ve read this post, you may have come across the MailChimp integration. So I thought I’d write a short post about how to have a simple MailChimp signup form that can work with anyone’s list without having to go and get the embed code from MailChimp.

In WordPress, there are lots of ways you can create an opt-in form. You could use Gravity Forms, you could use MailChimp for WordPress, or one of the many other plugins and services available that integrate with it.

But sometimes, all you need is a simple form without a plugin or anything fancy.

The embed form code from MailChimp is extremely simple, and there’s just one piece that is specific to your list and account โ€“ everything else is generic and will work for anyone.

So here’s a regular embed form code:

<div id="mc_embed_signup">
        <form action="MAILCHIMP FORM ACTION GOES HERE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
        <div class="mc-field-group">
            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email address">
        </div>
            <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>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d1111f5d43491b616846d9d71_834d091b2d" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="Sign Up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
            </div>
        </form>
        </div>

In line 2, do you see where it says ‘MAILCHIMP FORM ACTION GOES HERE’?

That’s the only unique part of the whole form. The form action tells the form where to subscribe the person who fills out their email address. So all you need to do is go grab the form action from your MailChimp account (where the signup form code lives).

Now you might be wondering, if you have to go there anyway, why not just grab the full code from there? Above, you can see the mostly default code from MailChimp, but it doesn’t have to be. As long as you keep the input fields and the form action, you can have whatever you want in this form. You can change the classes, add divs, remove divs, etc. This allows you to have your form โ€“ made the way you like, that you can style comfortably, and still connect easily with MailChimp.

You can even get fancy with it and add some AJAX so the page doesn’t change (currently, after the form is submitted, the user is taken to the success page you set up with MailChimp). But that’s a tutorial for another post.

So what you should do is, create a form you like, with the right classes and div’s, and then give it some basic styling, and keep that together (create a small GitHub repository for yourself). Then whenever you need a MailChimp form, you just grab your saved work and you’re off to a running start.

If you’re using Blogger, WordPress, Squarespace, or any publishing platform that allows you to add code (so in WordPress, in the regular text editor, just click theย Text tab), then you can use add this code there and it’ll work!

Here’s a lightly formatted version of the form you can use as a template. ๐Ÿ™‚ You can see what it looks like below the code.

<style>
#mc_embed_signup {
    background: #F7F7F7;
    padding: 20px;
    padding-bottom: 30px;
    text-align: center;
}
#mc_embed_signup_scroll {
    display: flex;
    justify-content: center;
}
#mce-EMAIL {
    padding: 10px;
    border-radius: 0;
}
#mc-embedded-subscribe {
    padding: 10px;
    margin-left: 10px;
    background: #fff;
}
</style>
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="MAILCHIMP FORM ACTION GOES HERE" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<p>You can add some text here if you like</p>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group"><input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" placeholder="email address" /></div>
<div id="mce-responses" class="clear">
<div id="mce-error-response" class="response" style="display: none;"></div>
<div id="mce-success-response" class="response" style="display: none;"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input tabindex="-1" name="b_d1111f5d43491b616846d9d71_834d091b2d" type="text" value="" /></div>
<div class="clear"><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Sign Up" /></div>
</div>
</form></div>

 

You can add some text here if you like

 

And that’s that folks. A simple signup form you can get a running start with. ๐Ÿ™‚