Ever ran into a form that takes a bit of time to process and felt the need to alert the user by giving them a "processing" message? I'm sure you've seen these sort of messages at sites like Expedia or other travel sites. I ran across a need for one when developing a project at work and just didn't like the concept of submitting a form, going to a completely seperate processing page, and then the results page. The Lightbox Form is my solution for an in-depth form processing alert. It will show the user that something is happening after they hit the submit button and prevent them from hitting it again. Check out a Lightbox Form in action.

Lightbox Form makes use of a couple tools to make note of. It is built off a modified version of Lokesh Dhakar's Lightbox JS and uses deconcept's SWFObject to embed a flash processing bar.

Now, for a bit of explanation, the original Lightbox JS used a simple animated .gif to show the processing of an image loading. Initially, that's what I used for the Lightbox Form. However, when I further tested it, I came to find that Internet Explorer ends the animation in a .gif if a page is transitioning from one to another. So, I turned to Flash for a progress bar. While Flash is commonly misused in most sites, it can be very small in filesize and quite effective. In this case, I created a vector version of Lokesh Dhakar's loading.gif and filesize of the published .swf is smaller than that of the .gif.

How to use it

1. First, download all the necessary files.
   lightboxform.js
   loading.fla
   loading.swf
   loading.gif
   swfobject.js
   - or -
   Download all the files: lightboxform.zip
2. Next, you need to link the lightboxform.js and the swfobject.js to your Web page. <script type="text/javascript" src="lightboxform.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
3. Then, append rel="lightboxform" to your submit button inside your form. It should look something like this:
   <input type="submit" name="submit" value="Submit" rel="lightboxform" />
4. Finally, add the following to your CSS document:
   body {margin:0; padding:0;} #overlayfrm {background-color:#333; -moz-opacity:0.8; opacity:.80; filter:alpha(opacity=80);}
   Note: Adding body {margin:0; padding:0;} may effect your design, but this is needed. Adjust your containers accordingly.

That's it. There isn't a lot to it. The Lightbox Form is also customizable. If you would like to customize it, there are a few settings you should take note of.

• Step 3, in the directions for using Lightbox Form controls the color and opacity of the overlay.
• At the top of the lightboxform.js, there are six variables that need to be updated if the file is changed:
  var loadingImage = 'loading.gif'; // alt loading image var loadingSwf = 'loading.swf'; // loading swf and it's settings below: var loadingSwfWidth = '126'; // the width var loadingSwfHeight = '22'; // the height var loadingSwfVersion = '6'; // flash version of the loader var loadingSwfBgColor = '#333333'; // background color of the SWF

If you are having any issues, take a look at Lokesh Dhakar's troubleshooting section as it already covers most issues you could run into. If you have any other issues, feel free to post them here.

Credits

Jon C.

A co-worker @ Overit Media that helped me out when we were in a rush to get this project done. He helped edit the Lightbox JS file to use with a form.

Lokesh Dhakar

The author of the Lightbox JS which this project is derived from.

deconcept

The author of the SWFObject script which is used in this project.

Any comments/questions/suggestions for development regarding this? Feel free to leave any comments.