cymeradwyo.net  
 

How to add a lightbox form to WordPress

Here are the steps that I took to create the lightbox subscription form used on this site:

1. Download “Lightbox gone Wild” from this page.

2. Unpack the following files and save them to the “lightbox” directory on your site:

scripts\lightbox.js
scripts\prototype.js
css\lightbox.css

3. Save the HTML code for the lightbox as a file in the lightbox directory, eg. as form.html

4. To make the lightbox load automatically, make the changes listed on this page, but don’t add the last line of HTML to anything just yet.

5. Return to the Lightbox gone Wild site and search for a comment from “preaxz”.  Make the changes listed, so that the lightbox disappears when you press Escape or click in the shadowed area.

6. Create the following files within your WordPress theme directory:

— lightbox-cookies.php —

<?php
$lightboxcookie = $_COOKIE["lightbox"];
setcookie ("lightbox","1",pow(2,31)-1,"/");   // never expire
?>

— lightbox-header.php —

<!-- CSS -->
<link rel="stylesheet" href="/lightbox/css/lightbox.css" media="screen,projection"
type="text/css" />

<!-- JavaScript -->
<script type="text/javascript" src="/lightbox/scripts/prototype.js"></script>
<script type="text/javascript" src="/lightbox/scripts/lightbox.js"></script>

— lightbox-activate.php —

<?php
if ($lightboxcookie != "1")
{
echo "<input class=\"lbOn\" id=\"lbOnAuto\" type=\"hidden\"
value=\"/lightbox/form.html\">";
};
?>

7. Within the WordPress theme file header.php, add the following lines:

On the very first line (yes, before the DocType!) add:

<?php include "lightbox-cookies.php"; ?>

Before the </HEAD> tag add:

<?php include "lightbox-header.php"; ?>

After the <BODY> tag add:

<?php include "lightbox-activate.php"; ?>

8. Now upload the 4 files in the theme directory and the lightbox directory to your site!

Tags: , ,



10 Responses to “How to add a lightbox form to WordPress”

  1. 32gb micro sd Says:

    HI…
    First, thanks for your help. I have been using it for quite sometime.

    My question is along the lines of Shell’s: How to stop it from resizing images? I really liked it when it didn’t do that, and besides, it’s not resizing the images proportionally to the original image’s aspect ratio, distorting them in the process.

  2. 32gb micro sd Says:

    HI…
    First, thanks for your help. I have been using it for quite sometime.

    My question is along the lines of Shell’s: How to stop it from resizing images? I really liked it when it didn’t do that, and besides, it’s not resizing the images proportionally to the original image’s aspect ratio, distorting them in the process.

  3. Graham Says:

    My code and this entire solution has nothing to do with images – resized or otherwise!

  4. Graham Says:

    My code and this entire solution has nothing to do with images – resized or otherwise!

  5. Chris Valleriani Says:

    Very nice! However I have a question.

    When a lightbox is loaded, the form.php thats there, you can use

    Submit
    No Thanks

    to submit and no thanks basicly cancels the no lightbox. However, the submit button won’t work properly, and its pretty obvious why, its not apart of the form itself.

    Using

    For example will get the form submitted, but it opens up a new window rather then processing in the lightbox window like
    Submit

    Would. Basically I want to be able to process the SUBMIT in the actual lightbox window itself rather then submitting and the whole current window vanishing. Any ideas?

  6. Chris Valleriani Says:

    Sorry, was having issues with the below comment not being submitted, feel free to remove that comment.

    I was wondering with lightbox and what it displays in the actual lightbox (form.html/form.php), how to submit a form without the form vanishing on SUBMIT.

    What I'm speaking bout is:

    <button>Submit</button>
    <button>No Thanks</button>

    the submit button will load the content (submit.php) in the lightbox window still, so the whole window doesn't get reloaded!

    However, this doesn't work when working with forms. You need to use something like

    <input type=”submit” value=”Submit” />

    To submit a form properly. However, this way, like your system currently, loads the whole window rather then just loading the submitted data in the lightbox window.

    Is there any way to submit FORM content in a lightbox window without having the whole window refresh to the new page? So that it acts like <button>Submit</button> and loads the data INSIDE the actual lightbox window.

  7. Chris Valleriani Says:

    testing

  8. Graham Tappenden Says:

    I've been wondering how to do this, and at the moment I can only think that with a target=”_blank” you could force a new tab/window open for the resulting confirmation page. That would leave the original page loaded, but what would happen to the lightbox? I guess I'll have to try it out. The original page itself does not need to be updated, since it does not change.

  9. sam tsohonis Says:

    Yeah I am wondering this myself. I am thinking this is one of the more popular applications of LIghtbox Gone Wild, and perhaps not possible? Even the particletree demo only loads some stupid nipple picture on submitting the form. I haven't found an example that actually transmits info to a processing page. It's kind of frustrating, because if there were a solution it would save everyone time by posting it and if there isn't why the hell don't they just say that on the frickin site? I've wasted a day now messing around with the code and searching google. How bout a little respect for your developer community Particletree? sheesh!

    I leave this comment here because of course they've closed the comments on all related threads and don't have any contact info posted…

  10. Sakar's Crayola Digital Camcorder Wins PTPA Media Seal of Approval | Camera Soft Says:

    […] Cymeradwyo.net » Blog Archive » How to add a lightbox form to … […]

Leave a Reply

 Subscribe to my Newsletter 

    • wordpress lightbox form
    • lightbox form wordpress
    • wordpress form lightbox

 

By continuing to use this website site, you agree to the use of cookies. [more information]

This website uses cookies to give you the best browsing experience possible. Cookies are small text files that are stored by the web browser on your computer. Most of the cookies that we use are so-called “Session cookies”. These are automatically deleted after your visit. The cookies do not damage your computer system or contain viruses. Please read our privacy information page for more details.

Close