Why lightbox embed is not working on squarespace?

  • Profile Image
    mehriamin
    Asked on December 27, 2017 at 10:20 PM

    I have tried to embed this code and it is not working. It is appearing blank in squarespace?

    <script src ="https://form.jotform.co/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_73508428031856 = new JotformFeedback({ formId: '73508428031856', base: 'https://form.jotform.co/', windowTitle: 'Mel F. Enquiry', background: '#FFFFB3', fontColor: '#000000', type: '1', height: 500, width: 700, openOnLoad: 0 }); </script>

    Jot form link

    https://form.jotform.co/73508428031856

     


  • Profile Image
    Nik_C
    Answered on December 28, 2017 at 01:14 AM

    Please try using the below code to embed your form in Squarespace:

     <iframe id="JotFormIFrame-73508428031856" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.co/73508428031856" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-73508428031856"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); 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); } </script>

    And let us know how it worked.

    Thank you!

  • Profile Image
    Nik_C
    Answered on December 28, 2017 at 01:17 AM

    My apologies, please disregard my previous reply.

    I checked your website and the lightbox is showing fine:

    1514441831screencast.gif

    Are you still experiencing this issue?

    Please let us know.

    Thank you!

  • Profile Image
    Mel 
    Answered on December 28, 2017 at 02:56 AM

    Hi

    above is not appearing for me? I’m unsure how you can see that but everyone of us is getting nothing?

  • Profile Image
    Nik_C
    Answered on December 28, 2017 at 04:02 AM

    I tested on Mac on Safari, Chrome, and FireFox, it worked on all the same.

    On which device(s) are you testing?

    Thank you!

  • Profile Image
    mehriamin
    Answered on December 28, 2017 at 04:19 AM

    1514452756Screenshot 2017-12-28 20.18.13I'm on MAC google chrome and nothing is appearing at bottom? screen shot attached? There is no Lightbox embed? 

  • Profile Image
    Nik_C
    Answered on December 28, 2017 at 05:35 AM

    I'm not sure why, but we are seeing the same page differently, this is how I see that page:

    1514457274Screen Shot 2017-12-28 at 11.3

    And the button on the left is the lightbox.

    Could you please try viewing the page from any other Browser?

    Maybe an old version of your page is still in cache so it is not showing the updated one.

    We'll wait for your response.

    Thank you!

  • Profile Image
    mehriamin
    Answered on December 28, 2017 at 06:05 AM

    I'm not talking about feedback button. I'm specifically talking about Lightbox popup


    <script src ="https://form.jotform.co/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_73508428031856 = new JotformFeedback({ formId: '73508428031856', base: 'https://form.jotform.co/', windowTitle: 'Mel F. Enquiry', background: '#FFFFB3', fontColor: '#000000', type: '1', height: 500, width: 700, openOnLoad: 0 }); </script> 

  • Profile Image
    Ardian_L
    Answered on December 28, 2017 at 07:30 AM

    Can you please try to put the script I have provided below: 

    <script src ="https://form.jotform.co/static/feedback2.js" type="text/javascript"></script>

    <script type="text/javascript"> 

    var $ = jQuery.noConflict();

    var JFL_73508428031856 = new JotformFeedback({

    formId: '73508428031856', 

    base: 'https://form.jotform.co/', 

    windowTitle: 'Mel F. Enquiry', 

    background: '#FFFFB3', 

    fontColor: '#000000', 

    type: '1', 

    height: 500, 

    width: 700, 

    openOnLoad: 0 

    }); 


    </script>

    Looks like there are some JavaScript errors on your website and to avoid JS conflicts I have added this line of code: var $ = jQuery.noConflict();

    If this creates another issue, make sure to let us know.

  • Profile Image
    mehriamin
    Answered on December 29, 2017 at 04:11 AM

    no this is not working?

  • Profile Image
    Ardian_L
    Answered on December 29, 2017 at 05:31 AM

    Can you please explain on which button do you want to have the lightbox? In the yellow left one, it says JotForm feedback but that actually links to the form.

    1514543429FeedBackBtn.png

    And the White button on the right, it's redirecting to the url of the form. 

    1514543446MakeUpBtn.png

    Please inform us where exactly you need to put the lightbox script so we can assist you.

  • Profile Image
    mehriamin
    Answered on December 29, 2017 at 06:14 AM

    Hi Adrian,


    We are not talking about the feedback button which is showing fine! 


    I'm talking about the Lightbox pop up which is not appearing (although I have embeded below code). I would like the user on my site to complete the form without leaving my site (within a lights box)!

    <script src ="https://form.jotform.co/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_73508428031856 = new JotformFeedback({ formId: '73508428031856', base: 'https://form.jotform.co/', windowTitle: 'Mel F. Enquiry', background: '#FFFFB3', fontColor: '#000000', type: '1', height: 500, width: 700, openOnLoad: 0 }); </script> 

  • Profile Image
    Ardian_L
    Answered on December 29, 2017 at 07:27 AM

    To get your lightbox codes, this guide should help: https://www.jotform.com/help/220-How-to-Create-a-Lightbox-Form.

    To embed the form to your Squarespace website in a lightbox format, the following guide from Squarespace should help add the script:

    https://support.squarespace.com/hc/en-us/articles/205815928

    If you cannot get it to work, you may consider contacting Squarespace support for help: https://support.squarespace.com/hc/en-us/requests/new

  • Profile Image
    Ardian_L
    Answered on January 03, 2018 at 11:53 AM

    If you are still having issues with this, can you please use this embeded code:

    <script src ="https://form.jotform.co/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_73508428031856 = new JotformFeedback({ formId: '73508428031856', base: 'https://form.jotform.co/', windowTitle: 'Mel F. Enquiry', background: '#FFFFB3', fontColor: '#000000', type: '1', height: 500, width: 700, openOnLoad: true }); </script>

    I have changed openOnLoad to true, it should work now. If you are still having issues please let us know.