Drupal webform in shadowbox

Some tims you want to make a webform in a pop up shadow box or light box ...well that is cool here is how you set that up:
1) Make the drupal webform the normal way and note the page id :
2) Copy your page-node.tpl.php and change it to page-node-YOURID.tpl.php (example page-node-38.tpl.php
3) in your themes template.php add this function so you can template pages by id: (change "themename" to your themes name)

<?php
function themename_preprocess_node(&$vars, $hook) {
  $node = $vars['node'];
  $vars['template_file'] = 'node-'. $node->nid;
}
?>

4) now in your page-node-YOURID.tpl.php file do some thing like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
   <script>
 $(document).ready(function(){
 $('#edit-submit').click(function(){
	 $('#TheLoader').css('display','block');
	 });
	 	 });
 </script>
</head>
<body class="<?php print $classes; ?>" style="background:#FFF">
<div style="width:450px; margin-left:40px; margin-right:10px; margin-top:10px; background:#FFF">
    
<h1 class="title"><?php print $title; ?></h1>
          
          

<?php print $messages; ?>
<?php if ($tabs): ?>
<div class="tabs"><?php print $tabs; ?>
<br />
</div>
        <?php endif; ?>
        <?php print $help; ?>


        <div id="content-area">
          <?php print $content; ?>
          
          <?php if($messages){
			 
		  }else{
		  ?>
          
          <div id="TheLoader" style="margin-left: 149px; margin-top: -27px; display:none">
<!-- ajex anamated gif --> <strong> Loading ...</strong> <img src="<?php echo $front_page;?>images/ajax-loader1.gif" align="absmiddle" /> </div> <?php } ?> </div> </div> <?php print $page_closure; ?> <?php print $closure; ?> </body> </html>

5) you are going to need the web form submit template as well so go to the webform module and in the templates folder you will see a file called "webform-confirmation.tpl.php"
copy this file to your active themes folder then make a copy of the webform-confirmation.tpl.php and name it webform-confirmation-YOURID-.tpl.php or (example webform-confirmation-38-.tpl.php)

doing this is to controll the submit to page assuming you set the webform settings to "Confirmation page" then edit the template ..i like to remove the "back to form"

Note if you dont have an ajax image make one at http://ajaxload.info/

6) call your new webform from any page (example with  the shadow box module) <a rel="shadowbox; width=500; height=600; player=iframe" href="fullpathtopage/node/38" id="quickqoute">Contact us </a>

Category: