User Guide

How to Auto-popup a Lightbox Form

Last Update: December 9, 2016

A. Automatically open a lightbox form after the page is loaded.

To auto-popup a lightbox form after the page is loaded, just insert openOnLoad:true parameter in the lightbox code. Example:

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> 
var JFL_63431346590960 = new JotformFeedback({ formId: 'YOURFORMID', base: 'https://form.jotform.com/', 
windowTitle: 'YOUR FORM TITLE', 
background: '#FFA500', 
fontColor: '#FFFFFF', 
type: 'false', 
height: 500, 
width: 700, 
openOnLoad: true }); 
</script> 

Please be careful when adding the said parameter, you should append comma "," (without quote) after width parameter. Just do exactly the same as shown above.



B. Automatically open a lightbox form on the desired time. 
(You can delay a lightbox form to appear after the page is loaded)

1. Get your Lightbox Embed Code.

2. Insert an id attribute after the anchor  tag found on the lightbox embed code. Example id="lightboxdelay", check this sample code:


You can also add display:none; property under style attribute to hide the anchor link, as shown on the above example.

3. After that, add this script below the lightbox embed code.

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

5 - means 5 seconds before the lightbox form to auto-popup. You can change 5 to your preference.

lightboxdelay - is the id attribute value that we've added to the lightbox embed code on step 2. Make sure the ID value matched in your code if you're using a different one.

4. The final code will then look like this: http://pastie.org/pastes/5430025/text

DEMO HERE (5 seconds delay)

C. Automatically close a lightbox form on the desired time. 

1. Get your Lightbox Embed Code.

2. Insert this script below the lightbox embed code.

<script language="JavaScript">
  var delayseconds = 5;
  window.onload = closeLightbox();
  function closeLightbox() {
    setTimeout(function(){document.querySelector('.jt-dimmer').click();}, delayseconds*1000);
  }
</script>

3. You can change the delay time from delayseconds variable. 5 means in the above code means lightbox will close after 5 seconds.

4. Your final lightbox code would look like this: http://pastie.org/10980166

Important Note: window.onload methods can conflict each other when called more than one time on a web page. In this case you can use prototype or jQuery methods instead of window.onload method.

Related articles:

25 Comments...

  • guest_23322910503037

    Is it possible to get it to open on exit?

  • abhijit

    The above code works perfectly, buy if I click outside the form anywhere on the page the form disappears. Is it possible that the form should disappear only when someone fills in the details and click on submit button?

  • magicart87

    How do I set the lightbox autopopup to only appear one time within a user visit to site? Cookie settings?

  • offersvalley

    i am using osclass script my site name is offersvalley.in pls tell me how can i add this on my site

  • Jaydeep

    How to implement my form in this lightbox?

  • IslandParadise

    The code I chose was "A" (the first option) and use an image/button in my widget area for the pop-up instead of the text link on some other page...in my opinion, this is just too many clicks on the frontend and just degrades the look and flow of my site. Anyway, I got it to work in the widget area with a nice orange button as the link by placing the code right in the html of widget area (NOTE: I do not want it on the actual page). However the page the widget points to makes my slider gallery disappear! Which btw, any gallery plugin. Can someone tell me where do I actually put code "A" for my theme (I assume a PHP file or...??) or how to resolve jotform being in the widget area interfering with the slider gallery on the WP Page.

  • rajesh s

    Hi dude.

    Nice effect , I used source code but how to change text box and field name ? how to update drop down list box in form ?

  • rajesh s

    Hi dude.

    How to send information via form through mail server ?
    and
    how to edit source code ?

  • Simon

    thanks for the code. My lightbox contains content from another html page. Any idea where I would put that into the code?

  • townzcarz

    Hey how to change the form, i dont want form that you cr8 on lightbox form. and how to connect to database when we fill the form on popup?

  • shilpi

    Hi

    I am using this form and found it very interesting but you have not asked to mention my email id where the contact info will go?

    Hope you understand my question...
    please email on my id with answer.

    Many Thanks

  • bgringer912

    I set up the code as you have called for but its not working on my site. Please see here. The lightbox on the left has a 5 second delay code. The lightbox on the right has no delay. However, they are both loading at the same time. Please help. See this page:

    http://www.bonnie-gringer.com

  • leanneoleary

    This is great but doesn't work on my mobile. Tried in the default browser and in chrome and none Work. Anyone else come across this?

  • buddy

    hello, very nice tutorial,

    btw, is it possible to change that form into image or banner?

    thanks:)

  • Norby

    Hello
    How can I activate the lightbox feature on click of button or URL?
    Thanks

  • Prafull vyas

    Hey
    Very nice tutorials but I want to lock whole browser when the lightbox appear please can you tell me how this is possible that lightbox working as js alert.

  • bayviewboom

    Hi, i want to implement the delay method, but there's no tag in my embed. Here's my script:




    new JotformFeedback({
    formId : "42252369650152",
    buttonText : "Get updates",
    base : "http://jotform.us/",
    background : "#F59202",
    fontColor : "#FFFFFF",
    buttonSide : "top",
    buttonAlign : "right",
    type : false,
    width : 450,
    height : 525
    });



  • bayviewboom

    ok, here's my script again:





    new JotformFeedback({
    formId : "42252369650152",
    buttonText : "Get updates",
    base : "http://jotform.us/",
    background : "#F59202",
    fontColor : "#FFFFFF",
    buttonSide : "top",
    buttonAlign : "right",
    type : false,
    width : 450,
    height : 525
    });


  • bayviewboom

    ok, wrapping this sample in PRE tags didn't work. Would be nice if jotform provided some means of displaying raw script/html in these support pages, since... that's what we do here....

  • ToToPaPa

    Hi,
    Thanks for this tutorial!

    I have a little problem, I'm trying to autopopup a lightbox with a delay but the windows title is not full sized... It's not aligned with the form.


    var JFL_50513172512342 = new JotformFeedback({
    formId:'50513172512342',
    base:'http://jotformeu.com/',
    windowTitle:'As you can see',
    background:'#ffffff',
    fontColor:'#000000',
    type:false,
    height:400,
    width:750,
    openOnLoad:false
    });




    var delayseconds = 1;
    function pause() {
    myTimer = setTimeout('whatToDo()', delayseconds * 1000)
    }
    function whatToDo() {
    document.getElementById('lightboxdelay').click();
    }
    window.onload = pause;


    Can you help me?

  • DN

    CAN SOMEONE HELP ME PLEASE

    I have no programming skills. I have a Web page. I want to add a contact page which pops up on load of the home page. Need FIRST NAME, LAST NAME, EMAIL, MOBILE. QUESTION 2+1 = TO CONFIRM IT NOT SPAM AND SUBMIT BUTTON.

    Contact data emailed to my email address. Every time someone new fills it. (Hope this is cookie)

    After submitting thankyou message and then homepage displayed.

    People have to fill all details and cannot bypass this page(no close buttons). Background dimmed homepage.

    Your help will be much appreciated.

  • 22ndcenturymedia

    How do you make the exit button bigger and possibly also change color ? Screenshot : http://take.ms/joVv6

  • Sophie

    I have a working auto-pop up with delay on my site. Is there any way to disable the auto pop-up after a user's initial sign up?

  • davidvm

    Hi, is it possible to make the lightbox auto-popup via a URL? I don't want the form to auto-pop for all visitors, but just for some I give a special link, so by clicking on it they will go to my site and have the form auto pop. Is that possible?

Send Comment