You can make the form appear in a popup lightbox by following these instructions. We will use the Fancybox 2 plugin as our lightbox script. There are 6 steps.
- 1. Download and extract the Fancybox files
- 2. Add the link to the Fancybox CSS file
- 3. Add the link to the Fancybox JS file
- 4. Hide the Quform form 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 Fancybox files
Go to this page and download the Fancybox files. Extract the zip file and rename the source folder to fancybox and place it into the quform/js folder.
2. Add the link to the Fancybox CSS file
Add a link to the CSS file in the <head> section of your page e.g.
1 | <link rel="stylesheet" type="text/css" href="quform/js/fancybox/jquery.fancybox.css" /> |
<link rel="stylesheet" type="text/css" href="quform/js/fancybox/jquery.fancybox.css" />
3. Add the link to the Fancybox JS file
Then add a link to the jquery.fancybox.pack.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/fancybox/jquery.fancybox.pack.js"></script> |
<script type="text/javascript" src="quform/js/fancybox/jquery.fancybox.pack.js"></script>
4. Hide the Quform form in the HTML
With your form HTML already in your page, wrap the entire form HTML in a div with the style display: none; e.g.
1 2 3 | <div style="display: none;"> // Your form HTML </div> |
<div style="display: none;"> // Your form 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 inside the document.ready() function (on line 3 for example):
1 2 3 4 | $("#show-quform-1").fancybox({ type: 'inline', href: '.quform-outer' }); |
$("#show-quform-1").fancybox({
type: 'inline',
href: '.quform-outer'
});Additional options
You can pass in any other Fancybox options in the code in step 6 above, you might want it so the scroll bars do not appear:
1 2 3 4 5 | $("#show-quform-1").fancybox({ type: 'inline', href: '.quform-outer', scrolling: 'no' }); |
$("#show-quform-1").fancybox({
type: 'inline',
href: '.quform-outer',
scrolling: 'no'
});For more options see the Fancybox 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").fancybox({ type: 'inline', href: '.quform-outer-1' }); $("#show-quform-2").fancybox({ type: 'inline', href: '.quform-outer-2' }); |
$("#show-quform-1").fancybox({
type: 'inline',
href: '.quform-outer-1'
});
$("#show-quform-2").fancybox({
type: 'inline',
href: '.quform-outer-2'
});