We’re going to cover two easy yet powerful tools today. First, you’ll learn how to add a pop-up window in WordPress. And its so easy, you can add it to any link in your posts, pages, or widgets. Secondly, you’ll learn how to use either MailChimp sign-up code, or a Contact 7 (plugin) shortcode to fetch an email address and name from your visitor. Ready freddy?
Step 1: Fetch your newsletter list code
In MailChimp, you go to Lists->Tools Icon ->Forms -> For your website -> Embed Code and copy the code provided.
To use the Contact 7 plugin, open the Contact tab -> Add new and format the contact fields you would like. Once its saved, copy the shortcode provided at the top of the screen.
Step 2: Download the Easy-Modal plugin
A modal window is another word for pop-up window.
From within WordPress -> Plugins -> Add New, search for “Easy Modal” and install the plugin by Wizard Internet Solutions.
Open the Settings -> Easy Modal tab, and paste the newsletter list code (or contact form shortcode). Save the window. And then copy the “Code to Copy” field. It should look like: “eModal eModal-1″.
Step 3: Add the Pop-up Window to your Link.
Create a link in a post, page or widget that will open the new pop-up window. In posts and pages switch to HTML view. In widgets, you will need the link code. A link in HTML, looks like this:
Click here to open a pop-up window!.
When you aren’t actually linking to a new site, but instead opening a pop-up window, change the link to look like this:
Click here to open a pop-up window!
Then add the class that you still have copied to your clipboard (from step 2) like this:
Click here to open a pop-up window!.
Step 4: Add some style
If you are comfortable with editing your stylesheet (use FTP please!!) you can add these lines to the bottom of your Child Theme’s style.css file:
#eModal-Container {
border: 2px solid white !important;
padding: 5px !important;
background: #EEe !important;
color: #777;
}
