Show the Contact Form in a modal popup lightbox window

15 Aug 2013 17:21 - 16 Aug 2013 09:02 #1 by Demis [Fox-Labs]
The following instructions are valid on Fox Contact 2.5.5 / 3.1.2 and newer. For those who have an older release, they need to upgrade.

Ensure that your website is loading the modal libraries

Open the main php file of your template (templates/your_template/index.php).
Search for the following line at at the top of the file
defined('_JEXEC') or die;
and add the following code immediately after it:
JHtml::_('behavior.modal', 'a.modal');

To be sure that your website is actually loading the modal library, open the html source of your page and search for the modal library traces:
<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
<script src="/media/system/js/modal.js" type="text/javascript"></script>
The exact path may vary based on your Joomla version, but the file names are modal.css and modal.js.

Create a contact form
  1. Create a new contact form using the component. There is a manual page in case that you do not want a corresponding item in the main website menu .
  2. Test the form to ensure that it is working.
  3. Take note of the URL of the form. For example it may be something like

Make the link modal

Now in your articles or html modules you can link to the form created above. On those links, specify that you want the link to be opened in a popup window, like in the following example:
<a class="modal" href="/contact.html?tmpl=component" rel="{handler: 'iframe',size:{x:800,y:500}}">Contact Form</a>

class="modal" tells Joomla to open the link in a modal window
href="/contact.html" is the URL of the contact form
tmpl=component tells Joomla not to load the template. The modal windows works even without this parameter, but the template graphic, the website menu and all the rest would be loaded within the popup window.
Note that if you already have other parameters, you need to use the & instead of the ? at the beginning of tmpl=component, like in the following example:
x:800,y:500 are the modal window width and height. As far as I know, this means that the modal window has a fixed size. As a consequence it is not responsive.

Live example
As an example, take a look to a live demo embedded in a modal window: Open a Contact Form in a modal window

Please Log in or Create an account to join the conversation.