We are building a landing page for a video sales funnel. We need a button on the page that, when clicked, a lightbox pops up with a multistep formstack form embedded within. Testing in our sandbox account worls well, however, when we rebuilt the page in production and moved the code over exactly as it was, the button will not open the lightbox. We are using the standard growth theme and hiding the header and footer with:
<style>
header, footer {display:none;}
</style>
Sandbox page: Schedule a Call
production page: https://39764862.hs-sites.com/vsl-o
On the page builder, in settings > advanced, we added the following header code:
<!-- Begin Lightbox -->
<div id=“fsLightbox5431498” class=“fsLightbox” style=“display:none;”>
<div align=“right” style=“padding-bottom:5px;”>
<a id=“fsLightboxClose5431498” href=“#” title=“close”><img src=“https://newlawbusinessmodel.formstack.com/forms/images/2/cross.gif” border=“0” /></a>
</div>
<div id=“fsLightboxContent5431498” style=“height:80%; width:60%; padding-top:0px; overflow:auto;”>
<script type=“text/javascript” src=“https://newlawbusinessmodel.formstack.com/forms/js.php/vsl_bac”></script>
<div style=“text-align:right; font-size:x-small;”><a href=“http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,5431498” title=“Powered by Formstack”>Powered by Formstack</a></div>
</div>
</div>
<script type=“text/javascript” src=“https://newlawbusinessmodel.formstack.com/forms/js/lightbox.js”></script>
In the rich text module, the source code for the button and lightbox is the following:
<p style=“text-align: center;”><button id=“light-box_link” style=“background-color: #00aea9; color: #fff; padding: 20px 50px; border: none; border-radius: 5px; cursor: pointer; display: block; margin: 0 auto; font-weight: bold; font-size: 24px;” onclick=“javascript:fsLightbox5431498.show()” fdprocessedid=“jigd5e”> <strong>Book Your Call Now!</strong> </button></p>
Has anyone run into this before, any help is greatly appreciated.