Contact form in lightbox?

This isn't possible at present, not automatically any way.

You could write some javascript to find all "/contact" links and append "/lightbox2" to it so it's "/contact/lightbox2". You would also need to add a rel="lightframe" to the anchor link. This would open the contact form in a lightbox when the contact link is clicked, and you could style the form with a page-contact-lightbox2.tpl.php template file in your theme's directory.

However, this will open the form in a iframe, rather than treating it like modal content which is what is done to the login form. The disadvantage to using an iframe is that the form isn't closed upon form submission, like with the login form. The advantage is that the iframe will add a scrollbar to accommodate the size of the content. If you want, you can treat it as modal content (just use rel="lightmodal"), but you'll need to specify the height and width of the lightbox container (see lightbox2 docs).

I'm not adding it to lightbox2 module at this time because there are too many modules that modify the contact form content, e.g. advcontact, contact_forms, content_attach, captcha, mollom, etc. These potentially could modify the size of the content, making it difficult for lightbox2 to estimate the outputted form size.

If enough other people request it, then I'll add the ability for lightbox2 to open the default contact form in a lightbox, but for now, this feature won't be implemented for the reasons outlined above.

Cheers,
Stella

Well... I would very much like to see this happening.

Actually, I would like to see this working with advcontact.module as well.

What i'm trying to work out is how to get a "email the admin about this page" link show an advcontact form in a lightbox.

If anyone could provide the basic code, i will fix it to fit my sizing needs.

Thanks!

It's now possible to scroll lightmodal boxes (dev version), so I'll take another look at implementing this.

I can easily make a contact link open in a lightbox.

