By Gary Nugent

It’s always a good idea to build an email list with any site. I use the Aweber autoresponder service (there are many others) to handle the maintenance of mailing lists and their administration.

Autoresponder services allow you to create email opt-in forms and some, like Aweber, allow you to “skin” your forms (i.e. change how the form looks with various images and colors). Once your opt-in form is created, you simple copy and paste the code your service gives you onto whatever part of your pages you want your opt-in form to appear.

That’s typically somewhere in the sidebar so that the opt-in will appear on every page and post.

Lightbox Forms

Aweber also allows the creation of optin forms using Lightbox. Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the part of the page not used by the form.

This has the effect of concentrating the reader’s attention purely on the form.

The downside is that Lightbox driven forms pop up automatically when someone loads a page. And that can be both distracting and annoying for your reader, especially if you want your form to appear on more than just the site’s home page.

Triggering A Lightbox Form Manually

Depending on what you want, having your visitors ask to see your optin form by click a button or link might be a better option. It wasn’t clear if this type of behaviour was possible for Lightbox forms, but with a little bit of Javascript wizardry, it is certainly possible with the forms that Aweber creates. I can’t say if this trick will work with the forms created by other services, but I don’t see why it shouldn’t.

  1. On Aweber, select the the email list you want to work with; then click the Sign Up Forms tab.
  2. Click the Create a Signup Form button.
  3. On the form creation screen, just below the list of templates you can use, there’s an option called Type. This defaults to In-line. Change it to Lightbox:

    Aweber Lightbox Option

  4. Then finish designing and saving your form.
  5. In step 3, select the I Will Install My Form option. There is no HTML code option with Lightbox forms. You will only get a Javascript code snippet.
  6. Over on your blog, add the Header & Footer plugin and activate it (if you don’t already us it). This makes it much easier to set things up and changes made are independent of the theme used on your blog. So this is a better method than editing theme files directly.
  7. Highlight and copy the Lightbox Javascript code snippet.
  8. On your blog, go to Settings -> Header and Footer and paste the code into the Code to be added before the end of the page box on the Page head and footer tab.
  9. Now comes the javascript wizardry…copy this line of code and paste it into the Code to be added on HEAD section of every page box on the Page head and footer tab of the Header and Footer page.

  10. Now save the changes.
  11. The last part is to add a button or text wherever you want on your site – something like this line of HTML:

  12. You can change the Subscribe to my Email Newsletter text to whatever you want or replace it with an image for a button.
  13. Save you change and test. When you click the link, your Lightbox optin form should appear.

Credit for this trick goes to Marc Kline.

Tagged with:

Filed under: Building WordPress Blogs