Want to get more people to fill out your web form? Put it in a lightbox! This code is easy to implement (copy and paste!). All you need to do is change the iframe src and the a href to the hosted URL for your web form.

This tip uses JavaScript. If your visitor doesn’t have JavaScript or if they click the link before the page has finished loading, they won’t see the web form in a lightbox. Instead, they’ll be taken to the hosted URL for your web form.

[cf]javascript[/cf]

Add this code to your website:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
    jQuery( "#webformdialog" ).dialog({
        autoOpen: false,
        width: 500,
        modal: true
    });

    jQuery( ".opendialog" ).click(function(e) {
        e.preventDefault();
        jQuery( "#webformdialog" ).dialog( "open" );
    });
});
// ]]></script>
<a href="https://joey.infusionsoft.com/app/form/lightbox-webform" class="opendialog">Open web form</a>
<div id="webformdialog" style="display: none;"><iframe id="infFormIframe_0" style="width: 450px;" src="https://joey.infusionsoft.com/app/form/lightbox-webform" frameborder="0" scrolling="yes" width="400" height="250"></iframe></div>

If you already use jQuery on your page, you may need to remove the script tags for jQuery or jQuery UI. You can also pick different themes for the lightbox to better match the look and feel of your site.

Have an idea for a tip? We love helping the community. If you have a problem let us know and we’ll try to solve it!