Capture Emails in a Pop-Up Window (Using Free Plugins Easy Fancybox & Contact Form 7)

Updated: July, 2016

We’re going to cover two super-simple yet powerful tools today for capturing email addresses from your visitors.

First, you’ll learn how to add a pop-up window in WordPress. And secondly, you’ll learn how to use Contact 7 (plugin) shortcode to fetch an email address and name from your visitor.

Ready freddy?

Step 1: Create an Email Form in Contact Form 7 Plugin

To use the Contact 7 plugin, open the Contact tab -> Add new and format the contact fields you would like (name & email is a good idea). Once it’s saved, copy the shortcode provided at the top of the screen.

Step 2: Install & Configure the Easy Fancybox plugin

From within WordPress -> Plugins -> Add New, search for “Easy Fancybox”. Follow the prompts to install and activate.

Open the Settings ->Media tab, and configure the plugin like this:

Step 3: Add Your Popup Trigger / Image

Let’s add a picture to our page that the reader will click on – to view the popup. Something like this:

IMPORTANT: when adding your picture, select the “none” in the link field. So it is just an image – it is NOT clickable. We’ll add the clicky clicky later.

So you should have an image in your post, as usual.

Step 4: Add the Popup

This is where it will get a tiny bit tricky if you’re not familiar with HTML. But I’m going to write it out for you – just copy & paste this, ok?

Now we venture to the DARK SIDE – the Text editor!!!

Scroll to the bottom of your post, where the new image is. It should look like this:

ABOVE your image, paste this line:

[info_box type=”note_box”]

<a class="fancybox-inline" href="#coolpopup">

[/info_box]BELOW your image, paste this line: Note that you have to add your contact form shortcode in there (from the Contact Form settings )

[info_box type=”note_box”]

</a><div class="fancybox-hidden" style="display: none;">
<div id="coolpopup">[ your contact form shortcode here ] </div>

[/info_box]

Step 5: Test Your Totally Free Popup!

You now have a popup with Contact Form 7 & Easy Fancybox. Contact Form 7 will send the email addresses & names to you.

Visit the Support Desk if you need help!