How to embed auto-popup lightbox form in Squarespace?

  • Profile Image
    underwdmtb
    Asked on May 04, 2016 at 12:55 PM

    Hi Guys, 

    I have a website, and I'm trying to add a pop up to the landing page. I've gone through several tutorials but seem to hit dead ends repetitively. 

    So yeah, a nice pop up/ subscriber opt in, when you log onto the site, with the ability to exit the pop if you've already subscribed or better still have it not arrive at all.

    Is this possible?

    Thanks in advance, 

    Rob 

    www.capulumcolllege.com

     

  • Profile Image
    Huberson
    Answered on May 04, 2016 at 01:54 PM

    Hi,

    You can embed the form using lightbox code, and use some JavaScript to popup the lightbox when the page is loaded. You can find more details and the necessary JavaScript from this guide - Auto-popup-a-Lightbox-Form.

    Let us know if more assistance is needed.

  • Profile Image
    underwdmtb
    Answered on May 04, 2016 at 01:56 PM

    Thanks muchly, will give it a go and get back to you. You're a legend. Thanks again.

  • Profile Image
    underwdmtb
    Answered on May 05, 2016 at 05:52 AM

    Cool, got the form up and running. I'm stuck with the delay though. The popup still arrives as soon I open up the website.

    Here's the code:

     <script src="https://form.myjotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_61242075256552 = new JotformFeedback({ formId: '61242075256552', base: 'https://form.myjotform.com/', windowTitle: 'Sign Up', background: '#FFA500', fontColor: '#FFFFFF', type: '1', height: 1100, width: 700, openOnLoad: true }); </script> <a class="btn lightbox-61242075256552" style="margin-top: 16px;display:none"> Sign Up </a> 

    <script language="JavaScript">

    var delayseconds = 5;

        function pause() {

        myTimer = setTimeout('whatToDo()', delayseconds * 1000)

        }

       function whatToDo() {

    document.getElementById('lightboxdelay').click();

        }

    window.onload = pause;

    </script>

     

    Thanks again, 

    Rob

  • Profile Image
    Boris
    Answered on May 05, 2016 at 07:59 AM

    The main reason the code is not working is that there is no element #lightboxdelay on your website. You should add this ID to your Lightbox button, as described in step 2 of the aforementioned guide:

    https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form

    So your code for the button should look like this, with newly added part marked in red:

    <a id="lightboxdelay" class="btn lightbox-61242075256552" style="margin-top: 16px;display:none"> Sign Up </a>

    You should also disable auto-popup of the lightbox code, which is currently set to true. This means that your full lightbox code should look like this:

    <script src="https://form.myjotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_61242075256552 = new JotformFeedback({ formId: '61242075256552', base: 'https://form.myjotform.com/', windowTitle: 'Sign Up', background: '#FFA500', fontColor: '#FFFFFF', type: '1', height: 1100, width: 700, openOnLoad: false }); </script>
    <a id="lightboxdelay" class="btn lightbox-61242075256552" style="margin-top: 16px;display:none"> Sign Up </a>
    <script language="text/javascript">
    var delayseconds = 5;
    function pause() {
      myTimer = setTimeout('whatToDo()', delayseconds * 1000)
    }
    function whatToDo() {
      document.getElementById('lightboxdelay').click();
    }
    window.onload = pause;
    </script>

    Please let us know if this resolved the issue you were having.

  • Profile Image
    underwdmtb
    Answered on May 05, 2016 at 02:56 PM

    Still struggling I'm afraid, the form unfortunately does now not pop up at all?

  • Profile Image
    Huberson
    Answered on May 05, 2016 at 03:46 PM

    We are afraid that we cannot check much from your website. Can you verify that there is no errors in the code you copied.  

    You can also share with us the link of the page where you have added the code, we might be able to help in some case.

  • Profile Image
    Boris
    Answered on May 05, 2016 at 04:05 PM

    Sorry about that, please try changing this line of above provided code:

    <script language="text/javascript">

    with this instead:

    <script type="text/javascript">

    I've tested the code on my end, and it is working fine after switching from using "language" to using "type" in the script element.

    I see that this is the page where the form is embedded:

    http://www.capulumcollege.com/

    The form should popup automatically after 5 seconds after the change, and here is the entire embed code for your form that should be working:

    <script src="https://form.myjotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_61242075256552 = new JotformFeedback({ formId: '61242075256552', base: 'https://form.myjotform.com/', windowTitle: 'Sign Up', background: '#FFA500', fontColor: '#FFFFFF', type: '1', height: 1100, width: 700, openOnLoad: false }); </script>
    <a id="lightboxdelay" class="btn lightbox-61242075256552" style="margin-top: 16px;display:none"> Sign Up </a>
    <script type="text/javascript">
    var delayseconds = 5;
    function pause() {
      myTimer = setTimeout('whatToDo()', delayseconds * 1000)
    }
    function whatToDo() {
      document.getElementById('lightboxdelay').click();
    }
    window.onload = pause;
    </script>

  • Profile Image
    underwdmtb
    Answered on May 06, 2016 at 05:10 AM

    Thanks so much, it works perfectly.

  • Profile Image
    Carina
    Answered on May 06, 2016 at 05:27 AM

    On behalf of my colleagues you are most welcome. Thank you for updating us.

    If you need further assistance please let us know.

  • Profile Image
    kelleykaplan
    Answered on July 07, 2016 at 05:01 PM

    Im having issues getting this to work.  Here is the code im using.  Essentially i would like this to overlay on the homepage and have an "x" in the corner like an email capture popup.  Please help!

     

     <iframe id="JotFormIFrame" onload="window.parent.scrollTo(50,50)" allowtransparency="true" src="https://form.jotform.com/61886088346166" frameborder="0" style="width:100%; openOnLoad:true; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = document.getElementById("JotFormIFrame"); if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = document.getElementById("JotFormIFrame"); var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>
     <a id="lightboxdelay" class="lightbox-21357249698871" style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Contact From</a>

    <script type="JavaScript">
    var delayseconds = 5;
        function pause() {
        myTimer = setTimeout('whatToDo()', delayseconds * 1000)
        }
       function whatToDo() {
    document.getElementById('lightboxdelay').click();
        }
    window.onload = pause;
    </script>

  • Profile Image
    Kevin_G
    Answered on July 07, 2016 at 09:20 PM

    @kelleykaplan,

    I can see you were already assisted to you in your own thread, please take a look to the reply on this link: https://www.jotform.com/answers/877948 

    If you still have some questions, please let us know on that thread only, assisting you in one thread only helps us to avoid confusion, so we can assist you better. 

    Thanks.