Posted
Lightboxes or 'modal windows' allow you to show forms in a widow that overlays the current one. This FAQ describes how to show a form from a link in a article or a module.
The form that you want to display in a lightbox should be created as a normal ChronoForm except that you will need to keep in mind that it may need to display in a smaller widow than usual. Complete and test the form to be sure that it is working correctly.
Now create a second very simple form using the form Wizard.
- In the Preview window drag a Custom Element element from the Advanced elements group.
- Open the element, check the Pure Code box, and add code like this to the Code box:
<?php JHTML::_('behavior.modal'); ?> <a class="modal" href="index.php?option=com_chronoforms&chronoform=form_name&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 600}}">Click here</a> - Replace form_name with the name of the form you want to display and Click here with a more useful link message. Change the window dimensions to suit your form.
- Click the Actions tab and drag in a Show HTML action.
- Give this form a name and save it.
Now use the ChronoForms plug-in to show the second form in an article. When you view the article you should see just the link to the form which, when clicked, will open the first form in a lightbox.
If you don't want to use Joomla's default Lighbox and you have your own lighbox plugin or script, then you can load the form's iframe manually in your page using an iframe element with a src attribute like this:
src="/index.php?option=com_chronoforms&chronoform=FORM_NAME&tmpl=component"
To refresh the form in the lighbox using a button, just use a button element with this attribute:
onclick="window.location.href='/index.php?option=com_chronoforms&chronoform=FORM_NAME&tmpl=component'"
And to close the lightbox using a button, just use a button element with this attribute:
onclick="parent.window.location.href='PARENT_PAGE_LINK';"