Tutorial: WordPress Plugin – Form Lightbox

wordpress-2

21/10/2013

admin

View Demo / Sample Usage

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.

<?php
/*
Plugin Name: Form Lightbox
Plugin URI: http://www.myphpmaster.com/form-lightbox
Description: A lightbox for the form.
Version: 1.0
Author: myPHPmaster
Author URI: http://www.myphpmaster.com
License: GPL2
*/

function fl_stylesheet() {
	wp_enqueue_style( 'prettyPhoto', plugins_url('/css/prettyPhoto.css', __FILE__) );
}
function fl_script() {
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'prettyPhoto', plugins_url('/js/jquery.prettyPhoto.js', __FILE__), array('jquery'), '3.1.3' );
}
add_action( 'wp_enqueue_scripts', 'fl_script' );
add_action( 'wp_print_styles', 'fl_stylesheet' );

Include Shortcode Script
This is the simple php script to add shortcode formlightbox which can carried text, style and title attributes. The wrapped content –> Click here

content

also can be retrieved and programmed.

function fl_shortcode( $atts, $content=null, $code="" ) {
	global $fl_id;

	extract( shortcode_atts( array(
		'text' => 'lightbox form',
                'style' => 'background: white;color: black;padding: 10px;',
                'title' => '',
	), $atts ) );

	$fl_id += 1;
	$title = ( $title !== '' ) ?  ' title="' . $title . '"' : '';
	$output = '<a href="#fl_box-' . $fl_id . '" rel="prettyPhoto"' . $title . '>' . do_shortcode($text) . '</a>';
	$output .= '<div id="fl_box-' . $fl_id . '" style="display:none"><div style="' . $style . '">' . do_shortcode($content) . '</div></div>';

	return $output;
}
add_shortcode( 'formlightbox', 'fl_shortcode' );

*Updated v1.0.1 – Include New Shortcodes

// Include shortcode for caller using class tag
function fl_shortcode_call( $atts, $content=null, $code="" ) {
	global $fl_id, $post;

	extract( shortcode_atts( array(
		'title' => 'form lightbox',
		'class'	=> '1',
	), $atts ) );

	$title = ( $title !== '' ) ?  ' title="' . $title . '"' : '';

	$output = '<a href="#" class="fl_box-' . $class . '"' . $title . '>' . do_shortcode($content) . '</a>';

	return $output;
}
add_shortcode( 'formlightbox_call', 'fl_shortcode_call' );

// Include shortcode for lightbox object
function fl_shortcode_obj( $atts, $content=null, $code="" ) {
	global $fl_id, $post;

	extract( shortcode_atts( array(
		'style' => 'padding: 10px; width:350px',
		'id'	=> '1',
	), $atts ) );

	$hidden_output = '<div style="display:none"><div id="form-lightbox-' . $id . '" style="' . $style . '">' . do_shortcode($content) . '</div></div>';
	$hidden_output .= '<script type="text/javascript">
		jQuery(document).ready(function() {
			jQuery(".fl_box-' . $id . '").fancybox({
				"type" :"inline", 
				"href" :"#form-lightbox-' . $id . '"
			});
		});
	</script>';

	return $hidden_output;
}
add_shortcode( 'formlightbox_obj', 'fl_shortcode_obj' );

Add button to Text Editor
This php function will create an “Add Form Lightbox” button at top of post/page text editor in line with insert image / media.

function fl_text_editor_button($context){
    $image_btn = plugins_url("/images/form-lightbox.gif", __FILE__);
    $out = '<a href="#TB_inline?width=450&inlineId=fl_form" class="thickbox" title="' . __("Add Form Lightbox", 'form-lightbox') . '"><img src="'.$image_btn.'" alt="' . __("Add Form Lighbox", 'form-lightbox') . '" /></a>';
    return $context . $out;
}
add_action( 'media_buttons_context', 'fl_text_editor_button' );

// Check current page url
$current_page = basename($_SERVER['PHP_SELF']);

if( in_array( $current_page, array( 'post.php', 'page.php', 'page-new.php', 'post-new.php' ) ) ){
    add_action( 'admin_head',  'add_fl_style' );
    add_action( 'admin_footer',  'add_fl_popup' );
}

function add_fl_style(){
?>
<style type="text/css">
	#form-lightbox td.first {width: 100px;vertical-align: top;}
	#fl_form_text {width: 350px;margin-bottom:8px}
	#fl_form_code {width: 350px;}
</style>
<?php
}

function add_fl_popup(){
?>
<script type="text/javascript">
function InsertLightboxForm(){

	var fl_form_text = jQuery("#fl_form_text").val();
	var fl_form_code = jQuery("#fl_form_code").val();

	var win = window.dialogArguments || opener || parent || top;
	win.send_to_editor('' + fl_form_text + '
' + fl_form_code + '
'); } </script> <div id="fl_form" style="display:none;"> <div id="form-lightbox"> <div style="padding:15px 15px 0 15px;"> <h3><?php _e("Insert Lightbox Form", "form-lightbox"); ?></h3> <span><?php _e("", "form-lightbox"); ?></span> </div><br> <div style="padding:15px 15px 0 15px;"> <table><tr> <td class="first"><label for="fl_form_text"><?php _e("Title", "form-lightbox") ?></label></td> <td><input type="text" value="" id="fl_form_text" name="fl_form_text" /></td> </tr><tr> <td class="first"><label for="fl_form_code"><?php _e("Form Code", "form-lightbox") ?></label></td> <td><textarea id="fl_form_code" name="fl_form_code" rows="5" cols="20">[enter formcode here]</textarea></td> </tr></table> </div> <div style="padding:15px;"> <input type="button" class="button-primary" value="<?php _e("Insert Lightbox Form", "form-lightbox"); ?>" onclick="InsertLightboxForm();"/>&nbsp;&nbsp;&nbsp; <a class="button" style="color:#bbb;" href="#" onclick="tb_remove(); return false;"><?php _e("Cancel", "form-lightbox"); ?></a> </div> </div> </div> <?php }

*Updated v1.0.1 – Output 2 New Shortcodes

Some changes have been done to above code to make it worked with the new shortcodes.

Line #35

win.send_to_editor('' + fl_form_text + '\r\n
' + fl_form_code + '
');

Line #62

<td><textarea id="fl_form_code" name="fl_form_code" rows="5" cols="20">[form shortcode here]</textarea><br />

Save the file as form-lightbox.php in form-lightbox folder, zip the folder and the plugin ready to use.

Results
Original shortcode v1.0 …

Click here

Your Name (required)

Your Email (required)

Subject

Your Message

captcha

Example use with images. Remember to use ‘ not ” for img or any other html tags wrap inside text=””.

<img src='/wp-content/uploads/2011/10/contact-button01.png' /&rt;<
<h2>Contact Me</h2><p>Please use this form to contact me, thank you.</p>

Your Name (required)

Your Email (required)

Subject

Your Message

captcha

*Updated v1.0.1

The new shortcode will be as follow:

here

Your Name (required)

Your Email (required)

Subject

Your Message

captcha

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.

View Demo / Sample Usage

Download plugin

You can download plugin at WordPress plugin page or just click link below.

If you would like to support the development of this plugin, please considered to donate.. click here.

Related Posts:

FB Comments

comments

3 Responses to Tutorial: WordPress Plugin – Form Lightbox

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Copyright © 2011 - myPHPmaster. All rights reserved.
top

This is sample for Menu caller




Related Posts:

FB Comments

comments