What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to embed auto-popup lightbox form in Squarespace?

    Asked by underwdmtb 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

     

    Page URL:
    www.capulumcollege.co.za

    create squarespace how auto-popup lightbox form
  • Profile Image

    Answered by Huberson 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

    Answered by underwdmtb 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

    Answered by underwdmtb 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
    JotForm Support

    Answered by Boris 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

    Answered by underwdmtb 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

    Answered by Huberson 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
    JotForm Support

    Answered by Boris 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

    Answered by underwdmtb on May 06, 2016 at 05:10 AM

    Thanks so much, it works perfectly.

  • Profile Image

    Answered by Carina 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

    Answered by kelleykaplan 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
    JotForm Support

    Answered by Kevin_G 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.