How to Create Lightbox Popups in WordPress

By Nathan Segal

Building an email list is one of the highest priorities for a business owner. You can build an email manually through meeting people and obtaining their permission to add their names to an autoresponder, you can build the list using squeeze pages, subscription forms on a website or through a lightbox popup.

Essentially, a lightbox popup is an option form which appears on a web page once the site has loaded. They come in many forms. Some function as a standalone plugin which you install in WordPress while others are created in autoresponder programs like AWeber. In this article we look at a WordPress plugin and the type of lightbox you can create with AWeber.


WordPress Lightbox Hover

When doing a search, you will find there are many lightbox options and they all have their own characteristics. Some are simple; others are complex and you might have to test out several of them to find one which will work for you.

In this section we will install the Sticky Email Opt-in Widget. Simply download the plug-in and go to the plug-ins page in the Dashboard. Click on Add New then Upload. After that, click on Browse, find the downloaded plug-in and click on the Install Now button to install it. Once the plug-in is installed, activate it.

Next, click on the Sticky Email heading in the Dashboard.

On the AddSticky page, click on the link at the top and you will be directed to a signup page.

Add the name of your site, your email address and a password. After that the following screen will appear:

Here, choose Collect Emails and middle of the page then click on the blue Get Started! button.

In Step 1, you write out the message and the call to Action. You can also activate the Advanced Options and upload your own button.

In this section you choose the appearance. You can stay with the default or enable the Advanced Options and change the text color, background, etc.

In Step 3 you choose whether you want to have the popup show on every page or specific pages (which you designate by URL). You can also set it to appear when the user arrives at your page or when they try to leave.

When you click on the Save, Get Code and Preview button at the bottom, you are taken to this page, which gives you the code for the popup to be inserted before the closing </body> tag on your WordPress site.

Here's what the final popup looks like. And that's it.

Create a Lightbox Hover with Aweber

In this section we will create a lightbox hover using AWeber, a popular autoresponder program.

Here is a simple lightbox hover form which I created for my travel site. When the site loads, the lightbox slides down from the top 5 seconds later.

When you create a lightbox hover you can customize it or make use of the many templates in Aweber. When you create a list in Aweber you have the ability to design forms for your site. These can be optin forms which can look like the screen shot above….

…or you can add code from a form into a squeeze page or sales page.

Once you build a list in AWeber you can make use of the signup forms and there are different options you can choose. As you can see in the screen shot above, I have two forms for my travel site, one of which is the lightbox hover. To build a lightbox hover, click on the green Create Sign Up Form button.

This brings you to the Sign Up Forms page. Here, you design the form, choose the settings then publish it. In the middle are different templates designs. At the bottom left is the Show More heading and at the bottom of this section is the Type heading. When you click on the Show More heading…

… the next page brings up a list of template and the one we are looking for is Hover Forms. Also, the Lighbox option has been selected and this option darkens your web page when the lightbox appears. It can be set to always appear or only appear once. It can fade in or slide from the top, bottom, left or right. You can also set how long you want to wait before lightbox appears. This can be set in seconds.