How to add a lightbox or modal window to RSForm! Pro ?

Alot of people have been asking how to implement Lightbox or Modal functionality into RSForm!Pro. We're going to describe in this article how to do just that using Joomla!'s built-in functions.

First Step:

Joomla! has an integrated mootools modal box, which you can use it. You already know it from the backend, all we need to do now is to bring that functionality into the frontend. This is a simple task, you just need to open your template's index.php file and add a line to it. For example, let's say that you are using ja_purity as your template. You will need to open template/ja_purity/index.php and add the following piece of code in the <head> tag:
<?php JHTML::_('behavior.modal'); ?>

Creating the modal:

Now, let's make an article that contains the link to the RSForm!Pro form. If you know the basics of HTML, this should be easy. I've added the following <a> tag to my article:
<a class="modal" href="index.php?option=com_rsform&formId=1&tmpl=component" rel="{handler: 'iframe', size: {x: 660, y: 475}}">lightbox form</a>

This link will open my RSForm!Pro form which is identified by Id = 1. If your form is Id = 2, you can use formId=2, if it's 3 you can use formId=3 and so on.
The class="modal" attribute is mandatory. You will have to add this in order for the lightbox to work.
I've added tmpl=component to the RSForm!Pro URL. This is so that the lightbox will contain the form only, without any template, menus or modules. We wouldn't need them since the idea is to complete just the form in the lightbox, not to navigate through the entire website.
This part is tricky: rel="{handler: 'iframe', size: {x: 660, y: 475}}". This attribute is again mandatory, because it contains the lightbox's parameters. The only thing you will need to change is the x: 660 (which contains the width of the window) and y: 475 (which contains the height of the window). Both values are in pixels, so you can try and enter other values there and achieve the result you want.


Now let's test if the lightbox works.

It works, but there's one small problem - after the form is submitted and the Thank You Message is shown, the user can freely browse the website in the lightbox. We will need to close the lightbox window after the form is shown.

Final Adjustments:

Let's add a 3.5 seconds timeout before the lightbox closes automatically. Here's how to do it: go to RSForm!Pro, Manage Forms, click on the form you've chosen for the lightbox, click on the Edit Form tab and then on the Edit the Thank You Message link. Below your Thank You Message, add the following code:

<script type="text/javascript">'window.parent.document.getElementById(\'sbox-window\').close()', 3500);

Note: If, by any chance, the lightbox does not automatically close using the code provided above, please use the following code instead:

<script type="text/javascript">'window.parent.SqueezeBox.close()', 3500);

You're all set! The form will show up in a modal and will close after a certain amount of time. This will add a nice and cleaner feel to your website.

We recommend that you turn off all your editors when doing this stuff (editors will most likely strip the codes you enter). Instead, just use the No Editor option (or switch to the editor view source code mode).

Additional implementation:

After the pop-up/modal closes, if you want to automatically redirect your users to a link of your choice, use a similar as the following script instead:

<script type="text/javascript">'window.parent.SqueezeBox.close()', 3500);'window.location.href = ""', 3500);

The setTimeout time should be kept at the same interval in order to immediately perform the redirect after the modal window closes.

46 persons found this article helpful.

Was this article helpful?

Yes No
Sorry about that