- Create a simpler page template to use for the contact form and other lightframe pages (so you don't get sidebars and menus) (I have used a custom url query string to identify pages that need a simple version of page.tpl.php - and made the switch in template.php)
- Update your menu templates to add the lightframe rel code to the correct link (use the $mid to determine which link is which) and your custom query/args
- Ideally, clicking links from your lightframe simple template pages will also open those pages using the simple template (I have used a regex)
- Ideally submitting a form will take you to a simple template page too, but I haven't figured that out - so my solution is to create a confirmation page in a seperate node, that uses the simple template, which the form redirects to.
- You could be extra tricky and call the javascript Lightbox.end('forceClose'); from your confirmation page ?? I dunno I didn't feel like doing this.

That's the workflow, and theres a heap of different ways to do that.

Oh I should have mentioned that my contact form is made with the webform module because the contact module is too difficult for my clients to administer (change the content at the top of the form).

subscribe. It would be very much appreciate if the comment#5 could be more clear for newbies (i.e. some code example) about the building of template etc.

Thanks

OK I will tell you how I did it. Some of this stuff was already done in my base install (configured by another developer) but I will explain it anyway in case your setup is different.

In my template.php there is this function:

function zen_menu_item($mid, $children = '', $leaf = TRUE) {
  return _phptemplate_callback('menu-item', array(
        'leaf' => $leaf,
        'mid' => $mid,
        'children' => $children
    )
  );
}

I believe this causes my menu items to be themes using a template file menu-item.tpl.php

Here is my content of menu-item.tpl.php. This includes my modifications too (namely the rel tag - where you can see the properties I put in, and also my 'lightframes' array is a list of $mid (menu ids) which the lightframe should be applied to)

<?php

$link = menu_item_link($mid);
$item = menu_get_item($mid);

// drupal_set_message($mid." - ".$item['title']); // debug to find out $mid of a menu item

$lightframes = array(168,190,191,174,184,185,134,133,186,182,189,187);
if (in_array($mid, $lightframes)) {
  $rel = "rel='lightframe[|width:895px; height:500px; scrolling: auto;][".$item['title']."]'";
  $link = str_replace('">', '?lightframe" ' . $rel . '>',$link);
}

if (strpos($link, 'class="active"') != FALSE) {
  $active = ' active';
}

$class = strip_tags($link);
$class = zen_id_safe($class);


$output = '<li id="mid-' . $mid . '" class="link-'. $class . $active .' '. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";
print $output;
?>

Another important thing is in the function _phptemplate_variables in template.php I have added the following right before the 'return $vars;' bit at the end:

  // Allow for preprocessing
  $function = 'phptemplate_preprocess_'. str_replace('-', '_', $hook);
  if (function_exists($function)) {
    $function($vars, $hook);
  }

and also added this function in :

function phptemplate_preprocess_page(&$vars, $hook) {

  if ( isset($_GET['lightframe']) ) {
    $vars['template_files'][] = 'page-body';
  }

}

These last two bits of code are cut down versions of something I used on another site - you can see the unneeded $hook var being passed through, and the overly complicated way of choosing the function name - you can simplify all of this.

What this last bit of code does is for any url with a query string variable called 'lightframe' will be processed via page-body.tpl.php not page.tpl.php
So a path like ' about-our-company?lightframe ' will be output using page-body.tpl.php not page.tpl.php

So what you need to do now is create the file page-body.tpl.php. I simply copied page.tpl.php and deleted all the sidebars and footer etc.. and put a new class on the body for easy styling later.

Just for fun here is mine:

<!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" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">

<head>
  <title><?php print str_replace('|', '-', $head_title) ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <!--[if lt IE 7]><style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/ie6.css";</style><![endif]-->
  <!--[if IE 7]><style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/ie7.css";</style><![endif]-->
  <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/qldswimwear.js"></script>
  <?php print $scripts; ?>
  <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/dropdown.js"></script>
  <!-- argument passed to menuhover() is class of menu UL items -->
  <script type='text/javascript'>
    if(document.attachEvent) {
      document.attachEvent("onreadystatechange", function(e) {
        if(document.readyState == "complete") {
          menuhover('menu');
        }
      });
    }
  </script>
</head>

<?php /* different ids allow for separate theming of the home page */ 

if (qldswimwear_is_taxonomy_page()) {
  $body_classes .= " taxonomy-page";
}
?>
<body class="lightframe <?php print $body_classes;  ?>">

  <?php if ($title): print '<h1>'. $title .'</h1>'; endif; ?>
  <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'. fix_my_links($tabs) .'</div>'; endif; ?>
  <?php print $messages; ?>
  <?php print fix_my_links($help); ?>
  <?php print fix_my_links($content); ?>

</body>
</html>


<?php

function fix_my_links($stuff) {

  $stuff = preg_replace('|href=[\'"](?!http://)([^\'"]*)[\'"]|',
        'href="\1?lightframe"', $stuff); 

  return $stuff;

}

?>

You can see the function 'fix_my_links' in there. This is to combat the problem of people clicking from one node to another and then getting the sidebars back (warning this code will not work if you already use query strings for something else :/ because it looks for ?lightframe not ?something=blah&lightframe ).

Unfortunatly there is still a problem that submitting forms brings back the old template. In your contact form you can solve this by setting a redirect URL like internal:thank-you?lightframe where 'thank-you' is the alias to the confirmation page node.

So far I have not solved the problem of submitting other forms - like node edit forms.

I don't know if this stuff will work for you exactly as I have pasted it - but hopefully it will give you a big clue on how you can do something similar.

You can have a peek at my work here http://qldswimwear.dev.aspedia.net/ but I can't guarantee this site will be here long but I'm sure you can guess what to google to find the live site.

I have changed my mind about something.
In menu.tpl.php instead of
$link = str_replace('">', '?lightframe" ' . $rel . '>',$link);
make it
$link = str_replace('">', '" ' . $rel . '>',$link);
and use jquery to add the query string

$(document).ready(function() {
  $("a[rel]").each(function() {
    $(this).attr('href',$(this).attr('href')+"?lightframe");
  });
});

better for SEO (you might need to customise the jquery selector if you're using 'rel' for multiple things).

These potentially could modify the size of the content, making it difficult for lightbox2 to estimate the outputted form size.

Stella, one of the biggest problems I found about your login code is that it did not give itself enough width/height to fit the login form. Probably because my heading font and margins are just slightly larger than normal.

I had to physically change the dimensions in your code - perhaps it should be user selectable or somehow automatic.

I will get to this feature request soon, I promise! Unfortunately, it's just gonna have to wait another couple of weeks, sorry.

I've added this feature to Lightbox2, and it will be included in the latest dev of the lightbox2 module, available later today. Just remember to run update.php after upgrading.

Cheers,
Stella

Released in Lightbox2 6.x-1.9 and 5.x-2.9.

Cheers,
Stella

A small bug - not critical, but annoying?
When contact form in lightbox is enabled, lightbox2 will also take control of the link to the contact form admin pages at admin/build/contact. Not critical, but annoying all the same ;)

Would it be possible to leave that one out, kind of like disabling lightbox for gallery listings?

@tjodolv: Oops, ok will fix that. In the meantime you can just disable the lightbox for admin and admin/build/* pages on admin/settings/lightbox2.

Cheers,
Stella

Is there any info for...

1) How to theme the contact lightbox? (e.g. what are the container classes and ids?)

2) What's new in the latest DEV compared to 1.9?

1) you can modify some of the lightbox layout settings under "advanced settings" on admin/settings/lightbox2. Alternatively to see the HTML structure for the lightbox, including ids and classes, then use Firebug or the Firefox Web Developer toolbar to view the DOM / Generated Source for the page.

2) There's only been one change to Lightbox2 since the release on 8th Jan. To see the latest commits / changes go to http://drupal.org/project/cvs/55200

Thanks stella! Now one more related question...

How do you remove the title text "contact" at the bottom of the contact modal lightboxes?

I'm not sure what you mean - what text?

See attachment...

Hmm the only way that could happen is if there was a title attribute on the link to the contact form, e.g.

<a href="/contact" title = "Contact">Contact</a>

Lightbox2 changes just the href attribute and adds a rel one. It does not add / modify the title one. This doesn't happen with my version of Drupal, so I imagine it's added by another contrib module, maybe some sort of tooltip one?

Cheers,
Stella

Aha!~

My contact link was a primary link. "contact" was used as the description of the primary link. Removing the description removed this title...

I enabled the Lightbox override of the contact form, but I had trouble because one of my nodes had the word "contact" at the beginning (e.g. "contact-info") and Lightbox was changing the link (e.g. "contact-info" => "/contact/lightbox2-info").

I went into the lightbox_modal.js file and changed

function lightbox2_contact() {
$("a[@href*='/contact'], a[@href*='?q=contact']").each(function() {
$(this).attr({
href: this.href.replace(/contact?/,"contact/lightbox2"),
rel: 'lightmodal[|width:450px; height:450px;]'
});
});
}

To:

function lightbox2_contact() {
$("a[@href*='/contact'], a[@href*='?q=contact']").each(function() {
if(this.href.substring(this.href.length-8)=="/contact"){
$(this).attr({
href: this.href.replace(/contact?/,"contact/lightbox2"),
rel: 'lightmodal[|width:450px; height:450px;]'
});
}
});
}

this has already been fixed in the dev version.

I just added this functionality using preprocessing and a template file in ZEN. I did this because I need two different contact forms, one for signing up for events, which will appear in the lightbox, the other for contact just in regular use.
For the ones interested, this is what i changed the 'template.php' to:

function MYTHEME_theme(&$existing, $type, $theme, $path) {
  $hooks = zen_theme($existing, $type, $theme, $path);
  
  $hooks['contact_mail_page'] = array( 
        'arguments' => array('form' => NULL),
        'template' => 'contact-mail-page',
	  );

  return $hooks;
}

function MYTHEME_preprocess_contact_mail_page(&$vars, $hooks) {

  $vars['form_markup'] = drupal_render($vars['form']);
}

The template file 'contact-mail-page.tpl.php':

<?php print $form_markup; ?>

It's working fine and everything, but now I wonder how it'd be possible to pass any arguments to the lightbox... I'd like to pass some through the URL, but as there's no new URL opening, which is the keyfeature of a lightbox, how could I get them available in the lightbox?

Any ideas on this? Thanks in advance..

A very simple way is to add a rel link and then use CSS to hide the header and navigation.

Example rel link:

Example CSS:

#lightbox #header, #lightbox #navigation {display:none;}

This method can also be used for other forms, such as node creation forms.

hi all,
i am trying to show the login form in a lightbox2, it is functioning too. but if an user puts wrong information in or just submit the form without filling it out, it goes to a white page showing login form elements. Could somebody help me please?? Thanks.