Quform in a popup (lightbox) – Colorbox

You can make the form appear in a popup lightbox by following these instructions. We will use the Colorbox jQuery plugin as our lightbox script. There are 6 steps.

• 1. Download and extract the Colorbox files
• 2. Add the link to the Colorbox CSS file
• 3. Add the link to the Colorbox JS file
• 4. Hide the Quform in the HTML
• 5. Set up your trigger element
• 6. Add the JavaScript to show the Quform when the trigger is clicked

Each step is explained in more detail below.

1. Download and extract the Colorbox files

Go to this page and download the Colorbox files. Extract the zip file and rename the folder containing the Colorbox files to colorbox then place it into the quform/js folder. For the rest of this example, I am assuming that the colorbox folder is inside the quform/js folder.

2. Add the link to the Colorbox CSS file

Add a link to the CSS file in the head of your page e.g.

1

<link rel="stylesheet" type="text/css" href="quform/js/colorbox/example1/colorbox.css" />

<link rel="stylesheet" type="text/css" href="quform/js/colorbox/example1/colorbox.css" />

Note: this example uses the “example1” Colorbox theme, if you choose another theme just replace example1 in the path with the theme that you have chosen.

3. Add the link to the Colorbox JS file

Then add a link to the jquery.colorbox-min.js file, put this on the line before the link to the Quform scripts.js file (but after the link to the jQuery library) e.g.

1

<script type="text/javascript" src="quform/js/colorbox/jquery.colorbox-min.js"></script>

<script type="text/javascript" src="quform/js/colorbox/jquery.colorbox-min.js"></script>

4. Hide the Quform in the HTML

With your Quform HTML already in your page, wrap the entire Quform HTML in a div with the style display: none; e.g.

1
2
3

<div style="display: none;">
// Your Quform HTML
</div>

<div style="display: none;">
// Your Quform HTML
</div>

5. Set up your trigger element

Add your link that will trigger the form to be displayed, put this anywhere on your page outside the div you added above, e.g.

1

<a href="#" id="show-quform-1">Contact us</a>

<a href="#" id="show-quform-1">Contact us</a>

6. Add the JavaScript to show the Quform when the trigger is clicked

Add this code to js/scripts.js on an empty line inside the first function (on line 4 for example):

1
2
3
4

$("#show-quform-1").colorbox({
    inline: true,
    href: '.quform-outer'
});

$("#show-quform-1").colorbox({
    inline: true,
    href: '.quform-outer'
});

Additional options

You can pass in any other Colorbox options in the code in step 6 above, you may want to set a fixed height and width of the popup so that when the form errors show the scroll bars do not appear:

1
2
3
4
5
6

$("#show-quform-1").colorbox({
    inline: true,
    href: '.quform-outer',
    height: 850,
    width: 400
});

$("#show-quform-1").colorbox({
    inline: true,
    href: '.quform-outer',
    height: 850,
    width: 400
});

For more options see the Colorbox documentation.

Multiple popup forms on the same page

To have multiple popup forms on the same page you will need to give each form a unique class on the quform-outer div, then update the code in scripts.js to use this new class, and finally repeat Steps 4-6 above for the second form. For example to have two forms:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<a href="#" id="show-quform-1">Show form 1</a>
 
<div style="display: none;">
    <div class="quform-outer quform-theme-light-light quform-outer-1">
        // Form 1 HTML goes here, note the added class above quform-outer-1
    </div>
</div>
 
<a href="#" id="show-quform-2">Show form 2</a>
 
<div style="display: none;">
    <div class="quform-outer quform-theme-light-light quform-outer-2">
        // Form 2 HTML goes here, note the added class above quform-outer-2
    </div>
</div>

<a href="#" id="show-quform-1">Show form 1</a>

<div style="display: none;">
    <div class="quform-outer quform-theme-light-light quform-outer-1">
        // Form 1 HTML goes here, note the added class above quform-outer-1
    </div>
</div>

<a href="#" id="show-quform-2">Show form 2</a>

<div style="display: none;">
    <div class="quform-outer quform-theme-light-light quform-outer-2">
        // Form 2 HTML goes here, note the added class above quform-outer-2
    </div>
</div>

JavaScript in scripts.js

1
2
3
4
5
6
7
8
9

$("#show-quform-1").colorbox({
    inline: true,
    href: '.quform-outer-1'
});
 
$("#show-quform-2").colorbox({
    inline: true,
    href: '.quform-outer-2'
});

$("#show-quform-1").colorbox({
    inline: true,
    href: '.quform-outer-1'
});

$("#show-quform-2").colorbox({
    inline: true,
    href: '.quform-outer-2'
});

See also

• Quform in a popup (lightbox) – Fancybox 2