Chronoform inside Lightbox

Hi all, I am using yootools lightbox to try go put my form inside a lightbox so that, once the link is pressed, the FORM will open within the same page... and when you submit, the lightbox closes...
(I could use any other type of lightbox, shadowbox, etc needed)

Any idea on how to do this?

Thanks!

Hi,

try to add this code to the form code:

<?php JHTML::_('behavior.modal'); ?>

then you must have a link like this:

<a class="modal" href="http://www.domain.com/index.php?option=com_chronocontact&chronoformname=someform" rel="{handler: 'iframe', size: {x: 600, y: 600}}">Open my form in a lightbox</a>

Cheers
Max

I'm a new user to chronoforms, and its a great component. But i have a question about this topic...

When I create a link in my article, I have the option to set the class to “JCE Lightbox”
When I do this and link to my form, the lightbox opens up but it displays the whole webpage and not just the form like I wanted.

Any ideas?

Hi fezzicnex,

Add &tmpl=component to the form url in the lightbox link.

Bob

Perfect,

Thanks enriquan. simple solution, i apprecate the help.

-Thomas

Hi, I have tried with little success to make this happen in the past and having returned to Joomla after finally getting a server to work on, I would like to implement this also. I have tried to follow what you have mentioned here, but either I am missing something or not followed what you have mentioned clearly enough. I cannot find the class JCE lightbox as mentioned, but see a javascript popup option.

Any ideas?

Cheers
Jamie

Hi Jamie,

I think that the JCE Lightbox is an option with the JCE Editor, not with the standard Joomla one.

Where do you want to show a lightbox? and what does it need to contain?

Bob

Hi Bob,

I would like to have the look of the lightbox, such as the preview offered within CF, to present a form to the client for completion. This could either be activited from content articles, menu, and/or a component that I am beginning to develop.

The content of the lightbox will be a CF and act as such.

I will install JCE and try via this too.

Cheers
Jamie

Hi James,

That should be possible, set the Lightbox up to use an iframe, then load the form using the usual url with the extra &tmpl=component item

Bob

PS Start out with a very simple form to test the principles.

Hi Bob,

I have this now working without JCE by placing the behviour.modal code on the template. All works fine except now I want to close the lightbox with the submit button. Help please?

Cheers
Jamie

P.S. My wife thinks I am getting a little too intimate with this joo-thing! Not sure what she means???

Hi Jamie,

the modal will have a JS file, and the file will have a function to close the modal when the close button is clicked, if you managed to find the file and the function name then you can easily attach it to the submit button!😉 if its hard then let me know and I will dig into it for you!

Regards
Max

After some searching I looked at the source for the links in the admin console, finding the following. It works in my test form using a buttons onclick event:

<input value="Submit" type="submit" onclick="window.parent.document.getElementById('sbox-window').close();"/>

All works as expected, yippee!!! Thanks all whom have helped thus far. Might shout myself some choclate and coke to celebrate this hurdle and look forward to the next.

P.S. Would it be better to put this on the onSubmit=...?

Hi Jamie,

Well done, I don't think it matters much if it is onClick or onSubmit here, I suppose onSubmit might be a little safer.

Bob

Hi!
I place code

<script type="text/javascript">
<!-- 
onSubmit="window.parent.document.getElementById('sbox-window').close()
//-->
</script> 

in "On Submit code - after sending email" filed of Chronoform. It is succesfull close lightbox-window of modal-behavior. But this lightbox is very poor in IE😟

When I use this method with JCE lightbox (replaced 'sbox-window' with 'jcepopup-container') work not: javascript error "window.parent.document.getElementById("jcepopup-container").close is not a function".

Any ideas?

Slak

Hi Slak,

I'm not sure about the JCE box, I suggest using the close function comes with the lightbox itself as I described here:
http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=5&t=12687#p26280

Cheers
Max

Thanx for answer. I ask on JCE forum - no one word😟

Finding of function to closing a lightbox is too dificult for me. Form in my page will become without lightbox...

THX for a great component!

Slak

Hi Slak,

just a question, why using the JCE lightbox if the Joomla's one is just very cool ? honestly I didn;t see the JCE lightbox in action before so I can;t tell if Joomla's one is better or not!

to find the close function, this is easy, check your webpage source with the lightbox, you should find some reference to some file .js , the file name will have lightbox or "something"_box (I think), find this file, open it, there should be a function with a name contains "close" or so, my guidelines may not work 100% but I'm sure that you can make it!😉

if you can't find the one for the Joomla lightbox then let me know!

Regards,
Max

Hi all and thakns for the help so far,

I can now open and close a modal box using an <a> link. Now I would like to open the same using a button or through code (the same?) I am having trouble locating anything that does not require a hyperlink. I can use getElementByID to refer to a hyperlink encasing the input button which works. I would like to have some conditional statements that may or maynot open the modal. To do this via code would make things a lot easier.

Thanks in advance...
Jamie Crilly

Hi Jamie,

its the same thing, show me how you did it using an anchor tag!

Max

Should I embed an anchor to refer to in code? but thinking this might be a little difficult in a MVC setup??

<a class="modal" id="idResetPass" href="index.php?option=com_user&view=reset&tmpl=component" rel="{handler: 'iframe', size: {x: 500, y: 400}}">    <input value="Change Password" type="button" onclick="document.getElementById('idResetPass').click();" /></a>

Cheers
Jamie

Hi Jamie,

No, don't do it this way, I don't think it will even work!

you need to call a function when the button is clicked, do you have Firebug ? if you have it then the JS console can show you which function is called when you click the anchor! lightbulb

Max

It does work as it is, and it does not need to encase the button. I have not got firebug nor firefox, will download and try this. Thanks for the suggestion.

Cheers
Jamie

Hi Jamie,

Here is how I got it to work myself in the RC4.1, I don't think its the optimum but it does what I need

window.addEvent('domready', function() {
		SqueezeBox.initialize();
		SqueezeBox.setContent('iframe', '');
		SqueezeBox.applyContent('<div style="color:#FF0000; padding:5px; font-size:12px;">Your Content</div>', {x: 200, y: 100});
		SqueezeBox.resize({x: 500, y: 100}, true);
		//return false;
	});

Regards
Max

Hello

I ve been though this post, lot of information, could someone clear up and tell me what code should be used to get a form to work in a lightbox?

I ve used the code from admin but the for opens in a ie window , not in a lightbox, am i missing something?

<?php JHTML::_('behavior.modal'); ?>

<a class="modal" href="http://www.domain.com/index.php?option=com_chronocontact&chronoformname=someform" rel="{handler: 'iframe', size: {x: 600, y: 600}}">Open my form in a lightbox</a>

Hi, where did you put these 2 pieces of code ?

MAx

hello

tks for you quick answer. the first one is at the top of the form code, the second one in a module, the form displays correctly but not in a lightbox

tks

Hi schlogo,

no, they need to be together, in the form or the module!😉

Cheers
Max

tks for your answer, i ve put it all in the module , form still shows up in a ie window (ie8) 😲

i ve tried again but i can t get it to work :/

I have placed the following into the template html for my site (highlighted red):

<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/modal.js"></script>  
  <script type="text/javascript" src="/media/system/js/calendar.js"></script>
  <script type="text/javascript" src="/media/system/js/calendar-setup.js"></script>
<?php JHTML::_('behavior.modal'); ?>

This means that all pages are able to take advantage of this tool.

Use the following where you wish to make a reference to activate the squeezebox:

<a class="modal" href="index.php?option=com_chronocontact&chronoformname=someform&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 600}}">Open my form in a lightbox</a>

Replace the highlighted code with your content.

On the form/page being opened, add...

<input value="Submit" type="submit" onclick="window.parent.document.getElementById('sbox-window').close();"/>

You could then go further and update the calling form with the new data. (Still learning this aspect!)

Hope this works for you. Good to have a template for myself as well!

hello tks for your answer.Using your answer, i got it to work, just by including the modal.js in the template ! tks !

Hi all, Thanks for posting this great solution!🙂

@j.crilly, I think that the first piece of code in red may be replaced by:

<?php JHTML::_('behavior.mootools'); ?>

I will make this sticky!

Best regards,
Max

I have a last question. Everything works fine, lightbox closes on submit, email is sent , perfect. Now, i d like to redirect the parent page to a "thanks page" when the lighbox closes. I only managed to get a redirection inside the lightbox and then it does not close or it closes and i get no redirection. I ve only tried to add a header location after of before the close

If you have any better idea...😀

Hi schlogo,

I'm not sure how you can do this but if you google "redirect parent window on popup button click" or so you may find some answer, I think that you need to edit this piece :

onclick="window.parent.document.getElementById('sbox-window').close();"

to something like this:

onclick="window.parent.document.url = 'new url here'"

you need to check the .url part though, I can't remember if it was .url needed to redirect the page!

Cheers
Max

