Creating a Lightbox Subscription Form in Wordpress

October 22nd, 2007  |  Published in category: Wordpress Technical  |  1 Comment

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
*/
?>
  2. 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: 
    <!--subscribe2-->
  4. To allow your readers to opt-out of signing in, put this code on the page as well: 
    <a href="#" onclick="parent.parent.GB_hide();">No Thank you</a>
  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: 
    <a href="#" onclick="parent.parent.GB_hide();">close</a>
  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-&gt;s2form = $this-&gt;confirmation_sent;
} else {
// they're already subscribed

    and change it to:

    //set this to not send duplicate emails
header("Location:/thank-you");
//$this-&gt;s2form = $this-&gt;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
*/
?&gt;
  3. Place this code right before the footer call and then save the file. This will auto load the page titled “subscribe”:
<script language="javascript">
AJS.AEV(window, 'load', function() {
          GB_show("Subscribe", "/subscribe");
     });
</script>

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.

One Response to “Creating a Lightbox Subscription Form in Wordpress”

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

    Really great post! Thank you

Leave a Reply