To Lightbox Or Not To Lightbox, That Is The Blogging Question


To Lightbox Or Not To Lightbox, That Is The Blogging Question

You will have seen many of them and probably filled in a few yourselves whilst browsing online, but one question that always crops up in blogging circles is whether or not you should include one on your own site.  What am I talking about?  Lightbox subscription forms of course!

What Is A Lightbox?

A lightbox (in blogging terms) is a subscription box that appears when you visit a website.  As you are reading this, you will have probably seen my lightbox appear at some point when you got to the site.

Lightboxes have gotten a bad name recently, as many view them as popups.  I suppose “technically” they are, in the fact that they appear on a site without clicking anything, but the BIG difference is that they aren’t adverts, they are dedicated opt-in forms to encourage people to subscribe to your site.  Popups also tend to open up in a new window, whereas a lightbox just appears within the existing window and can be closed easily.

Admittedly they do divide opinion, but you can’t really argue with the fact that they work.  They are great for encouraging people to subscribe and join your email list and build up a loyal set of followers and customers to send offers, promotions, latest content, etc. too.

I recently talked about email subscription landing pages and how they boosted my conversion rate by 1284%.  That is by far the most effective way to get people to subscribe, but the second best way is by using a lightbox.  What’s better is that you can use both (or more) on your site to really encourage subscribers.

I use AWeber to manage my email list, create Newsletters and an eCourse to send out to my subscribers.  AWeber is the industry standard email subscription provider, used by hundreds of thousands of professional online businesses; it is really easy to use, offers great performance tracking and lets you manage your email list for your site.

AWeber allows you to create a lightbox webform (as well as other types) that you can easily place on your blog with a bit of code.  Let me show you how.

How To Create A Lightbox With AWeber

First you need to ‘Login’ to your AWeber account (Sign up for an account here if you don’t already have one).

When logged in, navigate to ‘Sign Up Forms’ and then click on ‘Create A Sign Up Form’.


This will take you to the ‘Web Forms Editor’ where you can create all different kinds of subscription boxes and forms for your site.  There are 3 stages to the process;

  1. Design
  2. Settings
  3. Publish

1. Design


Before we do anything, we need to make sure we select the lightbox setting.  Scroll down the page and make sure you have ‘Form Type’ selected from the dropdown box.  Next to that, change the Type from ‘In-Line’ to ‘Lightbox’.


Now that we have the lightbox selected, we need to edit the settings for how and when it appears.

Click on the ‘Advanced’ tab underneath and you will have a few options to play with.  You can select how you want the lightbox to appear (Fade In, Slide From Top, Slide From Bottom, etc.), setup a delay of when you want the lightbox to appear when someone is on your site and, most importantly, the recurrence of how often it will display (Always Display, Display Once or Show Every X Days).

You probably don’t want to select the ‘Always Display’ option, as that can get a bit annoying to visitors.  I tend to go with ‘Display Once’.  That way, if people choose to opt-in or not, they won’t keep seeing the lightbox every time they visit the site.


Once you have done that we can go about creating our web form.

There are a ton of templates that you can choose from, or if you are the creative type, you can create your own (like I did).  I won’t go into too much detail here as your lightbox form will be unique to your site.  Just make sure you make it clear what people are signing up for.

Quick Tip: Make your lightbox form a maximum of 300px wide.  That way, it can still be viewed on a smart phone without being annoying.  Anything wider and mobile visitors won’t be able to close it easily and get to your site.


2. Settings


The next part to setup is the ‘Settings’ section.  Here you can name your newly created web form (i.e. My Lightbox Form) and setup navigation to custom ‘Thank You’ and ‘Already Subscribed’ pages.  Setting up these pages on your own site looks a lot more professional, though AWeber does offer their own ‘Basic Version’ of these pages.

This section is pretty straight forward.  Click on ‘Save Your Form’ and ‘Go To Step 3’.

3. Publish


All we have to do now is transfer it to your site.  Click on the ‘I Will Install My Form’ section and copy the code that is shown.  That is your unique code for the web form that you have just created.


As this is a lightbox, we need to make sure that the code is accessible on every page of your site.  That way, it doesn’t matter what page people are viewing, the lightbox will appear as we have set it up.

Head on over to your website and login.

We are going to place your code in a widget.  So navigate to WordPress Dashboard > Appearance > Widgets and create a new ‘Text’ widget in your primary sidebar.

Simply paste in your code in this text widget and hit ‘Save’.


That’s it! 

You will now have your newly created lightbox appearing on your website.


What is your opinion on using a email subscription lightbox?  Do you use one?  If not, why?  Please let us know your opinions by leaving a comment below.

About Matt Smith

Matt Smith is the founder and editor of OnlineIncomeTeacher. He is a Professional Blogger, SEO Consultant & Web Developer, running a number of sites from the UK. Connect with him on Twitter, Facebook, Google+ and LinkedIn.

  • Andi the Minion

    Excellent post Matt, this is one of those things I never got round to learning how to do and this shows me everything I need. Brilliant is all I need to say and it is great to see you writing so much quality content.

    • Hi Andi,

      Glad you liked it. Think it’s one of those things that people would like to add to their sites, but just don’t know how. Really easy to do, just the Lightbox option is a bit hidden away that’s all.

      Haha, Just wish there was two of me, one to write content and one to do everything else involved in running the site 🙂

  • Clair Trebes

    Perfect post Matt! This is going on the new look clair trebes online site as soon as it’s ready! 🙂 you’ve made this look so easy! I always wondered how to get it right!

    • Hi Clair,

      That’s because it’s pretty easy to do! Certainly a lot quicker to do than write a tutorial about how to do it 🙂

  • Nick Loper

    Oh wow I had no idea you could do that all from within Aweber — thought you had to buy some 3rd party software. Not a fan of pop-ups but think I might test this out…

    • Hi Nick,

      Can’t say I’m a big fan of pop-ups either, but I do think email lightboxes are viewed a bit differently. They do work though. I get significantly more people signing up via my lightbox that my sidebar/end of post opt-in boxes.

  • Aescopri

    Hmm… Though, how would you do that for Blogger? The AWeber lightbox is all installed on my WordPress website (thanks to you! c:), but I have a separate blog on Blogger that I use as a personal site. How would I do that, though?

  • GLC

    Tank you soo much matt, you have really piqued my interest here…

  • Jason M Stallworth

    Thanks for this! I had resize mine and make it smaller to be ok on Mobile.One question – what if you only want a specific LightBox showing up on specific pages, and other Lightboxes showing on other pages? Right now I manually paste the code of the LightBox I want into those pages but this is a tedious manual process. Is there an easier way? Thank you!