Tuesday’s Tip: Open an Infusionsoft web form in a lightbox

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!

3 Comments

  1. This worked great except when the form is submitted. On submission tt takes the user to a thank you page instead of loading it in the iframe. Is there a way to get the thank you page to load in the iframe?

    Reply
    • Probably not. If Infusionsoft’s redirect is breaking out of the iframe, there probably isn’t anything we can do to stop it.

      Reply
  2. I’m already using jQuery on my page. Can you explain further how I fix this?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.