How to show MailChimp form in a Lightbox

In this tutorial I share how MailChimp opt-in form can be opened in a lightbox via Easy FancyBox plugin.

Live Demo

Step 1

Install and activate Easy FancyBox.

Go to Settings > Media and tick Inline content. Leave Images ticked.

Step 2

Create a blank file in a text editor like Sublime Text.

Paste the following:

	<a href="#mc_form_pop" class="fancybox-inline button">Your link/button text</a>
	<div style="display:none" class="fancybox-hidden">
	<div id="mc_form_pop">
	<!-- Begin MailChimp Signup Form -->
	<!--End mc_embed_signup-->
	</div>
	</div>

view raw gistfile1.html hosted with by GitHub

Paste the code from next step in line 7.

Step 3

Log into your MailChimp account, create/enter inside a list, go to “Signup forms”, go to “General forms” and configure the fields.

Click on “Signup forms” again, now click on “Embedded forms”. Scroll down, copy the code under “Copy/paste onto your site” and paste it into the file from previous step.

Here’s an example.

Step 4

Paste this full code wherever you want to have a link or button open up MailChimp opt-in form in a lightbox.

Step 5

Add the following in child theme’s style.css:

	@media only screen and (min-width: 481px) {
	#mc_form_pop {
	width: 460px;
	}
	}

view raw style.css hosted with by GitHub

That’s it!

OLD TUTORIAL (DO NOT FOLLOW)

In a small customization task that I took up yesterday, following was the requirement:

1. When a link is clicked, MailChimp opt-in form should open in a lightbox
2. When the visitor enters their information and clicks the Subscribe button, default MailChimp confirmation page will automatically open in a new tab/window.
3. When this tab/window is closed and the visitor comes back to the page in the site, the lightbox should go away and the page redirected to another.

Live Demo (click on the link below)

Read my Journal – Subscribe

Here’s how I did it:

1) Installed and activated Easy FancyBox plugin. Went to Settings > Media and ticked Inline content. Images will be ticked by default and should be kept in that state. Otherwise this method will not work.

2) Added the following in child theme’s functions.php:

add_action('wp_enqueue_scripts', 'mc_lightbox');

function my_footer_script() {
if (!is_admin()): ?>
<script type="text/javascript">
function closeFB() {
jQuery.fancybox.close();
location.href="http://google.com";
}
</script>
<?php endif;
}

where http://google.com is the URL to be redirected to after the form’s submit button is clicked.

3) Added the following where I wanted the text link that should open MailChimp form in lightbox to appear:

<a href="#mc_form_pop" class="fancybox">Read my Journal - Subscribe</a>

<!--End mc_embed_signup-->
</div>
</div>

Note that I have added onclick="closeFB()" to the Subscribe’s input button.

Reference: http://stackoverflow.com/questions/4398740/how-to-close-a-jquery-fancybox-from-button-click