WP SITES

2691

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. Dear Brad, thanks for the infos. What I experienced actually is that even if I do what you wrote, there are problems with the dropdown menus, which don’t work at all – it put the answers under each other, so you can not choose.

    When you first embed the form, it’s okey, but after any changes in the text (not even the form), and it doesn’t work anymore.

    Do you have any idea how to solve it?

    Thanks a lot!

    Regina

  2. Thanks for the info! Just what I was looking for. But, I do have another question – how can I get the button to be inline with the email field, like you have above?

    • Hello Kevin

      I created a new widget with the class header-box and used this CSS:

      .header-box .enews-widget input {
	width: 43.5%;
}

.header-box .enews-widget input[type="submit"] {
	width: auto;
}

      This works for one theme and will need modifying for all others depending on other factors.

Leave a Reply