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 do I a make a form display in a lightbox?

    Asked by AlanJordan on July 24, 2016 at 05:12 PM

    I would like to make a form display in a lightbox, like this.  How do Ido make that happen on this page?

    http://max-opp.com/courses-on-writing-books-short-interesting-learn-by-example/, similar to this.

    Page URL:
    https://form.jotform.com/61937807019967

  • Profile Image
    JotForm Support

    Answered by Mike_G on July 24, 2016 at 07:50 PM

    You can embed your form as a lightbox to your website.

    The instructions on how you can get and/or customize your lightbox embed code are found in this guide, How-to-create-a-lightbox-form

    Here's another guide that may also help you.

    How-to-Auto-popup-a-Lightbox-Form

    I hope this help. Please feel free to contact us anytime if you have any other questions or concerns. Thank you.

  • Profile Image

    Answered by AlanJordan on July 25, 2016 at 01:00 AM

    Thanks. I got that to work.  See here: http://max-opp.com/courses-on-writing-books-short-interesting-learn-by-example/

     

    Suppose I wanted to change this to a non-modal pop-up box--do I just change the piece of code that says lightbox to pop-up?

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 25, 2016 at 05:03 AM

    To change it to a non-modal pop-up, you will need to re-embed the form to your page using the pop-up code provided in the Publish wizard.

    Please let us know if you need further assistance,
    Regards.

  • Profile Image

    Answered by AlanJordan on July 26, 2016 at 08:11 AM

    Thank you.

  • Profile Image

    Answered by AlanJordan on April 29, 2017 at 01:47 PM

    I'm trying this again with a different form.  These two things are not working:

     

    1. I am not hiding the link

    2. It is not popping up.

     

     

    Here's the page where I embedded the form.

    http://ahj.max-opp.com/finding-love-creative-edition/

     

    Here's the form

    https://www.jotform.com/build/71045242859963

     

    Here's the code inserted in the form

    <a target="_blank" href="javascript:void( window.open( 'https://form.jotformpro.com/71045242859963', 'blank', 'scrollbars=yes, toolbar=no, width=300, height=580' ) ) "> I'm a Fan of Alan H. Jordan </a>

    <script language="JavaScript">

    var delayseconds = 5;

        function pause() {

        myTimer = setTimeout('whatToDo()', delayseconds * 1000)

        }

       function whatToDo() {

    document.getElementById('lightboxdelay').click();

        }

    window.onload = pause;

    </script>

     

    What am I doing wrong?

  • Profile Image
    JotForm Support

    Answered by Jim_R on April 29, 2017 at 05:13 PM

    I checked that page but failed to see any Lightbox Embed codes on your website's source code. So far, I'm seeing 4 links pointing to a form and none of these are Lightbox Embed codes:

    Can you please ensure you're copying and pasting the actual Lightbox Embed codes?

    Complete guide: How-to-Create-a-Lightbox-Form

    Once you have the right Lightbox Embed Codes copied on your clipboard, paste them on your WP page as shown below:

  • Profile Image

    Answered by AlanJordan on April 29, 2017 at 09:41 PM

    Please check the code again.  I can get the lightbox to display manually, but not to pop-up after a delay;

  • Profile Image
    JotForm Support

    Answered by liyam on April 30, 2017 at 01:34 AM

    hello AlanJordan,

    Here is the code that you should use (please note of the ones in bold):

    1) insert onload="pause" attribute and value on the link for Become a Fan of Alan H. Jordan

    ======

    <a class="btn lightbox-71045242859963" style="margin-top: 16px;" onload="pause();"> Become a Fan of Alan H. Jordan </a><br />

    ======

    2) On the script where your delay is processing in your whatToDo() function, replace the numeric ID 71045242859963 with lightboxdelay.

     

    ======

    <script language="JavaScript">

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

    </script>

    ======

    So here is the chunk of code you can copy and paste to replace your existing one:

    ======

    <a class="btn lightbox-71045242859963" style="margin-top: 16px;" onload="pause();"> Become a Fan of Alan H. Jordan </a><br />

     <a id="lightboxdelay" class="lightbox-71045242859963" style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>

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

    </script>

    ======

    If you have questions, please let us know.

     

  • Profile Image

    Answered by AlanJordan on April 30, 2017 at 05:55 AM

    I have now spent three hours on this and still cannot get it to work.

    1. If I change the openOnLoad parameter to true the form displays. 

    <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_71045242859963 = new JotformFeedback({ formId: '71045242859963', base: 'https://form.jotformpro.com/', windowTitle: 'Become a Fan of Alan H. Jordan', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 525, width: 350, openOnLoad: false }); </script> <a class="btn lightbox-71045242859963" style="margin-top: 16px;"onload="pause();> Become a Fan of Alan H. Jordan </a>

    2. This displays the link which works when clicked.  The code you sent me did not work when clicked:

     <a id="lightboxdelay" class="lightbox-71045242859963" style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Become a Fan of Alan H. Jordan</a><script language="JavaScript">

    3. This code is not being called because if I change the delay seconds to 0 the form does not display

    <script language="JavaScript">

    var delayseconds = 5;

        function pause() {

        myTimer = setTimeout('whatToDo()', delayseconds * 1000)

        }

       function whatToDo() {

    document.getElementById('lightboxdelay').click();

        }

    window.onload = pause;

    </script>

    Once again, the URL is http://ahj.max-opp.com/finding-love-creative-edition/

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2017 at 06:41 AM

    I was having problem loading the website page on the URL you provided. I am getting site can't be reached error. Can you please double check also the correctness of the URL.

    You can also test this demo page that shows the auto pop up with delay of lightbox form.

    https://shots.jotform.com/elton/delay_lightbox_onload_popup.html

    If you view the source code of the page, you will be able to see the script source code used. You can try following the same script codes on your test.

    Let us know how we can be of further assistance.

     

  • Profile Image

    Answered by AlanJordan on April 30, 2017 at 06:56 AM

    This url works:

    http://ahj.max-opp.com/finding-love-creative-edition/

     

    You can also reach this by typing in http://myfindinglove.com

     

    Interestingly, when I tried to add some additional text in a different area of the post, I wound up with two lines that said 

    Become a Fan of Alan H. Jordan

    Become a Fan of Alan H. Jordan

    The top one was a link.

    The bottom was not.  

    I rolled back to an earlier version of the form, perhaps that's why you had an issue.

    Going to bed now.

  • Profile Image

    Answered by AlanJordan on April 30, 2017 at 08:09 AM

    I tried to sleep but could not.  I went back and copied all of the code to Notepad to strip out any hi-bit characters.

    I pasted it into a new post.  It still did not work.

    I added one line of text to the post.  It had double printouts.

    http://ahj.max-opp.com/test/

     

    I noticed that my form was not showing the word EMAIL so I cloned it, and removed the control. I put a new control in and took out the theme. I created a new form and pasted it in.  Here are the results.

    http://ahj.max-opp.com/test-3/

     

    I don't get it.

    Can you look at my forms and see if they are corrupted or something?

     

  • Profile Image

    Answered by AlanJordan on April 30, 2017 at 08:29 AM

    I don't care if this is a lightbox.

    Can you give me the exact code to paste in for a either one of these pop-up form that has a delay of 5 seconds associated with it please?  Something that I can copy and paste into a new post and see that it works.

    Here I tried this with another form, and I can't get it to pop-up with a timer, but I can get it to pop-up if I set to openOnLoad=True

    http://ahj.max-opp.com/test-monbed/

     <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_60356959455973 = new JotformFeedback({ formId: '60356959455973', base: 'https://form.jotformpro.com/', windowTitle: 'Download Monbed', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-60356959455973" style="margin-top: 16px"> Download Monbed </a>

     

    <script language="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 AlanJordan on April 30, 2017 at 08:49 AM

    I have sent a private message with Administrator Credentials. Perhaps that will be the easiest way.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2017 at 10:00 AM

    I was able to review the source code of your website page. I see that you did follow and copied the javascript code from the demo page. But I see it was not working.

     

    What I suggest you try to better test the code is to create a new blank page. Then just add the source code similar form the demo page.

    Ex: 

    You will be able to easily troubleshoot the page since it will not have any other script codes that could be causing conflict with the javascript code for the lightbox pop up.

    Let us know if you were able to create the demo page so we can also review it.

     

     

  • Profile Image

    Answered by AlanJordan on April 30, 2017 at 10:29 AM

    I did that already.   http://ahj.max-opp.com/test-2/

    Please see this post so that you can have permission to log into my wordpress blog.

    Is it possible that we can save debug time for both of us this way (Private) 
  • Profile Image
    JotForm Support

    Answered by Mike_G on April 30, 2017 at 01:46 PM

    I see that you have already removed the link to show your form as a lightbox on your website (http://ahj.max-opp.com/test-2/). Fortunately, before you have done that, I was able to look into your website's scripts. I understand that the script that would make your form automatically pop up on load is not working.

    The script you have in your form is this:

    To fix the issue, the part highlighted in yellow in the script above should be removed.

    Then, the second "Become a Fan of Alan H. Jordan" (highlighted in green) should be between the opening <a> tag and the closing </a> tag. (Please see sample below)

    <a id="lightboxdelay" class="lightbox-71045242859963" style="cursor: pointer; color: blue; text-decoration: underline; display: none;">Become a Fan of Alan H. Jordan</a>

    And lastly, the "display: none;" property should also be removed if you want to show the link on the website.

    I have copied your codes in a test form where I have applied the changes above. (Note: I have only multiplied the "delayseconds" to 500 instead of 1000)

    Test Form

    Below is a screenshot of the Test form's page source (CTRL+U).

    I hope this helps. If you have any further questions or concerns, please feel free to contact us again anytime.

    Thank you.