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?option=com_facileforms&ff_name=popup&ff_border=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

Only registered users can write comments.
Please login or register.