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:


23 Comments...


   
guest_23322910503037 (November 28, 2012 at 07:49 AM)

Is it possible to get it to open on exit?

View Answer


   
abhijit (March 24, 2013 at 01:49 AM)

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?

View Answer


   
magicart87 (April 21, 2013 at 12:08 AM)

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

View Answer


   
offersvalley (May 22, 2013 at 01:13 PM)

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

View Answer


   
Jaydeep (July 20, 2013 at 07:53 AM)

How to implement my form in this lightbox?

View Answer


   
IslandParadise (September 17, 2013 at 08:34 PM)

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.

View Answer


   
rajesh s (October 09, 2013 at 03:18 AM)

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 ?

View Answer


   
rajesh s (October 09, 2013 at 03:21 AM)

Hi dude.

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

View Answer


   
Simon (January 18, 2014 at 09:31 AM)

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

View Answer


   
townzcarz (March 28, 2014 at 12:14 AM)

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?

View Answer


   
shilpi (May 16, 2014 at 06:10 AM)

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

View Answer


   
bgringer912 (September 17, 2014 at 08:27 AM)

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

View Answer


   
leanneoleary (October 15, 2014 at 08:18 AM)

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?

View Answer


   
buddy (October 29, 2014 at 03:09 AM)

hello, very nice tutorial,

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

thanks:)

View Answer


   
Norby (January 25, 2015 at 06:33 PM)

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

View Answer


   
Prafull vyas (February 08, 2015 at 12:01 PM)

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.

View Answer


   
bayviewboom (February 09, 2015 at 11:14 PM)

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 (February 09, 2015 at 11:20 PM)

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 (February 09, 2015 at 11:21 PM)

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

View Answer


   
ToToPaPa (February 21, 2015 at 08:21 AM)

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?

View Answer


   
DN (November 22, 2015 at 09:11 PM)

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.

View Answer


   
22ndcenturymedia (February 23, 2016 at 12:06 PM)

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

View Answer


Send Comment