It works with location "instead" of "url" On google i ve seen a lot of people trying to use both a redirect and a close instruction to get this done. Your solution actually closes and redirect the parent page at the same time. It does what I want. Tks a lot😀

onclick="window.parent.document.location = 'new url here'"

Great, thanks for posting the correct solution, try to test it on different browsers too, and I think you may want to try this one too, if it works too then its better to use it:

onclick="window.parent.document.getElementById('sbox-window').close();window.parent.document.location = 'new url here'"

it closes the lightbox then redirect which are the correct steps!

Regards
Max

great, i ve changed it, it works !

I`ve set up a form for client feedback in the joomla modal box. Everything works perfect, except the Mootools Validation. Validation messages show, but sending the form without filling the required fields works. How can i check the validation state before

onclick="window.parent.document.getElementById('sbox-window').close();"

is firing?

i solved it a bit different. First i added a new article "Thanks for your message" and set it as the Redirect URL in chronoforms (index.php....&tmpl=component). In the new Artikel i wrote something like

<p>Thanks for your feedback...blablabla...</p>
<p><a href="#" onclick="window.parent.document.getElementById('sbox-window').close();">Close Window</a></p>

This solved my problem but the

...&tmpl=component

just gives me the pure html without css...i solved it the dirty way with:

<link rel="stylesheet" href="templates/myTemplate/css/style.css" type="text/css" />

directly at the beginning of the article. This works but i think it isnt W3C valid.

Is there a way to add the css differently? I dont want to use inline styles because my form css is pretty advanced...

Hi yubelin,

try not to use "&tmpl=component" and use "index2.php" instead of index.php in the form URL ?

Cheers
Max

Hi Admin,

So instead of:

index.html?...form...&tmpl=component

we should use

index2.html?...form

And this makes is essentially the same but more correct?

Hi jcrilly,

You'll need to test to see what actually happens index2.php is the old Mambo/Joomla 1.0 way of doing this tmpl=component is the Joomla 1.5 style (the other is now deprecated and may not be supported in future versions). I don't know if they actually behave differently.

tmpl=component doesn't load the site template but should still load any scripts or styles called by the component.

You may need to set up the form to check for the tmpl parameter and add the code to load your css if it finds tmpl=component.

<?php
$tmpl = JRequest::getString('tmpl', '', 'get');
If ( $tmpl == 'component' ) {
  $doc =& JFactory::getDocument();
  $doc->addStyleSheet('. . .');
}
?> 

Bob

Phew!! Lots of information here.. I have tried to follow the tips & tricks given by the admins and users to make a CF form appear in a Lightbox. And I have succeded to do this - almost perfectly😉

Here´s what I want to do:

1. I want to use YOOlightbox to show my form.
2. On submit I want the form-inputs appear in a summary-page that can be printed with a "Thank You" note at the top - still inside the lightbox. A link in the bottom of this page will then close the lightbox

Here´s what I have managed to do so far:

1. I had the form showing up in a YOOlightbox (this is really a version of Shadowbox) but on submit, the "Thank You" note showed as a whole web-page.
2. After following instructions here, I now get the form to show inside a "normal" lightbox (for some reason) and NOT inside a YOOLightbox. On submit the lightbox disappears instantly as I have told the CF form to go to a redirect-url.

Here is the code I have in my template HTML:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
  <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" />
<!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/modal.js"></script>
<?php JHTML::_('behavior.modal'); ?>
 </head>

Here is my code to activate the lightbox (this is in a module):

<a class="modal" href="http://www.MYDOMAIN.com/index.php?option=com_content&view=article&id=16:MYFORMNAME&catid=6:MYCATEGORY&Itemid=9&tmpl=component" title="MYFORMNAME" rel="{shadowbox: 'iframe', size: {x: 600, y: 600}}"><img width="75" height="75" align="baseline" alt="IMAGENAME.png" src="URLFORIMAGE" /></a>

Here is the code I have inserted under FORM CODE -> FORM HTML:

 <?php JHTML::_('behavior.modal'); ?>

I have then inserted a redirect-url under FORMS URL -> REDIRECT URL that holds the "Thank You" note.

So my questions are:
1. Why does my form show up in a "normal" lightbox and not in a YOOLightbox?
2. How do I make a summary page display the information given by the user?
3. How do I make that summary page printable?

Many thanks for your help!🙂

Hi Rayden78,

did you get the YOO box to work without the form ? I mean do you have it working before doing this experiment ?

I'm not sure why it doesn't work but I guess you should try to get it working first then check your page source and try to emulate all what you see to get it working with the form!

2. On submit I want the form-inputs appear in a summary-page that can be printed with a "Thank You" note at the top - still inside the lightbox. A link in the bottom of this page will then close the lightbox

I think you can use a JS snippet here in this topic to get the close link working assuming the YOO box uses the same close function, but I'm not sure what will happen when you submit a form inside the lightbox, I think the browser window will be submitted, if so then you may need to use AJAX to submit this form inside the box!

adding a print icon is another story which we can discuss in another thread for this only!

Regards,
Max

Hi !!!

Thank you for this tip but it does't work in IE6 when the page is scrolled (eg: if the lightbox link is at the bottom, the lightbox appears at the top and you must scroll up to see it). I tested on joomla's backend and it's the same (so it's not my template witch creates the bug).

It's a big problem, did somebody already fixed it?

Thank you!

Hi makinero,

Almost everything with IE6 is a big problem. If you have many IE6 users then I suggest that you don't try to put forms into lightboxes, or you use browser detection and use a standard popup for them.

Bob

Hi GreyHead, that's a good idea, how can I display a popup for IE6 and a lightbox for the other easily ?

I would know how to do that but it's a little bit complicate : duplicate the content : 1 for IE6 witch calls popups and another for all other browser. I detect IE6 using conditionnal comments.

I'd prefer an automatic solution using javascript (or other!)

Thank you!

No ideas?

Hi makinero,

Sorry, I don't know and I'm not spending any time researching IE6 solutions if I can possibly help it.

Bob

Boy o boy! A lot of good work and ideas have been generated and posted here. Harmonising the data for a solid strategy has proven tedious wiht a lot of tweaking for me.

I am humbly requesting either the admin or someone put together a holistic code to put a form in a lightBox, from start to finish, and do the following in the lightBox:

1. provide summary of data entered by user
2. allow data to be edited
3. include a print button (if possible)
4. close lightbox on submit
5. redirect to a "Thank You" page

This will be very helpful for newcomers to the thread and newbies to CF and Joomla. I understand following the thread can enlighten one on the final solution but every solution has been improved upon at every stage without restating previous steps. FOr instance, one of the solution steps refered to a red highlight but my browser didn't show any code in red and so not sure which code snippet I am been asked to replace.

Please help consolidate the code into one solution. Thx

Hi obisi7,

On my 'To-Do' list but don't hold your breath :-(

Bob

Thx Greyhead for putting it on your "To Do" list. It is worth waiting for and I will go swimming where I can hold my breadth. 😀

Thank you to everyone who provided the instructions for opening a form in a lightbox! It took some muddling around, but I've got everything working - including having the Thank You message appear in the lightbox (in a blank template with no menus, header, etc.).

I just wanted to share briefly how I did this, in case anyone's having trouble:
Create a form as usual. Don't add any of the suggested code to the form itself (it will be added elsewhere). The input line for submit should just be

<input value="Submit" type="submit" />

That way the lightbox will not close itself after Submit, and will be able to display your thank you message.

Create a custom module and add a link to your form - mine looks like this

<a class="modal" href="index.php?option=com_chronocontact&chronoformname=news_alerts&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 500}}">Sign Up for News Alerts</a>

The reason for the

&tmpl=component

at the end of the url is so the form will open up in a blank template. (Change x and y numbers to alter the size of the lightbox.)

Next, you need to add the line

<?php JHTML::_('behavior.modal'); ?>

just before the

</head>

tag in your default template's index page. Now, when you click on the link to your form, it should open in a lightbox, in a blank template with no menu, header, etc. surrounding it.

Getting the Thank You message to open in the same blank template was a little harder. For this I had to change line 100 of components/com_chronocontact/chronocontact.html.php to

$actionurl = $MyForm->formrow->submiturl.'&tmpl=component';

and line 102 to

$actionurl = JURI::Base().'index.php?option=com_chronocontact&task=send&chronoformname='.$MyForm->formrow->name.'&tmpl=component';

I don't know if both those changes were actually needed, but the form works wonderfully, all e-mails are sent properly, etc.

One note - I think there must be a way to add the

&tmpl=component

part in the backend, in the "Submit Urls" box under the "Form Urls" tab... I experimented with this but couldn't get it to accept a variable for the url, so decided to change the component's code instead.

With this method, it's easy to put all of your forms in a lightbox - you just have to set up the modal-class link for each one as described above. Max or others, maybe you can improve on my methods?? Again, thank you again for working so hard on ChronoForms - it is by far the best, and gets even more flexible with the lightbox!

Note - sorry if this posts twice - I hit Save instead of Submit but luckily had copied my post first - why is the "Save" option there?!🤨

I stuck on the first line :-(.
Where do I put <input value="Submit" type="submit" /> code?
I created a simple form and when I go on the "form edit", I can't find the appropriate place for that code.
Please, help me!

Getting the Thank You message to open in the same blank template was a little harder. For this I had to change line 100 of components/com_chronocontact/chronocontact.html.php to

$actionurl = $MyForm->formrow->submiturl.'&tmpl=component';

and line 102 to

$actionurl = JURI::Base().'index.php?option=com_chronocontact&task=send&chronoformname='.$MyForm->formrow->name.'&tmpl=component';

I don't know if both those changes were actually needed, but the form works wonderfully, all e-mails are sent properly, etc.

Are you sure it is line 100 and 102 that you've changed? Because, in the same file I've got this on the line 100:
<style type="text/css">
and this on the line 102:
background:#FFD5D5 url(<?php echo $CF_PATH.'components/com_chronocontact/css/'; ?>images/alert.png) no-repeat scroll 10px 50%;

Can you please put the code that you've replaced?
Thank you!

This code

<input value="Submit" type="submit" />

should just appear in your form's html when you add the submit button the normal way in Chronoforms. I was just saying don't change it (in other words, don't add any onclick javascript to make the lightbox close, as was suggested in some previous posts here).

As for line 100 and 102, it may be different depending on what editor you are using (and maybe which version of Chronoforms). Just look for the 2 lines that begin

$actionurl = 

and change those.

I hvae only 1 line beggining like that, it's line 157 (Dreamweaver editor).
Here's the code of my \components\com_chronocontact\chronocontact.html.php file:

<?php
/*
/**
* CHRONOFORMS version 3.1 
* Copyright (c) 2008 Chrono_Man, ChronoEngine.com. All rights reserved.
* Author: Chrono_Man (ChronoEngine.com)
* @license		GNU/GPL
* See readme.html.
* Visit http://www.ChronoEngine.com for regular update and information.
**/

/* ensuring that this file is called up from another file */
defined('_JEXEC') or die('Restricted access');
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
$mainframe =& JFactory::getApplication('site');
$mainframe->initialise();

class HTML_ChronoContact {
// Procedure for building the table
function showform( $row, $posted ) {
 	global $mainframe;
	$database =& JFactory::getDBO();
	$MyForm =& CFChronoForm::getInstance($row->name);
	$CF_PATH = ($mainframe->isSite()) ? JURI::Base() : $mainframe->getSiteURL();
	if((!empty($MyForm->formrow->name))&&($MyForm->formrow->published)){
		?>
		<?php if (($MyForm->formparams('LoadFiles') == 'Yes')||( trim($MyForm->formparams('validate')) == 'Yes')||($MyForm->formparams('captcha_dataload'))){ ?>	
			<?php JHTML::_('behavior.mootools'); ?>
        <?php } ?>
        <?php ob_start(); ?>
        
        <?php if ($MyForm->formparams('LoadFiles') == 'Yes'){ ?>        	
			<?php if((!trim($MyForm->formrow->theme))||(trim($MyForm->formrow->theme) == 'default')){ ?>
                <!--[if gte IE 6]><link href="<?php echo $CF_PATH.'components/com_chronocontact/themes/default/css/'; ?>style1-ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
                <!--[if gte IE 7]><link href="<?php echo $CF_PATH.'components/com_chronocontact/themes/default/css/'; ?>style1-ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
                <!--[if !IE]> <--><link href="<?php echo $CF_PATH.'components/com_chronocontact/themes/default/css/'; ?>style1.css" rel="stylesheet" type="text/css" /><!--> <![endif]-->
            <?php
            }else{
                $directory = JPATH_SITE.'/components/com_chronocontact/themes/'.trim($MyForm->formrow->theme).'/css/';
                $results = array();
                $handler = opendir($directory);
                while ($file = readdir($handler)) {
                    if ( $file != '.' && $file != '..')
                        $results[] = $file;
                }
                closedir($handler);
                $counter = 0;
                foreach($results as $result){				
                ?>	
                    <link href="<?php echo $CF_PATH.'components/com_chronocontact/themes/'.trim($MyForm->formrow->theme).'/css/'.$result; ?>" rel="stylesheet" type="text/css" />
                <?php
                //$counter++;
                }
            }
            ?>
            <script type="text/javascript">
			<?php
				echo "var CF_LV_Type = '".$MyForm->formparams('validation_type', 'default')."';";
			?>
			</script>
            <link rel="stylesheet" href="<?php echo $CF_PATH; ?>components/com_chronocontact/css/calendar2.css" type="text/css" />
            <link href="<?php echo $CF_PATH.'components/com_chronocontact/css/'; ?>tooltip.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="<?php echo $CF_PATH; ?>components/com_chronocontact/js/calendar2.js"></script>
            <script src="<?php echo $CF_PATH.'components/com_chronocontact/js/'; ?>livevalidation_standalone.js" type="text/javascript"></script>
            <link href="<?php echo $CF_PATH.'components/com_chronocontact/css/'; ?>consolidated_common.css" rel="stylesheet" type="text/css" />
			<script src="<?php echo $CF_PATH.'components/com_chronocontact/js/'; ?>customclasses.js" type="text/javascript"></script>
            <?php
				include(JPATH_SITE.DS.'components'.DS.'com_chronocontact'.DS.'libraries'.DS.'includes'.DS.'JSvalidation.php');
            ?>
		<?php } ?>	
        <?php
		if (($MyForm->formparams('LoadFiles') == 'Yes')||(trim($MyForm->formparams('datefieldsnames', '')))){
		?>
			<?php
            if($MyForm->formparams('LoadFiles') != 'Yes'){
            ?>
                <link rel="stylesheet" href="<?php echo $CF_PATH; ?>components/com_chronocontact/css/calendar2.css" type="text/css" />
                <script type="text/javascript" src="<?php echo $CF_PATH; ?>components/com_chronocontact/js/calendar2.js"></script>
            <?php } ?>
            <?php JHTML::_('behavior.mootools'); ?>
            <script type="text/javascript">	
                window.addEvent('domready', function() {
                <?php
                //include_once(JPATH_SITE.DS.'components'.DS.'com_chronocontact'.DS.'libraries'.DS.'includes'.DS.'JSCustomClasses.php');
                $datefieldsnames = explode(",", $MyForm->formparams('datefieldsnames'));
                if(count($datefieldsnames)){
                    foreach($datefieldsnames as $datefieldsname){
                        if(trim($datefieldsname)){
                            HTML_ChronoContact::initiateCalendar(trim($datefieldsname), $MyForm);
                        }
                    }
                }
                ?>
                });
            </script>
			<?php
		}		
        ?>
		<style type="text/css">
			span.cf_alert {
				background:#FFD5D5 url(<?php echo $CF_PATH.'components/com_chronocontact/css/'; ?>images/alert.png) no-repeat scroll 10px 50%;
				border:1px solid #FFACAD;
				color:#CF3738;
				display:block;
				margin:15px 0pt;
				padding:8px 10px 8px 36px;
			}
		</style>	
		
		<?php if((trim($MyForm->formparams('validate')) == 'Yes')&&($MyForm->formparams('LoadFiles') != 'Yes')){ ?>
        		<script type="text/javascript">
				<?php
					echo "var CF_LV_Type = '".$MyForm->formparams('validation_type', 'default')."';";
				?>
				</script>	
				<script src="<?php echo $CF_PATH.'components/com_chronocontact/js/'; ?>livevalidation_standalone.js" type="text/javascript"></script>
				<link href="<?php echo $CF_PATH.'components/com_chronocontact/css/'; ?>consolidated_common.css" rel="stylesheet" type="text/css" />
                <?php include(JPATH_SITE.DS.'components'.DS.'com_chronocontact'.DS.'libraries'.DS.'includes'.DS.'JSvalidation.php'); ?>                
        <?php }  ?>		
        <?php if( (trim($MyForm->formparams('validate')) == 'Yes')||($MyForm->formparams('LoadFiles') == 'Yes')){ ?>
        <script src="<?php echo $CF_PATH.'components/com_chronocontact/js/'; ?>jsvalidation2.js" type="text/javascript"></script>
        	<?php
				$jsformname = "ChronoContact_".$MyForm->formrow->name;
				$valonBlur = $MyForm->formparams('validate_onlyOnBlur', 1) ? 1 : 0;
				$valonSubmit = $MyForm->formparams('validate_onlyOnSubmit', '0') ? 1 : 0;
				$valwait_time = $MyForm->formparams('validate_wait', 0);
				echo "<script type='text/javascript'>
				var fieldsarray = new Array();
				var fieldsarray_count = 0;";
				echo "window.addEvent('domready', function() {
				elementExtend();";				
				echo 'setValidation("'.$jsformname.'", '.$valonBlur.', '.$valonSubmit.', '.$valwait_time.');';
				echo "});";
				echo "</script>";
			?>	
        	<?php include(JPATH_SITE.DS.'components'.DS.'com_chronocontact'.DS.'libraries'.DS.'includes'.DS.'JSvalidation2.php'); ?>
		<?php } ?>
        <?php if(!empty($MyForm->formrow->scriptcode)){ 
			echo "<script type='text/javascript'>\n";
			echo "//<![CDATA[\n";
			eval("?>".$MyForm->formrow->scriptcode);
			echo "//</XMLCDATA>\n";
			echo "</script>\n";				
		}		
		?>
        <?php if(!empty($MyForm->formrow->stylecode)){ ?> 
			<style type="text/css">
			<?php eval("?>".$MyForm->formrow->stylecode); ?>	
			</style>		
		<?php }	?>
        <?php $header_code = ob_get_clean(); ?>
        <?php
			
		?>
		<?php 
			$actionurl = $MyForm->getAction($MyForm->formrow->name);		
		?>
		<?php
			$session =& JFactory::getSession();
		?>
		<?php if($MyForm->formerrors){ ?>
            <span class="cf_alert"><?php echo '<ol>'.$MyForm->formerrors.'</ol>'; ?></span>
		<?php } ?>
        <?php
			if (($posted)&&($MyForm->formparams('captcha_dataload'))){
				include_once(JPATH_SITE.DS.'components'.DS.'com_chronocontact'.DS.'libraries'.DS.'includes'.DS.'JSrepublish.php');
			}
		?>
<form name="<?php echo ($MyForm->formname) ? $MyForm->formname : "ChronoContact_".$MyForm->formrow->name; ?>" id="<?php echo "ChronoContact_".$MyForm->formrow->name; ?>" method="<?php echo $MyForm->formparams('formmethod'); ?>"<?php if($MyForm->formparams('uploads') == 'Yes'){ echo ' enctype="multipart/form-data"'; } ?> action="<?php echo $actionurl; ?>" <?php echo $MyForm->formrow->attformtag; ?>>
		
				<?php					
					$imver = "";					
					if ( trim($MyForm->formparams('imagever')) == 'Yes' ) {
						$imver = '<input name="chrono_verification" style="vertical-align:top;" type="text" id="chrono_verification" value="" />
							  <img src="'.$CF_PATH
							.'components/com_chronocontact/chrono_verification.php?imtype='.$MyForm->formparams('imtype').'" alt="" />';
					}
					$MyForm->formrow->html = str_replace('{imageverification}',$imver,$MyForm->formrow->html);
					eval( "?>".$MyForm->formrow->html );
				?>
		<?php echo JHTML::_( 'form.token' ); ?>	
        <?php if($MyForm->formparams('enablecftoken', 1)){ ?>
        	<input type="hidden" name="1cf1" value="<?php echo $MyForm->generateCFToken($MyForm->formrow->name); ?>" />
        <?php }	?>
        <?php if($MyForm->pagetype != 'chronocontact'){ ?>
        	<?php $session->set("cfreturnurl_".$MyForm->formrow->name, $MyForm->selfURL(), md5('chrono')); ?>
        <?php }	?>
</form>

<?php eval(base64_decode('JGRvY3VtZW50ID0mIEpGYWN0b3J5OjpnZXREb2N1bWVudCgpOw0KJGRvY3VtZW50LT5hZGRDdXN0b21UYWcoJGhlYWRlcl9jb2RlKTsNCmVjaG8gJE15Rm9ybS0+YWRkaGFzaCgpOw==')); ?>	

		<?php
		} else {
		echo "There is no form with this name or may be the form is unpublished, Please check the form and the url and the form management";
		}
	}
	function selfURL() {
		$uri =& JURI::getInstance();
		$inbetween = '';
		if($uri->getQuery())$inbetween = '?';
		return $uri->current().$inbetween.$uri->getQuery();
	}
	
	function initiateCalendar($datefieldsname, $MyForm){
	?>
		myCal_<?php echo $datefieldsname; ?> = new Calendar({ <?php echo $datefieldsname; ?>: '<?php echo $MyForm->formparams('datefieldformat', 'd/m/Y'); ?>' }, { <?php echo $MyForm->formparams('datefieldextras', "classes: ['dashboard']"); ?> }); 				
	<?php
    }
	
	
}
?>

... and where can I find older versions of ChronoForms?

Hi munja1985,

You can request them from Max through the Contact Us link above.

But why do you need an older version?

Bob

because of my previous post. I'm trying to get the form inside pop-up window. I'm doing what vickipaye has described but don't have the same chronocontact.html.php file as he has.

vickipayne, what version of the chronoform do you use?

Thx to all who have simplified putting a form or multi-page form in a lightbox. However, I am having difficulty trying to access the form in a lightbox via a menu link. The last solution suggested putting a line of code in a custom module. For as long as this module is a link, I can display the lightbox except for these two problems:

1. I can't access it via a menu item. I tried pointing the menu to a CF Motherform (using the multi-page pluggin methods) which of course bcz it has no form html returned an error.
2. I am testing with two forms. Form1 displays in the lightbox as expected but upon clicking the "submit" button, the second form (FOrm2) displays as well in the lightbox but with the full site template (banner, side menu, and all). Not sure why.

Pls assist and God bless.

More info to the above posting. My url is http://ipatrivers.rvha.gov.ng/park and you'll see a link on the left of the homepage called "Client Survey". You'll agree that this makes the layout unacceptable and hence my need to put the link in the menu bar.

Hi obisi,

Have you tried putting the link into an External URL menu type?

Bob

I thought I did that but the problem is it just displays the page containing the module that has the link for popping up the lightbox. Unless I am mistaking on the correct link url. I am not sure how to reference or modify the link when the lightbox displays since the page doesn't change. The lightbox was launched from the page that contains the module with the form link.

How do I display a CF form in a lightbox upon menu selection without first displaying a page with another link to be clicked just to achieve this? In the normal form display via a menu link using CF component type, the form just displays with the CF form name given.

I hope I am making sense. Pls S.O.S

Hi Obisi,

I'm not following the whole thread but as for your last question, I think you need a menu item of type URL and add the index2.php version of the form link, and some how give this link a class (maybe the menu item options? ) which will trigger the lightbox!

Regards,
Max

Max let me see if I can make myself clearer the issue.

1. Per an advice on this thread to display a form in a lightbox, I created a custom module and entered the following code in it: <a class="modal" href="index.php?option=com_chronocontact&chronoformname=surveyPage1&tmpl=component" rel="{handler: 'iframe', size: {x: 1100, y: 500}}">Client Survey</a>

2. I then displayed this module on the home page on the left module position. Clicking the link in the module then displays the CF form named in the code.

3. Now I wanted to display the form as contained in the lightbox via a menu link instead of first displaying a module and then clicking on the link inside the module. I copied the url shown when the lightbox is displayed with the form as in step 2 above.

4. The problem is that on selecting the menu item linked as in step 3 above only displays the page with the module and its link. I have to click on the link in the module to display the lightbox. The question is how can the mun link just go straight to the form displayed in the lightbox? I've tried a menu type using external link and using CF component but no luck. This is probably bcz the url when the lightbox is displayed is same as when the module page is displayed.
5. Unless I am been advised that the suggested solution in 1 above is not adaptable to displaying the lightbox and forms via a menu link, then what other way can one do this? I reviewed the erlier advice and there were so many edits to the steps that I am not sure how to begin or end until this elegant and simple solution came about; a soluiton that works from Module link, apparently.

5. A related issue had to do with using the multi-page plugin to display more than one form in the lightbox. I followed Bob's tutorial and was able to display the two forms. However, the second form showed up in the lightbox with site template, header, and side menus instead of just displaying only the form as it did for the first form. This one is a stunner and still waiting for an advice. Bob only suggested that CF was not meant to handle such ... I am sure I am mis-reading Bob's posting bcz I've not made any special request here other than following advice on multipage plugin. Maybe the special string breaks down in a lightbox when doing a multipage form.

I hope this is as clear as mud and I thank you, Bob, and others for any assistance you can render. My url is ipatrivers.rvha.gov.ng/park

Hi Obisi,

for a link to show a lightbox in Joomla, the link must have the "modal" as class, I don't think you can assign classes for menu items in Joomla (I tried this myself and there is no option to do this) and so I'm afraid you can't do what you need!😟

regarding #5, you may change the submit url for your mother form to be the same submit url of it (just view source the form and copy the action link) but replace index.php by index2.php and I think this should fix this problem!

Regards
Max

Max,

Thx for your response. Regarding your suggestion for point #5 (using the multipage plugin) to prevent second form from displaying with site templates, etc.

I don't understand the suggestion since the mother form does not have a submit url and the advice on using the multipage pluggin is to insert a submit button for each page.

Please help me clarify what you're suggesting as follows:

1. Which form has what submit code, and what is that code
2. Should there really be a submit code in motherform as I don't have any now and my forms (at least the first one) is called up correctly.

If I can get the multipage forms to work as implemented, I can leave with having an article or module link to bring up the form since it is impossible to do it from a menu otem for now.

Thx for clarifications and direction. Again my url is <!-- w --><a class="postlink" href="http://www.ipatrivers.gov.ng">www.ipatrivers.gov.ng</a><!-- w -->

Hi all, thanks for the component and this tutorial. Finally thanks to vicky i managed to put the form in a clean lightbox to avoid the loading of my joomla template, but i found a problem...

Evrything is aligned to the right!

It's weird, and I don't know how to arrange this, to have the content of the form aligned left as it should be. I suposse that when I use the &tmpl=component" code, then everything sohuld show in a plain way, but unfortunately...

Any idea qhy this happens?

Thanks!

Hi Sauko,

Well, your template css won't be loading so you may need to load some of it or add your own.

Bob

Thanks for the reply Greyhead, but do you mean in the form's Css field at chronoform's component? I am not so good at css, so don't know where, or how to do that... maybe add some basic css descriptions in that field, concerning alignment and so?

vickipayne, what version of the chronoform do you use?

Hi, there. I'm sorry I didn't respond sooner. I assumed I would get e-mailed when someone posted but I guess I'm not subscribed to the topic. For the changes I posted, I was using version 3.1 RC4.11 - I see myself now that the code is different in the later versions, so I don't know if similar changes will work in those versions or not.

Has anyone been able to achieve this using the latest version V3.1 _RC5.5?

The lines of code vicki refers to are not in chronocontact.html.php in this version

I have the form opening in a lightbox, just want the thankyou note in the same box ? (given up on trying to close on Submit🙂 )

Cheers


Dean

I was also having the same problem. Thanks. I will try inserting the code and see if works for me. I tried a different code snippet from another forum but had no luck.

Thanks for solving my problem too. I had the same problem. After countless hours I had to come here to ask, and found this thread was already here.. Thanks again.

Hi,
I am also using a lightbox and try to add this code to the submit button in the formcode:

<input value="Absenden" name="button_5" type="submit" onclick="window.parent.Shadowbox.close();" />

The shadowbox is closed, but the email is not sent.
What am I doing wrong?

Ok, solved by myself :-)
This code in the On Submit Code after sending email is the solution for me:

<script type="text/javascript">
<!--

 window.parent.Shadowbox.close();

//-->
</script> 

Ok, solved by myself :-)
This code in the On Submit Code after sending email is the solution for me:

<script type="text/javascript">
<!--

 window.parent.Shadowbox.close();

//-->
</script> 

You actually saved meee! Thx you so much.

Sorry to reawake this subject but I am having serious problem due different behavior of solution suggested.

I have a form (Volunteer) that is posted through a link in a module position on the frontpage of my website: <!-- w --><a class="postlink" href="http://www.gardencitygames2010.com">www.gardencitygames2010.com</a><!-- w --> using this link: <a class="modal" href="index.php?option=com_chronocontact&chronoformname=volunteer&tmpl=component" rel="{handler: 'iframe', size: {x: 1210, y: 500}}">Submit a Volunteer Application</a>

I have entered all the suggested scripts and additional code snippets into form code and javascript box of the form. Here's my problem:

1. The background of the form is set to a color that was never indicated in any pf the form code or site preference. I am not sure where this background color is coming from. I'll ratehr not have a background color other than white, the default as designed in Dreamweaver.

2. My form is offset to the right within the iframe thus creating unnecessary horizontal scroll and offscreen content of the form. I have defined enough width for the iframe for my form to fit within the screen without scrolling. Is there a fullscreen variable for iframe to ensure that the form will always be displayed fully?

3. I am also using the popular ReCaptcha and have indicated {ReCaptcha} where I want this displayed in my form. I have signed up and configured for primary and secondary keys but not sure how to make CF recognize my use of Recaptcha. I went to the plugin config in forms management, enabled this option but not sure what to input in the text box next to the option. The tooltip for this option simply says "more on this later.." but no clue as to where theat more info is coming from.

I need to get rid of the color in background, flush the form to the left of the iframe, and probably implement the Recaptcha. Thx

Hi obisi7,

There is something odd about the iframe loading. You have a large chunk of the Joomla tempalte being included there as well as the form. This may be connected to the stray //]]> at the beginning of the page. It might also be that tmpl=component isn't working cleanly with this template :-(

The background color comes from this line of template CSS that is being included in the iframe:

#rt-main-surround, #rt-variation .bg3 .module-content, #rt-variation .title3 .module-title {background:#bd5720;}

The left margin also seems to come from the template CSS and is a result of the center alignment of the main block.

You need to Enable the ReCaptcha plug-in in the Form Plugins tab and make sure that you have {ReCaptcha} in the Form HTML.

My version of the Plug-in has this on the Help Tab

The plugin allows you to use ReCaptcha form verification with your ChronoForms Form.
ReCAPTCHA is a completely independent verification system that is widely used on the Internet - see their site for more information.

* The plugin comes with a pair of global ReCaptcha so that it will work immediately. For your own security we strongly recommend that you register at the ReCaptcha site and get your own keys limited to your site. Registration is simple, free and quick. When you have your keys copy and paste them over the keys here and re-save the plugin. You may use the same keys with any number of forms on your site.
* You will need to include the ReCaptcha box in your form HTML using {ReCaptcha}. You can do this using a 'Text' item from the Toolbox with a value of {ReCaptcha}. You may need to editt the styling a little to format the box correctly (try removing the 'form_element' class from the surrounding div).
* If your form is using SSL and the url has an 'https' prefix, set SSL Server to yes - otherwise leave it as No.
* The theme list are those provided as default by ReCaptcha, it is possible to develop a custom theme - please see the instructions on the ReCaptcha FAQs and Wiki.
* The languages listed are those provided as default by ReCaptcha, to change or add other languages please see the ReCaptcha site.
* You should not need to change the server settings unless ReCaptcha make a change in their service.
* Once this plugin is configured you must enable it in the Form 'Plugins'' tab.

Bob

Thx the Great One. But I am now thouroughly confused by your findings:

1. I don't know where you're seeing the template inclusion as I don't have it in my form code or anywhere else. The form header may be misleading as coming from the template, I just happen to be using the same header graphics on the form in case someone decides to print the form and submit manually

2. I am using exactly the same implementation of the form in an iframe as I use on my other site (iprivers.com) for client survey (link on top of page).

3. Regarding the Recaptcha, I have configured the recaptcha plugin as a registered user. I know to enable the plugin in the form plugin tab. The strange thing now is that at the time I submitted the initial post, when I click on the plugins tab I see a listing of the plugins on the left with checkboxes where each one can be enabled and to its right is a textbox (hence my quesiton as to what do I enter here).

But now, the form's plugin tab simply presents all the 13 or so plugins all enabled (green checkmark showing) in a table with red background color so I guess recaptcha is enabled. I no longer see the format I describe above in form plugin tab.

4. The important thing is that the plugin code {ReCaptcha} just shows up in the form field instead of displaying the necessary security image.

5. Do I need to enable image verification on the form's General tab? I don't think so as that usually enables CF's image verification.

I am a confused user at this point and needing your kind help and those of others. Please forgive me if you have a solution and ignore because you think I am only addressing Greyhead; I am not.

Thx

Hi obisi7,

the form's plugin tab simply presents all the 13 or so plugins all enabled (green checkmark showing) in a table with red background color so I guess recaptcha is enabled. I no longer see the format I describe above in form plugin tab.

But no . . . what you see is a set of red bars telling you that they are all disabled; and green check marks telling you that if you click it it will be enabled. (Yes, its awful UI and much criticized.)

I don't know where you're seeing the template inclusion

I'm just looking at the Page Source of the form in the iframe with FireBug. I don't know where it's coming from, just that it's there. Check the form with tmpl=component and you'll see more or less the same thing.

Bob

Thx Bob, I now see the page source and compared this with that of my other site (iprivers.com) and see that the other doesn't include the background color.

This template may not work right iframe popup display as it doesn't behave as expected even when using exactly the same line of code.

Here are the remaining issues I still can't fix:

1. The Recaptcha still doesn't work even after i enabled (clicked the plugin to green color bar) and inserted {Recaptcha} where I want the security image verification. All I get is the raw text spewed out.

2. Trying to use rokbox in place of iframe to display the form. I know that rokbox behaves properly with all templates. The only thing I am struggling with is how to do this. As you can see in the RokBox Test module, I can display pdf, images, and video from a module. If only I can insert a link to display my form, then I will be able to use rokbox and all these issues will go away. Quesiton, are you familair or knowledgeable on how I might embed a CF form link into the rokbox so that when a link or thumb is clicked the form will display?

If not, any further help with getting my Recaptcha to work will be appreciated. I am beginning to think that the trash code spewed out in the edit window of the form may be causing some weird behaviors (thinking this you know I am at my wits end and looking for a solution).

thx

Hi obisi7,

Please check that you have {ReCaptcha} (not {Recaptcha})

I'm not sure how RokBox is going to help you - you'll still need to use it as a iFrame to display the form code. I don't know much about RokBox I'm afraid. I'll install and take a look later if I have time.

NB You still haven't fixed the //]]> appearing at the start of the form !!

Bob

Bob, thx for your patience and help on this issue. In fact, I am beginning to believe that the unexpected behavior of spewed trash code in the form edit window may be affecting the sanctity of code processed. For the life of me, I don't see the extra strings you cited (//]) for me to fix in the form code. Also, the {ReCaptcha} is entered as instructed and plugin enabled. Please see my complete form code below for inspection:

<?php JHTML::_('behavior.modal'); ?> 
<table width="946" height="786" border="0" align="left" >
    <tr>
      <td width="207" height="103" align="center" valign="middle"><div align="center"><img src="templates/rt_crystalline_j15/images/logo/logo.png" width="171" height="200" alt="gamesLogo" /></div></td>
      <td colspan="4" align="center" valign="middle"><h2 class="style1"><img src="images/stories/thumb/slogan.png" width="353" height="101" alt="Garden City Games" /></h2>  
      <h2 align="center" class="style1">VOLUNTEER APPLICATION</h2>      <label></label></td>
      <td width="139" align="center"><img src="images/stories/thumb/gcmascot4.png" width="93" height="184" alt="mascot" /></td>
      <td width="137" align="center"><p>Attach Your Photo Here:</p>
      <p>
        <label for="photo"></label>
        <input type="file" name="photo" id="photo" />
      </p></td>
    </tr>
    <tr>
      <td height="21" colspan="7" align="left" valign="top"><hr /></td>
    </tr>
    <tr>
      <td height="87" colspan="7" align="left" valign="top"><span class="style3">INSTRUCTIONS: </span><span class="style4"> These instructions must be followed exactly. Fill out application form completely. If questions are not applicable, enter "NA". Do not leave questions blank. If submiting a printed application, then print in black block letters or type and be sure to sign when completed. The Local Organizing Committee (LOC) is an Equal Opportunity Employer and does not discriminate on the basis of race, color, ethnic/national origin, sex, religion, age or disability in employment . You may be invited for an interview if selected so please prepare to properly identify yourself with valid IDs.<strong> YOU MUST BE 18 years or OLDER to qualify for selection as Sports Festival volunteer.</strong></span></td>
    </tr>
    <tr align="left">
      <td height="24" valign="middle">Name:</td>
      <td width="152" height="24" align="center" valign="middle"><label>
        <input type="text" name="surname" id="surname" />
      </label></td>
      <td width="144" align="center" valign="middle"><input type="text" name="firstname" id="firstname" /></td>
      <td width="152" align="center" valign="middle"><input type="text" name="middlename" id="middlename" /></td>
      <td height="24" colspan="3" align="center" valign="middle"><label>
        <input type="text" name="staffId" id="staffId" />
      </label></td>
    </tr>
    <tr>
      <td height="21" align="center" valign="middle"> </td>
      <td height="21" align="center" valign="middle">Last</td>
      <td height="21" align="center" valign="middle">First</td>
      <td height="21" align="center" valign="middle">Middle</td>
      <td height="21" colspan="3" align="center" valign="middle">National ID No.</td>
    </tr>
    <tr>
      <td height="72" align="left" valign="middle">Postal Address:</td>
      <td colspan="3" align="left" valign="middle"><label>
        <textarea name="address" id="address" cols="55" rows="4"></textarea>
      </label></td>
      <td colspan="3" align="left" valign="middle"><label>Mobile Phone(s). Separate with a comma:
          <textarea name="gsmPhone" id="gsmPhone" cols="45" rows="3"></textarea>
      </label></td>
    </tr>
    <tr>
      <td height="28" align="left" valign="middle">e-Mail:</td>
      <td colspan="3" align="left" valign="middle"><label>
        <input name="email" type="text" id="email" size="55" />
      </label></td>
      <td colspan="3">Sex: 
        <label>
          <input type="radio" name="sex" value="Male" id="willTowork_2" />
          Male</label>
        <label>
          <input type="radio" name="sex" value="Female" id="willTowork_3" />
      Female</label></td>
    </tr>
    <tr>
      <td height="43" colspan="4" align="left" valign="middle"><label>Please enter below your place of work and title. If a university student,  enter name of university:
          <textarea name="workPlace" cols="80" rows="4" id="workPlace"></textarea>
      </label></td>
      <td colspan="3" align="left"><label>Prior Volunteer Experience?</label> <label>
        <input type="radio" name="experience" value="Y" id="willTowork_4" />
        Yes</label>
        <label>
          <input type="radio" name="experience" value="N" id="willTowork_5" />
      No</label></td>
    </tr>
    <tr>
      <td height="60" colspan="4" align="left" valign="middle"><label>Special Skills or abilities (e.g. First Aid, CPR, etc): 
          <textarea name="skills" cols="55" rows="4" id="skills"></textarea>
      </label></td>
      <td colspan="3" align="left"><label>If yes, please state briefly your volunteerism:
          <textarea name="volExperience" id="volExperience" cols="45" rows="4"></textarea>
      </label></td>
    </tr>
    <tr>
      <td height="25" colspan="4" align="left" valign="top"><label>
        Volunteer Status Period: 
        <input type="checkbox" name="fullTime" id="fullTime" />
      Full-Time (Throughout the festival period)
      <input type="checkbox" name="partTime" id="partTime" />
      Part-Time 
      (to be agreed later)</label></td>
      <td colspan="3" align="left" valign="top"><label>Date Available to volunteer:
          <input type="text" name="startDate" id="startDate" />
      </label></td>
    </tr>
    <tr>
      <td height="25" colspan="4" align="left" valign="top">Are you willing to work hours other than 8:00 a.m. - 5:00 p.m.?      
        <label>
          <input type="radio" name="willTowork" value="Y" id="willTowork_0" />
          Yes</label>
        <label>
          <input type="radio" name="willTowork" value="N" id="willTowork_1" />
          No</label>        <br />      </td>
      <td colspan="3" align="left" valign="top"> </td>
    </tr>
    <tr>
      <td height="24" colspan="4" align="left" valign="top">Are you willing to drive participants as needed? 
        <label>
          <input type="radio" name="willToTravel" value="Y" id="willToTravel_0" />
          Yes</label>
        <label>
          <input type="radio" name="willToTravel" value="N" id="willToTravel_1" />
          No</label>        <br />      </td>
      <td colspan="3" align="left" valign="top"><label>If yes, what % of time?
          <input type="text" name="percentTime" id="percentTime" />
      </label></td>
    </tr>
    <tr>
      <td height="29" colspan="4" align="left" valign="top"><label></label>
        <p>Current Driver's License (if required for position):
          <label>
          <input name="driverLicense" type="text" id="driverLicense" size="40" />
          </label>
          <br />
      </p></td>
      <td colspan="3" align="left" valign="top">Commercial License? 
        <label>
          <input type="radio" name="licenseType" value="Y" id="licenseType_0" />
          Yes</label>
        <label>
          <input type="radio" name="licenseType" value="N" id="licenseType_1" />
          No</label>        <br />      </td>
    </tr>
    <tr>
      <td height="24" colspan="4" align="left" valign="top"><label></label>
        <p>
          <label></label>
          <label>Are you at least 18 years of age? </label><label>
          <input type="radio" name="aged17" value="Y" id="aged17_0" />
            Yes</label>
          <label>
          <input type="radio" name="aged17" value="N" id="aged17_1" />
            No</label>
        </p>        </td>
      <td colspan="3" align="left" valign="top"> </td>
    </tr>
    <tr>
      <td height="24" colspan="4" align="left" valign="top">Languages, other than your mother tongue and English, you are proficient in (list all):</td>
      <td colspan="3" valign="top"><label>
        <textarea name="languages" cols="45" rows="3" id="languages"></textarea>
      </label></td>
    </tr>
    <tr>
      <td height="24" colspan="4" align="left" valign="top">Have you ever been convicted of a felony or subjected to a deferred hearing of a felony? </td>
      <td colspan="3" valign="top"><p>
        <label>
          <input type="radio" name="felon" value="Y" id="felon_0" />
          Yes</label>
        <label>
          <input type="radio" name="felon" value="N" id="felon_1" />
          No</label>
        <br />
      </p></td>
    </tr>
    <tr>
      <td height="55" colspan="4" align="left" valign="top">If you answer "Yes", explain briefly (in the textbox on the right) giving date, and nature of the offense. A conviction may not disqualify you but lying about it will definitely.</td>
      <td colspan="3" valign="top"><label>
        <textarea name="felonyExplanation" id="felonyExplanation" cols="45" rows="4"></textarea>
      </label></td>
    </tr>
    <tr>
      <td height="4" colspan="7" align="center" valign="top"><hr /></td>
    </tr>
    <tr>
      <td height="24" colspan="4" align="left" valign="top">Education Note: Applicants may be required to provide proof of diploma, degree, transcripts.</td>
      <td colspan="3" align="left" valign="top">High School Graduate?
        <label>
          <input type="radio" name="primaryGrad" value="Y" id="primaryGrad_0" />
          Yes</label>
          <label>
          <input type="radio" name="primaryGrad" value="N" id="primaryGrad_1" />
            No</label>
          <br />      </td>
    </tr>
    <tr>
      <td height="27" colspan="3" align="left" valign="top">Enter the security code shown if applying online:</td>
      <td height="27" align="left" valign="top">{ReCaptcha}</td>
      <td width="3" height="27" align="center" valign="top"> </td>
      <td height="27" colspan="2" align="center" valign="top" bgcolor="#FFFFFF"><div align="right">
        <input type="submit" name="submit" id="submit" value="Submit Application" />
      </div></td>
    </tr>
  </table>

I am truly at a loss since I also see the strings in question when the form is displaying and may also cause the misbehavior of the display as no where am I including the template css colors in my code. Ummmm ... thx for your third eye looking at this.

Hi obisi7,

The problem isn't with the ChronoForms code. As far as I can see it's all working fine apart from some styling issues with the form layout.

The attached images show your form in a standard lightbox using the RocketTheme Crystalline template.

I made a couple of small changes (a) I removed the JHTML line from the Form HTML as it isn't needed there and (b) I added a CSS snippet to over-ride the width being set by the template:

div.rt-container {
  width:100%; !important
}

You can also see that the ReCaptcha displays OK - though you may have some problems handling any error messages from the lightbox.

Bob
[attachment=0]31-08-2010 18-09-19.png[/attachment]
[attachment=1]31-08-2010 18-01-42.png[/attachment]

PS This is written up in Chapter 12 of the ChronoForms Book

Bob,

Thx for the effort in showing an exaple with Crystalline template (hopefully that is the same latest crystalline template that I am employing ... rockettheme has an old and new version called by the same name). Nevertheless, I am still unable to figure out why my iframe implementation is not working for display and ReCaptcha.

While I try to figure it out, I decided to fashion the same form using Adobe tool and display in a rokBox(see gardencitygames2010.com and click on pdf link in Volunteer Application module).
Though this is a pretty implementation, it lacks the data save capability in the backend as CF does. Data is emailed and then can be imported into a spreadsheet as needed.

As you peruse this, I will appreciate any further comments on implementing same form in like fashion in CF and/or ideas for improving the PDF implementation.

Thx

P.S. Still researching if Adobe PDF design tool can use some anti-spam integration. Any ideas anyone?

nice tutorial and really helpful information about Lightbox

Thanks

You can also implement lighbox, shadowbox, greybox etc. by simply using...

This plugin.
http://extensions.joomla.org/extensions/style-a-design/popups-a-iframes/4277

Add class="modal" to your custom links after installing and enabling the plugin and you should be good to go. - this will keep the template.

OR

Add &tmpl=component to the form url in your custom link - this will remove the template from being used inside the pop-up.

Example:

index.php?option=com_chronocontact&chronoformname=your_form_name&tmpl=component

If you have problems with validation afterward see here.
http://chronoengine.com/forums.html?cont=posts&f=2&t=19633

Hi guys,


First of all I`m green, I`m more of a hardware/networking guy but the lack of budget made me to configure my website alone. with my partner that unfortunately has the same "skills" that I have in this.

I want to use chronoform inside lightbox but i`m stucked. lightbox won`t work not to mention that I haven`t went that far to try to implement chronoform into lightbox. the rel="shadowbox" isn`t working no matter what I do. the test website is intern.admit.ro/test/gazduire-web there I want to put a multipage form but those images won`t even open with lightbox.

