Tag:Contact Form 7

Lightbox is a JavaScript application use to display objects like images, iframe, video, pdf, inline content, ajax, etc using modal dialogs. These object are more presentable when displayed using lightbox script because the user can focus on that object which overlaid on the page and made other content hidden under the shadow. There are lot of choices for lightbox script, among them are:

Most of above script developed under jQuery framework for simplifying the script in order to reduce total file size.

Web form also look nicer when integrated with lightbox. One of easy ways to integrate the form with lightbox is by using the plugin which we will go through step by step in this tutorial.

Get the script

First of all, we need the lightbox script to be included inside our plugin. Let choose one of them (Fancybox) which can be downloaded here. Extract the zipped folder and select required folder to be used as below:

/fancybox/ and all it’s content

Put all above files/folder inside a new folder, name it form-lightbox.

Create Header and Print Javascript and Stylesheet Code

Every main plugin .php file need a standard header, so create a file using text editor and put this content.

Look, I have divided into two shortcode which is caller and object. The caller shortcode can be called multiple time but the object must be called once only. The caller also can be wrapped in a sentence not like before. You also can change the title and text for each caller but do not change the class attribute.

Note: If you editing post/page which already have the

shortcode, please check the id attributed because it may be the same with existing. Please change it manually or your new lightbox object doesn’t work.