Unfortunately, the username and password you have entered do not match!

Registration

Unfortunately, this username is already taken!

Unfortunately, this e-mail address is already used!

Please retype the verification code.

All fields are required

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

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.

  1. 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'); ?>

  2. 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.
  3. 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.
  4. 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.top.setTimeout('window.parent.document.getElementById(\'sbox-window\').close()', 3500);
    </script>

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.

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.top.setTimeout('window.parent.SqueezeBox.close()', 3500);
</script>

Feedback