Fixing MailChimp Form Code So It Works With Your Theme’s Subscription Widget

If you’re using MailChimp as your email service, you may want to embed an opt in form into a web page, post or widget. A common problem you’ll find when doing this is all the extra code MailChimp adds to their forms commonly conflicts with different theme’s code.

If you’re switching to a new theme, trying to cut down on plugins or simply wanting to customize your subcribe form, you’ll need to strip out all the junk to avoid common problems with MailChimp form code.

There’s different embed code depending on which form you choose to use however the main thing is you remove all the code which can cause problems.

Finding The Code In MailChimp

You’ll find the different form code options by going to Lists > Forms > For Your Website > Sign Up Form Embed Code

You’ll find the Classic form contains a huge amount of code including Javascript and CSS which you don’t need.

Here’s the default code for MailChimps Super Slim Form

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<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>

<div id="mc_embed_signup">
<form action="http://yourdomain.com.us2.list-manage.com/subscribe/post?u=f2783bcb416fd9&amp;id=07b8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
 <label for="mce-EMAIL">Subscribe to our mailing list</label>
 <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
 <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->

The reason you need to strip out all the unwanted code is because your themes built in form and style sheet will provide what you need.

Therefore you can take out all css code and div tags so your code should look something like this before you paste it into your theme.

What we have left with here is basically the input type & form action tags and that’s it. Everything else can go.

If you’re form code includes Javascript, take that out as well.

If you’re using a theme which offers widgets for subscription, you’ll find you’ll need to remove most of the embed code to get your form working properly.

MailChimp do provide a plugin to add your form to your site, but this plugin doesn’t always display correctly based on my experience using it on several different themes.

Related Mailchimp Resources