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!
Or you can try WisePops.com 🙂