When your form exceeds the component space available in your site template, you might want to run your form as a separate browser window. This short tutorial shows how to do it.
Creating The Menu Item
The first thing you need to do is create a menu item that will open the form in a separate window. I assume the form name is popup in this tutorial:
Go to the desired mambo menu (for example Menu - Main Menu)
Locate the icon labeled New and give it a click
In the select component list click on Link - URL and then on the button Next
In the Name field enter the desired item name to be displayed in the menu, for example My Popup Form
In the Link field enter the url as:
http://localhost/mambo451/index2.php...r=0&ff_frame=0
Now this might need a little explanation:
You need to change
http://localhost/mambo451 to your site url of cause
Using index2.php instead the usual index.php will make only the component show up instead of the whole page including headers, modules and so.
Change popup to the name of your form
It is also essential to add the parameter &ff_frame=0 for the scripts that will be added to the form later in this tutorial.
At On Click, Open in select New Window Without Browser Naviagation
Set the other parameters as you desire
Click on the Save icon to save the menu item.
Now you may check out the menu item in frontend. It allready is working, but it probably does not look too good since the window size is not adjusted to the form. You can change that in the form itself:
Changing The Window Size
Open your form settings in backend and go to the Scripts pane
At Initialization Script check Custom
Click on Create code framework and confirm the question whether to really do it.
Enter the window sizing commands into the body of the function as:
function ff_popup_init()
{
window.resizeTo(420, 430);
} // ff_popup_init
The name of the function will of cause be diffrent if your form has another name than popup. You need to set the width about 20 larger than the form width, and the height about 60 larger that the form height because the window size includes the browser frame and title bar.
Save the form
The form itself will show up perfectly now, but something is still missing. After submit you would most likly want the window to be closed again:
Closing The Windows
Open your form settings in backend and go to the Scripts pane
At Submitted Script check Custom
Click on Create code framework and confirm the question whether to really do it.
Enter the status notification and the window close commands into the body of the function as:
function ff_popup_submitted(status, message)
{
alert(message);
window.opener = self;
window.close();
} // ff_popup_submitted
The name of the function will of cause be diffrent if your form has another name than popup. The command windows.opener = self; will avoid the user getting asked if he really wants to close the window.
Save the form
Lesezeichen