MailChimp Signup Form Inside Foobar!

This demo shows you how to include a mailchimp subscribe form inside your Foobar.

Firstly, you need to get your form code from the Mailchimp site. It will look similar to this:

<!-- 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://themergency.us6.list-manage1.com/subscribe/post?u=67dd63577d20c29e7beb3dc5a&amp;id=200ac81810" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<label for="mce-EMAIL">Subscribe now!</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-->

Alter the code slightly, by removing the link and style tags at the top. Then set a inline style for the #mc_embed_signup div so that it is hidden. And then remove the div surrounding the submit button, so that it does not wrap to the next line. You should be left with something similar to:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" style="display:none">
<form action="http://themergency.us6.list-manage1.com/subscribe/post?u=67dd63577d20c29e7beb3dc5a&amp;id=200ac81810" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<label for="mce-EMAIL">Subscribe now!</label>
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
	<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
</div>
<!--End mc_embed_signup-->

Paste that code into your WordPress page or post, or add it directly to your theme’s header.php – it is up to you. (if you are adding it directly into a page, then you might want to put it all on one line so that WordPress does not add any line breaks)

Then create a new foobar, and set the message to:

{{include:#mc_embed_signup}}

This will “pull” in the contents of the div and show it inside the foobar!