Forums

open a form inside a pop-up window in CF v5

kwok 29 Nov, 2015
Hi Bob,

There is a topic about subject issue in Chronoforms 3.1 Cookbook.

There is also this guide: http://www.chronoengine.com/faqs/56-cfv4/cfv4-other-faqs/2680-how-can-i-show-a-form-in-a-lightbox.html

I tried both way but fails (form name: ID_Verified_Check_PopUp):

Here is the custom code:
<?php
JHTML::_('behavior.modal'); 
?>
<a class="modal" href="index.php?option=com_chronoforms5&chronoform=ID_Verified_Check&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 600}}">Verify ID</a>
There is no "Actions tab and drag in a Show HTML action" in chronoforms 5 so I used "HTML Render Form" in the "Setup" tab.

"Test Form" shows no "Verify ID" link to click.

Does this guide (http://www.chronoengine.com/faqs/56-cfv4/cfv4-other-faqs/2680-how-can-i-show-a-form-in-a-lightbox.html) does not work for cfv5? Can you provide a way that works for cfv5 at you earliest convenience?

Thanks.
kwok 30 Nov, 2015
Both methods suggested by the guide are not working:

1. The target link (Verify ID) is not displayed. Here is my custom code:
<?php
// load the Joomla! modal code
JHtml::_('behavior.modal'); 
// Over-ride the default CF CSS for a modal link
$jdoc = \JFactory::getDocument();
$style = "
#modal_a {
  display: inline;
  position: relative;
}";
$jdoc->addStyleDeclaration($style);
?>
<div><a class="modal" id='modal_a' href="index.php?option=com_chronoforms5&chronoform=ID_Verified_Check&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 450}}" >Verify ID</a></div>


2. NoNumber Modal Plugin -
I used a chronoform module to house the modal code {modal http://www.xxxxxxxxx.com/index.php?option=com_chronoforms5&chronoform=ID_Verified_Check}Verify ID{/modal}

It opens the target form inside a modal but upon submit the result is not shown inside the same modal while the input form variable {username} fails to convert. It actually looks like the input is not passed over to the php custom codes of the target form at all.
GreyHead 30 Nov, 2015
Hi kwok,

Where have you got your custom code? It needs to be in a Custom Code element in the Designer tab.

For the thank you message to be displayed in the Modal window I'm pretty sure that you have to use an iFrame setting to load the form.

Bob
kwok 30 Nov, 2015
Hi Bob,

Per the guide - "In the form Designer tab add a Custom Code element from the Advanced elements group and add code like this:" So I added there the code below:
{modal http://www.kuxol.com/index.php?option=com_chronoforms5&chronoform=ID_Verified_Check2}Verify ID{/modal}

Also do you mean to add a custom code before "Display Message" in OnSubmit?

Kwok
GreyHead 03 Dec, 2015
Hi kwok,

I edited my post, use the first example, (not the No Number one) and put the code in the Custom Code element in the Designer tab. That should work OK.

Bob
Santu28 04 Apr, 2016
Hi,

I have a similar requirement. I have image as a button which if clicked should display the chronoform as a pop up form. This is the code that I have tried. The code is placed inside the article. But its not working. It gives a 404 error page. The url is correct. Its what i get after clicking 'View form' option.

<p><a href="index.php?option=com_chronoforms&chronoform=Financial_Health_Check_Up&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 600}}"><img src="images/Free_Health_Check_up_button.png" alt="" /></a></p>


Any suggestions?

Thanks
GreyHead 04 Apr, 2016
Hi Santu28,

Are you using ChronoForms 4 or 5 - I suspect that it is 5 and you've missed the 5 from the URL???

Bob
Jojo 06 Apr, 2016
Hi,

I have a similar requirement. I want the form to pop up when a image button is clicked. I have tried this code:

<p><a href="index.php?option=com_chronoforms&chronoform5=Calculator&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 600}}"><img src="images/button.png" alt="" /></a></p>

This code is in the article where image is placed. Its not working. What can be wrong.

Thanks
GreyHead 06 Apr, 2016
Hi Jojo,

Please post a link to the form so I can take a quick look. There may be a JavaScript error on the page.

Bob
Jojo 06 Apr, 2016
http://safehandindia.com/investoplanner/index.php?option=com_chronoforms5&chronoform=Calculator
Jojo 06 Apr, 2016
Where I should write this code? Presently it is in a article page where image is there.
GreyHead 06 Apr, 2016
Hi Jojo,

I see this:
[list]The safehandindia.com page isn’t working
safehandindia.com is currently unable to handle this request.
HTTP ERROR 500[/list]
And I should have asked for the URL of the page with the link in it.

Bob
Jojo 06 Apr, 2016
http://safehandindia.com/investoplanner/

Here there is a Clickable image just beside the round chart. On clicking this it should pop up the form.
GreyHead 06 Apr, 2016
Hi JoJo,

The URL there is . . . option=com_chronoforms&chronoform5= . . . that should be . . . option=com_chronoforms5&chronoform= . . . the 5 is in the wrong place.

Bob
Jojo 06 Apr, 2016
Hi Bob,

Thanks. Yes that was the mistake. Its working now. But its a whole new page. I want like a pop up box smaller in size compared to homepage. Background should be seen. Like it shoulld open there itself and not navigate to other page.

http://safehandindia.com/investoplanner/index.php?option=com_chronoforms5&chronoform=Calculator&tmpl=component
GreyHead 06 Apr, 2016
Hi Jojo,

You'll need to load some modal window code to do that - what are you planning to use?

Bob
Jojo 11 Apr, 2016
Hi Bob,

I added a custom code event in On load event before HTML Render Form event. And wrote this code:
<?php
// load the Joomla! modal code
JHtml::_('behavior.modal'); 
// Over-ride the default CF CSS for a modal link
$jdoc = \JFactory::getDocument();
$style = "
#modal_a {
  display: inline;
  position: relative;
}";
$jdoc->addStyleDeclaration($style);
?>
<div><a class="modal" id='modal_a' href="index.php?option=com_chronoforms5&chronoform=Calculator&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 450}}" ></a></div>

But it still opens as a new page and not a pop up. Where Am I wrong?
GreyHead 11 Apr, 2016
Hi Jojo,

You can't load the form inside itself, the modal window code needs to be in an article or module (or possibly another form).

Bob
Jojo 17 Apr, 2016
Hi Bob,

I tried putting the entire code in the article where i have the clickable image. But still it opens as a whole new page.
GreyHead 17 Apr, 2016
Hi JoJo,

Unfortunately you can't add PHP to an article. What exactly do you need to do here, Is it to load the form in a modal window using a link in an article. You can try adding this line to your template index.php file, or put it in a module type that supports PHP on the article page
<?php JHtml::_('behavior.modal');  ?>

Bob
This topic is locked and no more replies can be posted.