Creating a Lightbox Subscription Form in WordPress

We received a lot of emails on how to create our Lightbox subscription form, so we decided to post step-by-step instructions.

Our Lightbox form will do the following:

  • Automatically load a subscription form in a lightbox when a specified webpage is called.
  • Give the user the choice of signing up for our newsletter, or opting out.
  • If the user signs up, we redirect them to a thank you page.

The first step is to download and install the necessary plugins as per their instructions:

CREATE A NEW PAGE TEMPLATE:
When we create the subscription page that will pop-up in the lightbox, we want to remove the header and footer. To do that in WordPress, we need to create a new page template. We’ll call it: lightbox-subscribe.php

  1. Copy your themes page template and name the new file: lightbox-subscribe.php
    • Remove all references to the header and footer
    • Place this code at the very top. This tells WordPress the name of the template:
  2. /*
    Template Name: lightbox-subscribe
    */
    ?>
  3. Save the file

CREATE A NEW SUBSCRIPTION AND THANK-YOU PAGE:

  1. Create a new page called “subscribe”
  2. Enter the following text: “Our mailing list rocks, so subscribe now”
  3. Make sure to include the Subscribe2 token in the page or you won’t have a form. The token is:
    
    
  4. To allow your readers to opt-out of signing in, put this code on the page as well:
    No Thank you
  5. On the right side of the WordPress screen you should see a section called: Page Template. Click on the dropdown and select: “lightbox-subscribe”. That’s the template you just built.
  6. Click Save
  7. Create a new page called “thank you”.
  8. Thank your reader for signing up.
  9. Place this code in the page:
    close
  10. Select the “lightbox-subscribe” page template as described above and click Save.

EDIT THE SUBSCRIBE2 PLUGIN TO REDIRECT TO THE THANK-YOU PAGE

  1. This part is tricky and dangerous. One wrong move and you’ll have to go back and upload the subscribe2.php file again.
  2. Got to your plugins, find Subscribe2 and click edit.
  3. Find the following code:
  4. //set this to not send duplicate emails
    $this->s2form = $this->confirmation_sent;
    } else {
    // they're already subscribed

    and change it to:

    //set this to not send duplicate emails
    header("Location:/thank-you");
    //$this->s2form = $this->confirmation_sent;
    } else {
    // they're already subscribed

4. Click “update file”. At the top of the plugin page WordPress will either tell you that you were successful or you made a mistake. If you did it correctly, congratulations! If not, overwrite your current subscribe2.php file and start again.

That completes the first major step; creating the Subscription and Thank You pages. Now let’s place them in a lightbox pop-automatically.

We need to create a new page template for triggering the lightbox :

CREATE A NEW PAGE TEMPLATE FOR THE TRIGGER PAGE

  1. Copy your themes page template and name the new file: lightbox-home.php
  2. Place this code at the very top. This tells WordPress the name of the template:
    /*
    Template Name: lightbox-home
    */
    ?>
  3. Place this code right before the footer call and then save the file. This will auto load the page titled “subscribe”:
AJS.AEV(window, 'load', function() {
          GB_show("Subscribe", "/subscribe");
     });

CREATE YOUR TRIGGER PAGE

  1. Create a new page called “welcome”
  2. Enter whatever text you want.
  3. On the right side of the WordPress screen under Page Template, click on the dropdown and select: “lightbox-home”. That’s the template you just built.
  4. Click Save

Now whenever someone visits www.your-site.com/welcome, they will automatically see a lightbox subscribe form.

I would like to thank Hani Musallam for his enormous help with this project.

10 comments for “Creating a Lightbox Subscription Form in WordPress

  1. Steve
    October 26, 2007 at 12:07 pm

    Really great post! Thank you

  2. June 10, 2008 at 4:41 pm

    I tryed to follow your instructions but when reading them i was lost.. i could use step by step for dummies version if you could.. i know basic html and wordpress but this blew over me.. your help is appreciated by all us dummies out there..
    Ibeen looking for something like this for 2 days you are the only one i can think of to ask..

  3. sbruner
    June 11, 2008 at 9:20 am

    Would be happy to help. Where are you getting lost?

  4. July 10, 2008 at 10:42 am

    yes a more detailed version for dummies would be appreciated.. please elaborate on how to or what is a page template and get detailed on this type of jargon. Like create a new page template and CREATE A NEW SUBSCRIPTION AND THANK-YOU PAGE, us noobs have trouble folloing this . please elaborate for us dummies.!! Thanks for great info in advance.

  5. August 9, 2008 at 9:03 am

    OOO, Interesting story))

  6. September 16, 2008 at 11:22 am

    Has anyone here ever tried to implement this with a contact form in a similar way it’s being done here with the subscribe plugin?

    I wonder if I couldn’t just create a contact form then paste all the contents into a page activated by the lightbox.

  7. shane
    September 18, 2008 at 11:11 am

    I followed the directions step for step and still haven’t had any luck getting it to work correctly. The lightbox for the Welcome page I created will open and display a page, just not correctly.

    I think the problem lies in the code here:

    AJS.AEV(window, ‘load’, function() {
    GB_show(“Subscribe”, “/subscribe”);
    });

    GB_show(“Subscribe”, “/subscribe”); — I tried adding the link to the actual subscribe page in here and it worked, but won’t render correctly.

    It’s a start though. Thanks for the help and any addition help from here out!

  8. December 6, 2010 at 4:26 am

    hi.. can someone please help me with this? i tried to follow the steps but it doesnt seem to work..

    thanks so much!

  9. April 28, 2011 at 1:09 am

    thats great man, its very helps. i need to create lightbox form without any plugin..
    thanks for your share

  10. Hafiz
    June 13, 2011 at 3:41 am

    Hey man,

    This is awesome and just what i was looking for. Can it work for a contact us. Would like to create a simple contact us rather than a subscription based.

Leave a Reply

Your email address will not be published. Required fields are marked *