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

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.

Hello kwok,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How can I open a Modal window from a CFv5 form?
P.S: I'm just an automated service😉

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.

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

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

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

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

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

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

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

http://safehandindia.com/investoplanner/index.php?option=com_chronoforms5&chronoform=Calculator

Where I should write this code? Presently it is in a article page where image is there.

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

http://safehandindia.com/investoplanner/

Here there is a Clickable image just beside the round chart. On clicking this it should pop up the form.

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

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

Hi Jojo,

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

Bob

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?

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

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.

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