- Posts: 3856
- Thank you received: 515
Show the Contact Form in a modal popup lightbox window
- Demis [Fox-Labs]
-
![Demis [Fox-Labs]'s Avatar](https://secure.gravatar.com/avatar/30cdb3d88f2b8f0d7fdea0316b70342b?s=144&r=g&d=https%3A%2F%2Fwww.fox.ra.it%2Fimages%2Favatar-fox.png)
Topic Author
- Offline
Less
More
15 Aug 2013 17:21 - 16 Aug 2013 09:02 #1
by Demis [Fox-Labs]
Show the Contact Form in a modal popup lightbox window was created 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
and add the following code immediately after it:
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:The exact path may vary based on your Joomla version, but the file names are modal.css and modal.js.
Create a contact form
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:
Parameters
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: http://website.com/index.php?option=com_foxcontact&view=foxcontact&Itemid=117&tmpl=component
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
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;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>Create a contact form
- 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 .
- Test the form to ensure that it is working.
- Take note of the URL of the form. For example it may be something like http://website.com/contact.html
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>Parameters
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: http://website.com/index.php?option=com_foxcontact&view=foxcontact&Itemid=117&tmpl=component
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.