Greyhead.net

There are many kinds of pop-up boxes or light-boxes available to use with Joomla!. In this recipe, we'll use the standard Joomla! light-box (calledSqueezebox) to show a form in a pop-up box. This approach should be easily adaptable to other similar boxes.

Getting ready

Any form will pretty much do, provided that is it small enough to sit comfortably inside the Squeezebox. Here, we'll use our familiar newsletter signup form.

You'll also need the ChronoForms Module if it isn't already installed.

How to do it...

1. First off create a new form; we'll need two forms to make this work smoothly.

   We're going to use this second form to create a module with a link to launch the Squeezebox. In the Form HTML put the following code:

   <?php
   JHTML::_('behavior.modal');
   ?>
   <a class="modal"
    href="index.php?option=com_chronocontact&amp;chronoformname=form_name&amp;tmpl=component"
    rel="{handler: 'iframe', size: {x: 400, y: 200}}"
   >Subscribe to our newsletter</a>

   Make sure that you have the correct value for form_name (the form that will appear in the Squeezebox) and that the href=' . . .' code is all in one unbroken line. Set the x & y values to the size of the box that suits your form.
   
   Note: for ChronoForms v4 the URL becomes

   href="index.php?option=com_chronocontact
   &chronoformname=form_name&tmpl=component"

2. Save the form and go to the Admin | Extensions | Module Manager. Create a new module of type ChronoForms, add the name of this form, enable the module, and save it.
3. Browse to a page where the module is displayed and you will see a link in the module. Click on the link and your form will open in a Squeezebox.
   

   

   You can see the form open in the Squeezebox and, on the left in the background, the module with the link that opens the form.

   This looks neat and works well, but with one exception. After you submit the form, the "Thank You" page shows up inside the Squeezebox with the complete Joomla! template.

   We avoided this with the form by adding tmpl=component to the URL link. To f x it for the Thank You page, we need to do the same thing for the OnSubmit URL for the form. If we look at the page source, we can see that the OnSubmit URL is http:// example.com/index.php?option=com_chronocontact
   &task=send&chronoformname=form_name.

4. This is hard-coded in ChronoForms and we can't change it directly through the form settings. But we can over-write it using the Submit URL box on theForm Editor | General tab.

5. So, we can put this into the Submit URL box athttp://example.com/index.php?option=com_chronocontact &task=send
   &chronoformname=form_name&tmpl=component.
   

   Note: We've corrected a little ChronoForms bug in this version by replacing &chronoformname= with &chronoformname=.

6. Then, put a "Thank You" message into the Form Code | On Submit after box:
   

   
   <div style='text-align:center; padding:12px;' >
   <h3>Thanks for subscribing</h3>
   </div>
   

7. Try submitting the form again and we will have a nice, clear message:
   

   

How it works...

Here we are using the second ChronoForm not as a form, but as a way of adding some PHP into the page using a module. To trigger the Squeezebox, we need to give Joomla! the instruction to load the code:

JHTML::_('behavior.modal');

Some Joomla! templates may already include this instruction, in which case you could use a standard module to create the link. However, it's perfectly safe if the instruction is given twice, in the template and again in the module.

We can't do this in the form itself as it isn't loaded when the page with the link is loaded. Most of the Joomla! elements – articles, modules, and so on won't allow PHP codes like this (though there are other specialist extensions like Jumi that do support this ).

This is one of those occasions when we can use ChronoForms capabilities in a slightly unorthodox way to get the result we want.

There's more...

Keeping our options open

Putting the URL in the Submit URL box works well, but has one drawback. If we try to use the form without the Squeezebox, the "Thank You" page will still display without the template and users will see a blank screen mainly.

To get round this, we need to check if the form is being called normally or modally. The easiest difference to spot is the tmpl=component in the URL. We can add a few lines of PHP to the Form HTML to detect this and set a hidden input value:

<?php
if ( !$mainframe->isSite() ) { return; }
$modal = JRequest::getString('tmpl', 'false', 'get');
?>
<input type='hidden' id='modal' name='modal'
 value='<?php echo $modal; ?>' />

Then, we can use some JavaScript in the Form JavaScript box to read this and change the Form Action URL when the form is loaded:

window.addEvent('domready', function() {
 var modal = $('modal').value;
 if ( modal == 'component' ) {
 var url = $('ChronoContact_form_name');
 var action = url.getProperty('action');
 url.setProperty('action', action+'&tmpl=component');
 }
});

This script snippet checks to see if the modal hidden input is set tocomponent. If it is, then it gets the form action URL and adds&tmpl=component to the end.

Now we can use the same form either normally or modally in the Squeezebox.

Adding PHP to the page

We added the required PHP to the page using the ChronoForms module. This is OK if we want to show the link in a module (or in an article using the ChronoForms plug-in/Mambot). However, if we don't want to use do this, how can we add the PHP?

It's possible to simply add the line to the template index.php page but this will load it on every page whether we need it or not.

Another approach is to add it into a hidden module. That is a module that doesn't display anything. You can tuck this away in the template footer or debug locations, and it will still load the PHP that we need.

If you have a licensed copy of ChronoForms then the code we put in the module above – without the link – will work OK. Otherwise you'll need to use Jumi or some other extension that will permit PHP.

Note: The unlicensed copy of ChronoForms shows the tag line at the bottom of the form and so it won't be "invisible" on your page.

---

There are different styles of laying out both JavaScript and PHP and sometimes fierce debates about where line breaks and spaces should go. We've adopted a style here that is hopefully fairly clear, reasonably compact, and more or less the same for both JavaScript and PHP. If it's not the style you are accustomed to, then we're sorry.