4 Lightbox Form Solutions

4 Lightbox Form Solutions

Posted by Rainey

Last week I built a mini site for a book launch where the entire experience is on one page of tabs. The special offers tab required collecting a bit of user information which requires a form.  I didn’t want the form cluttering the special offers tab up and leaving the main view for the form felt gross.  This is a perfect opportunity to place a form in a popover or lightbox. 

 

If Platform == WordPress

For me, it turned out to be super easy to create a lightbox form since I am using WordPress anyway.  I already love the Contact From 7 plugin and it happens to play nice with the Form Lightbox plugin.  Getting this going was as easy as:

  • installing the plugins
  • adding form objects with the Form Lightbox’s admin panel
  • adding a class to the link I want to use as a trigger

form-ligthbox-plugin

 

Else if Simple jQuery Plugin == Preferred

If you are not using WordPress or rolling your own with a jQuery plugin is preferred, there are are some nice options. These options can also be nice if more complex functionality is required.

jQuery UI – Dialog
jquery-form-lightbox-dialog

Perhaps a bit over kill if this is the only aspect you need, but jQuery UI includes dialog functionality that does this well and the download can be customized to include only the functionality needed.

DemoDownload

 

Colorbox
lightbox-form-colorbox

Colorbox is more than just an image based jQuery lightbox plugin.  It also include the ability to add inline content, iframe content, video embeds, outside HTML via ajax and more.

DemoDownload

 

prettyPhoto
prettyphoto-form-lightbox-jquery-plugin

Not just another pretty lightbox, prettyPhoto can also include the ability to add inline content, iframe content, video embeds, outside HTML via ajax and more.

DemoDownload

 

These are a few of the best options that I found when building the book site, which is sandstorybook.com.  Please share any solutions that you have in the comments below.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - jQuery, Tutorials, WordPress
    Tagged | , , , , ,