Lightbox Bug Tracking with Wufoo

Mar 7, 2007 by admin    1 Comment     Posted under: Uncategorized

First, a plug for Wufoo–it’s an excellent web-app from the guys at Particletree, and it enables just about everyone to make really slick forms. Now, on to the good stuff: I’m always looking for an unobtrusive bug tracker for my development projects, and by combining a custom-form from Wufoo and lightbox techniques, I’ve got pretty useful one.

* To get started, head to Wufoo and sign up for one of their accounts.

* Build a form using their very easy-to-use interface, they even have an example bug-tracking form. You can specify how you want the form handled after the user submits it, mine is setup to email me.

* Wufoo has now created your form, and given you several options for integrating it into your own website. You’ll want the option that says “Full Page Form Code.â€? Take their code snippet (which is a copy of the Wufoo code used to create your form) and paste it into a new, blank HTML file. I’ve called this file “load_wufoo.html.â€? Whatever you call it, remember it, you’ll need to reference it in the next step.

* Now you want to create another file which will incorporate a few includes (our lightbox files and the ubiquitous prototype.js) and call our bug-tracking form (load_wufoo.html) into a lightbox (don’t worry, you can download these a bit later in the post.) I’m using code based off of Noah Winecoff’s work with lightbox and iframes. You might want to edit the lightbox.css and lightbox-iframe.js files and adjust your iframe size to match the length and width of your form you built with Wufoo.

That’s it, you’re ready. You can get fancy with the way you let your users call the bug-tracker, but mine is pretty simple, and you can try it here:

* Download prototype.js
* Download lightbox.css
* Download lightbox-frame.js
* Download bug_track.html (this is the file that will display your link for users to click)
* The only other file you’ll need is the load_wufoo.html you create at Wufoo.

* You can download my complete source here. Be sure to change the line in load_wufoo.html that sets the source of the iframe (src=”http://username.wufoo.com/forms/form-name/” mce_src=”http://username.wufoo.com/forms/form-name/” ). Remember, you’ll get this code from the Code Manager section of Wufoo under the “Full Page Form Codeâ€? link.