How to embed auto-popup lightbox form in Squarespace?

Hi Guys, 

I have a website, and a Squarespace form 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

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.

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

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

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.

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

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.

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>

Thanks so much, it works perfectly.

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

If you need further assistance please let us know.

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" onDISABLEDload="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>

@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.