I don`t have a certain problem with chronoform, I tested it, it works independently although I have some issues with multipage option but there are answers here on the forum, the only problem looks to be the lightbox plugin that won`t work.

The plugin is published. I tried with rel="shadowbox" in the code but due to my green status I`m kind of stucked.

I appreciate all the help I can get. In exchange I can provide mirror advantages or other hosting facilities if desired.

Thank you.

Andrew

Hi tgu2k8,

Please see this post.

Bob

This is awesome...I used to resolve my issue...Thanks for this post...:)

Hey, I finally solve my problem after reading all discussions here. ChronoForms is great to use! But I encountered the PHP Calendar integration problem.

Hello,
I am also trying to display a multipage form in lightbox. I can get the first page to display without the template but cannot get the second page to display without the template.

I tried to follow the discussion here but I can't make sense of it.

Can someone please help me? Where do I declare the proper Submit URL? I have a mother form that wraps 2 child form.

Hi taung,

I've never tried to do that and probably wouldn't. You have to find some way of adding &tmpl=component to the urls of the successive forms. I don't know how to do this without hacking the core ChronoForms code?

Bob

Hi,
One thing that should work (though I have not tested this), is to add a hidden form input on each form such as this:

<input type="hidden" name="tmpl" value="component" />

/Fredrik

Hi tuang & nml375,

I tested Fredrik's version and that works for the 'Thank You page very nicely but not for the form itself. But that inspired me to try this which does seem to work OK. Add this code to the beginning of the Form HTML box.

<?php
$uri =& JFactory::getURI();
if ( $uri->getVar('tmpl') != 'component' ) {
  $uri->setVar('tmpl', 'component');
  $mainframe->redirect($uri->toString());
}
?>

Basically this checks the url, if it doesn't contain 'tmpl=component' it adds that to the query string and re-loads the page with the amended url.

Bob

thanks for solution

Sorry to bring back that subject !!!

I use JCE last version — last Joomla 1.5.23

and try that URL to link my form directly in the link tool in JCE Editor with the new JCE popup class attach

index.php?option=com_chronocontact&chronoformname=inscription-journal&tmpl=component

inscription-journal is the name of my form

The complete code in the editor (when apply) is:

<a class="jcepopup" href="index.php?option=com_chronocontact&chronoformname=inscription-journal&tmpl=component">link to form </a>


I know I’m doing something wrong — 🤨

It show the lightbox with a 404

Thanks for the help

Hi Chacapamac,

I don't know anything about the JCE lightbox I'm afraid.

You have a dash '-' in one of your form name. Dashes give ChronoForms and MySQL problems. Please rename the form using only [a-z], [A-Z], [0-9] or underscore '_'. No dashes, spaces or other special characters.

Bob

JCE Lightbox is working perfectly but the form is not reach with that URL
(I change the name of te form to “ inscriptionjournal”)

<a class="jcepopup" href="index.php?option=com_chronocontact&chronoformname=inscriptionjournal&tmpl=component">liens forme </a>

I’m going to JCE to have infos and will come back with the answer....

Fore sure, when in the editor I have to use relative URL... The problem is probably in the

inscriptionjournal&tmpl=component

part

I try

inscriptionjournal&?tmpl=component

still no luck

For JCE the link in the adv link is (in my case):
index.php?option=com_chronoforms&chronoform=inscriptionjournal&tmpl=component with the jcepopup class

You can have more control by adding in the Title of the ADV link windows

title[INSCRIPTION];width[780];height[760]

The only problem is on code error or password error the full template load in the lightbox????

How do you attach the fonction to the Chronoform submit button — I didn’t see any place to add the code to the submit button?
ANSWERING MYSELF:
I dont even remember what I was babling here , forget that..... 🙄

Ideally you will want to have some kind of Succes message coming up after the lightbox close to indicate a successfull registration to the user....... Can You?

ANSWERING MYSELF:
You can even have an article inside the lightbox after submission with a Redirect User Action (My url to my article is index.php?option=com_content&id=1756&tmpl=component....

Have anyone get this to work with the Chronoform v4?? Have tried a couple of the ways mentioned here, but no luck at all.

First I get a 404 message in the lightbox, and after changing the option=com_chronocontacts to option=com_chronoforms, it only comes up: the chronoform can NOT be empty.

Have anyone get this to work with joomla 1.5 and CF v4? Please let me know what silly mistakes im doing (yes, im pretty sure im doing something silly here..)

Thank you all

Hi,

getting exactly the same message with modal and jce (Form name can NOT be empty!)

<?php
JHTML::_('behavior.modal');
?>
<a class="modal" href="index.php?option=com_chronoforms&
chronoformname=formgeneralenquiry&tmpl=component"
rel="{handler: 'iframe', size: {x: 400, y: 200}}"
>General Enquiry</a>

<a class="jcepopup" title="Contact an Advisor" href="index.php?option=com_chronoforms&
chronoformname=formgeneralenquiry&tmpl=component" title="title[Submit Your Show];width[600];height[400]">Contact an Advisor</a>

This is a working JCE Lightbox

Top PHP for the Custom Form template

<?php
$uri =& JFactory::getURI();
if ( $uri->getVar('tmpl') != 'component' ) {
  $uri->setVar('tmpl', 'component');
  $mainframe->redirect($uri->toString());
}
?>

Link to Popup Registration
URL: index.php?option=com_chronoforms&chronoform=register
Classes: jcepopup noicon
Relationship page to target: width[780] width[800]

Thanks!

JCE Lightbox is working perfectly but the form is not reach with that URL — I get a 404

Chronoform ask for that type of url

Add &tmpl=component to the form url in your custom link - this will remove the template from being used inside the pop-up.

Example:
CODE: SELECT ALL
index.php?option=com_chronocontact&chronoformname=your_form_name&tmpl=component

My link in the advanced Link is :

index.php?option=com_chronocontact&chronoformname=inscriptionjournal&tmpl=component

and I add the Popup class.

As I was saying, Lightbox working but no form only 404...

can you help?

Thanks,
Apartment / Flat in Park Xpress, Pune

Question 1 : How come you have “chronocontact” in your url as I have “chronoforms“
Bob answer (Thanks) You have version 3 — My test is on version 4

Remarks: As you can see in my previous answer I’m not using “&tmpl=component” (I think something was wrong???, In my case but I use the previous PHP Code in the form code (remember to save the form as “custom” for that code to take effect...

I can’t help you if you using the “&tmpl=component” way. (didn’t work for me, I don’t remember what was the reason???)

Hi Chacapamac ,

URLs for ChronoForms v3 are like option=com_chronocontact&chronoformname=some_name
URLs for ChronoForms v4 are like option=com_chronoforms&chronoform=some_name

Bob

I did it with Chronoforms V4 and JCE lightbox:
In article:

<a class="jcepopup" href="http://interambient.com/index.php?option=com_chronoforms&chronoform=FormName" rel="title[<?php echo $Linktext ?>];width[<?php echo $width ?>];height[<?php echo $height ?>]">Any text here</a>

With variables I put all the data, if you do not put the rel, those parameters will load from the JCE plugin.

It works fine, doesen't load nothing of the original style but it does load some css styles so I used them to stylish the form. For the tooltip I used the qtip2, just put the script in the article file.

My problem is that I can't close the lightbox after submiting the form. The funtion to close it is "jcepopup.close()". I'm just not sure where to put it, my logical thinking make me put it in a module Load JS, when form is loaded... But it doesen't work... Also tried tu put it in the form... Tought that onsubmit is the best option, cause I'm not sure if its onclick, the form will be submited.... The best solution for me will be to put that funtion in the parent code, so I don't have to add that code in all of my forms...

Note: My site is made all in zoo, so I load the form with the homemade zoo element, wich loads the link in the article/item view.
See DEMO: http://interambient.com/index.php?option=com_zoo&task=item&item_id=145&category_id=1&Itemid=3
(temp, temp - to login)

I have the same problem, I can't close the lightbox after submiting the form. I did put it in a module Load JS, when form is loaded.To put that funtion in the parent code doesn't work for me but if won't have any other options i'll do it

nice tutorial and really helpful information about Lightbox

Thanks

I've been through this post several times now and while it has helped me to implement the form opening in Joomla's default lightbox and I can't for the life of me get the lightbox to close and redirect to the thank you URL in the parent window.

What I have so far is that on form submit the thank you page (with site template) is presented within the lightbox window.

I've tried implementing the suggestion to put the following in the "after submit code" section on chronoforms:

<script type="text/javascript">
window.parent.document.getElementById('sbox-window').close();window.parent.document.location = 'index.php?option=com_content&view=article&id=64&Itemid=100'
</script> 

I've also tried adding this to the submit button itself as:

onSubmit="window.parent.document.getElementById('sbox-window').close();window.parent.document.location = 'index.php?option=com_content&view=article&id=64&Itemid=100'"

None of this is working and I have to admit I'm starting to lose hope !

Can anyone please point me in the right direction ?

I'm using chronoforms version V3.2 with Joomla 1.5.23

Thanks in advance

Hi qmeister,

Please check the article here from The ChronoForms Book.

Bob

Hi Bob,

Thanks for the link. Problem is that in those examples you're loading a simple thank you message without the template. The user sees the message and can close the lightbox. In my case we have a thank message but also further prompts to visit other areas of the site. So we need to be able to close the Lightbox and that is the issue I'm having. I can't get it to close, whether I add the JS to the submit button or add it into the area "on submit code- after sending email".

My preference is the have the lightbox close after the submit button is clicked and then have the user redirected the the thank you page.

The beforementioned JS code isn't working for me.

I got it work at last.

I removed the redirect url from the "redirect url" field in the form's general settings tab.

Then in the "on Submit code -after sending email" I added:

<script type="text/javascript">
window.setTimeout('closeme();', 100);
function closeme()
{
parent.SqueezeBox.close();
window.parent.document.location = 'index.php?option=com_content&view=article&id=64&Itemid=100'
}

</script> 

That did the trick.

Hi qmeister,

Well done, a nice solution :-)

Bob

I was able to load a form in a lightbox with v4 and it was super easy. I used on my registration form as a link to a form using DB multi Record load, so members can find their Membership number when registering.

I just added a custom code event in the On Load box with the following:

<?php JHTML::_('behavior.modal'); ?>
    <a class="modal" href="index.php?option=com_chronoforms&view=getMemberno?&order=hoh_last&direction=asc&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 600}}">click here for Member Number Lookup</a>

I hope this helps someone,
Apryl

Hello everyone!
I read most threads but I have the same problem, I do not know how to open a form in a lightbox or similar!
Can anyone help me!
I do not know how to do, partly because I'm not very well versed with programming languages. I figure I should put some thing in java the form that I create, but I do not know what kind of insert commands. Then of course I do not know how to call this function in my link in my html page that calls the above form!
Moreover, I tried to enter a code that I found online (<? php JHTML :: _ ('behavior.modal'); ?> <a 'Iframe', size: {x: 400, y: 200}} " > Subscribe to our newsletter [/ url]) html in a form that I created to display a text that I wrote through the creation of an article with joomla. lightbox window opens me no problems, but I do not displays only the text that I created (article), but the whole page of the site (ie with lateral space, the top image and the like). What mistake? The strange thing is that by entering the code (a bit modified) html form, however, I view a lightbox window, even if the content does not match, but if I insert it in the html text of the article that interests me (connected to a sentence of course) nothing happens, but I rather opens a new standard tab with the page on the web site in the form, not caring about what I put! I hope I can help! Regards and thanks anyway
http://www.houseincity.com

Hi Nancycute,

Please see Apryl's post just before yours.

You need to add &tmpl=component to the URL to hide the rest of the template.

Later: I've added this FAQ based on Apryl's post.

Bob

Hi, when I open my form in a lightbox using &tmpl=component in the url. The page that loaded does not have link to my template's main css file. This caused the style to look different. Is there way to add the link to this component page?

For example i want to add this into the head of the page:
<link rel="stylesheet" href="/templates/my_theme/css/template.css" type="text/css" />

Thank you.

Hi will.chen,

You can use a Custom Code action in your form and use this code in it:

<?php
$doc =& JFactory::getDocument();
$doc->addStylesheet(JURI::root().'templates/my_theme/css/template.css');
?>

Or I have a Load CSS File action here that does the same thing.

Bob

great help ,i came to this article while searching this lightbox issue on google ,and got the help here thank guys

I am new to chronoEngine and I am learning this platform. thank you very much for this nice article. This is really helpful for me as a newbie.

I'm a new user to chronoforms, and its a great component. But i have a question about this topic...

When I do this and link to my form, the lightbox opens up but it displays the whole webpage and not
When I create a link in my article, I have the option to set the class to “JCE Lightbox”
just the form like I wanted.

Hi Sigorta,

You can add &tmpl=component to the URL to hide the template.

Bob

Hi!
Here:
http://greyhead.net/chronoforms/show-a-form-in-a-light-box
I've followed the tutorial but I can't get working "Thank you message".
Is this URL correct for v4?:

http://example.com/index.php?option=com_chronocontact &task=send

&chronoformname=form_name&tmpl=component

?
Thank you!

Anyone?

How can i use sexy lightbox in any content ? help me if you plz

Hi hopeeg,

This is a very old thread. What is sexy lightbox and how do you want to use it with ChronoForms?

Bob