Light Box bug?

  • Profile Image
    Asked on July 21, 2010 at 02:05 PM

    I'm experimenting the usage of using the light box, popup box, and feedback button options for a particular form. I've already learned that it is not possible to make the feedback buttons sideby side with another similar button for a different form, because of the way the codes conflict with each other (I would like to do this however). I don't like the popup button so much, because it is so plain. However, I have noticed a bug on the Light Box form that I like a lot.

    The problem is, whether or not you filled out the form (not pressing the submit button), you have to close the box 3 times before it closes completely. In between closings, I have noticed the shade fades lighter until it is completely closed. Typically, as I tested out the code using the test button where you get the source code, it is supposed to close once and the shading in the background fades away automatically in a smooth transistion. Of course I've had to change the way the style of the link as it appears on my website, because it is not in line with the rest of the special style I use for the site, but this has no impact. Coincidentally, the feedback button is also there, and I am not sure whether this directly causes the bug. However, this bug does not appear in a page that doesn't have the feedback box.

    Does anyone have some insight how this happened?

  • Profile Image
    Answered on July 22, 2010 at 06:11 AM

    I added this to our bugs list. Thanks. We will work on it in the coming months.

  • Profile Image
    Answered on August 05, 2010 at 12:21 AM

    I've been having a similar problem to the one listed here, and worked out what the issue was… if one tries to add multiple lightbox feedback forms to any given page, they have to be careful not to add the first bit (inside and including the <script> and </script> bits) more than once to any given page, otherwise clicking a lightbox button will be like pressing it as many times as there are those <script></script> bits on the page.

    It had me scratching my head for a while aswell!

  • Profile Image
    Answered on August 05, 2010 at 09:51 AM
    At first, I thought it wasn't clear, so I think I can explain that in more detail.
    I noticed that the light box, and the feedback box both use the "orangebox" script. I'm assuming this script makes the appearance of the nice orange box (some people might want to choose different colors too in the future). This is where the box pops up in the middle of the screen, and closing it gives the nice fade into screen effect since everything was darkened when that window was up. In fact, the feedback form is affected when the other form is present, in the light box version. However, you get to close it 2 times, instead of 3. I don't know what made the difference.

    Otherwise, the form can show up with no issues the old fashioned way, by setting up a link for the pop up box version, or even a simple link to send someone to the form page. It seems it only affects those in the script using the same "orangebox" address for the script. From the way it reads, it seems pretty harlmess that it's only calling for the "orangebox" script.

    I did go to the address where the script is located, but it's so large, I couldn't just simply skim through it. My guess is, since the second part of it calls for the CSS class "orangebox", and that there are two of them, plus the fact that there are 2 scripts calling them, making it kind of redundant. I think the manner it reads is looking for that class attribute as it appears in the webpages html, when it appears after the ends (and probably goes on forever, until obviously the page itself ends). I think that is how the first code appears so that you have to do at least 2 clicks to close it, instead of 1. I have a note about this later on.

    There's another way around this though. However, it means I have to re-arrange the position on the page where I'm nesting the code (because they're placed in different sections of the webpage). Basically, I got rid of the first. At my own risk of "modifying" the generated code given to me, I deal with the first part for the regular form, move it to the second part of the first form into the feedback form, which is the second form. That way, you get 1 orange box script, but because earlier both of them used the same thing, and it is redundant. I got it to work as it should , as if it was just 1 form using the "orangebox" thing. I think some note in there should be made to instruct people using multiple forms when they use codes, that use the orangebox script, on their webpages.

    If I just separately put it in a different part of the page, not under the script (getting rid of the other clonedpart literally like you said), you have to close the first form twice then, but the feedback form is unaffected. It seems that somehow, if the code was there, then the problem becomes 3 and 2 clicks, from the 2 and 1 in your solution. Now, since I fixed it with my alternative solution, it is 1 and 1, and seems back to normal. As I said that I would note how the script works, theoretically, I could just isolate the script code, to put it in the section if it behaves how it works. That way, I can just separate the codes where I want the links to appear for the light box, and the feedback box part can be fine as well.

    I did try the above, and it works as hypothesized. Alternatively, if my boxes have to be in separate parts of the page as they orignally were supposed to, I'd have to get rid of the second redundant, but still keep the first one, so that wherever the second one appears, the script is applied there as well, even as if I put the script at the top of all the codes. Again, as long as class="orangebox" or something, appears after the, then they should work without problems, at least in my theory.

    So, here's my recommendation:

    I think because the code is in two parts, the instruction should be read so that, if someone wanted to use the light box, or the feedback form, or any style box for the orange box window (or future color chage at some point), then there would have to be 2 separate codes to copy to apply to a webpage. There are two ways to place the first part. However, you can recommend (or at least I recommend) that it should be pasted in the section of the webpage, but that it must only appear once. The alternative would be to place it above the following code (the second part of the code where the CSS is called), but never at the bottom. It is kind of a sticky subject, because if someone wanted to add another form box later, but puts the new form above it, it will not work, or it will not appear on the page.

    The user also has to check to make sure that it does not appear multiple times in other places of the webpage where the forms go (it should only appear ONCE, and only before the second part of the code). If I am right, it has to also explain that the user should NOT have an CSS attribute named "orangebox" on the page, if it is not already in a separate stylesheet. I would just personally avoid naming such an attribute anyway if I were writing my own custom CSS stylesheet. In practice, I would put it in the section anyway, since it will not work if you allow them to place it anywhere on the page. It will "ignore" any preceding code before it, in case someone decides to put it in the bottom of the page. You can also optionally use the field to add the instruction there to eliminate confusion when someone forgets why they put the code above everything (unless they did not include it, in which case obviously these issues will appear).

    Then the second part is the CSS "orangebox" link itself, which can be put anywhere the user wants it to appear on their webpage, which would tell the preceding script where it should appear. They can have as many as they want to place, as long as, again, the first part of the code already appears once in the webpage, and that the first code is above the forms they're using on their webpage in any order.

    I think this would make this process simpler to avoid such bugs, and I don't think it would take a lot of debugging on the developers part, since this is merely just a change in the script window for the generated codes, rather than looking in the scripts to modify entirely. That will just only delay this entire project.

  • Profile Image
    Answered on December 28, 2010 at 03:42 PM


    We have released new Feedback option. You can use multiple Feedback and Lightbox without any problem in out new version. You can reach it from the "Embed Form" wizard.

    On new Feedback Buttons, you can customize:

    - Button background and font colors,
    - Placement of the button,
    - Label written on the button.
    - Dimensions of pop-up window
    - Style of the window (Choose from 3 beautiful designs: Orange, White and Black)
    - Title of the window (Only in the Orange Style. For other styles we suggest using Title Field)

  • Profile Image
    Answered on June 05, 2011 at 01:30 PM

    Is there a way to put an image into your lightbox? meaning you click on an image instead of the writting?


    So instead of clicking on "Bob" can you click on Bob's logo instead? And your lightbox pops up.

  • Profile Image
    Answered on June 05, 2011 at 01:55 PM


    Yes it is possible by replacing the text link (Bob) in your lightbox script with an <img> tag referencing the image file that you want to use as the link.

    So instead o:

    <a id="lightbox-11553329260" style="cursor:pointer;color:blue;text-decoration:underline;">Bob</a>

    you use:

    <a id="lightbox-11553329260" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="" /></a>


    Replace the link (in red) with the exact url of the image that you want to use.

    Let us know if you have more questions regarding this. Thank you.


  • Profile Image
    Answered on June 05, 2011 at 02:53 PM

    Also another quesiton... can I use 2 contact forms in the same page... is there a conflict of scripts? one launches and the other one doesn't

  • Profile Image
    Answered on June 05, 2011 at 06:12 PM

    Hi stephenf99,

    That's a good question. I embedded two lightbox-powered forms into a single webpage and tried opening both forms. There were no issues found, the forms worked perfectly as expected. Please click here for a simple demonstration of this setup.

    Please let us know if you need further assistance. Thank you for using JotForm!


  • Profile Image
    Answered on June 06, 2011 at 12:05 AM

    Great Thanks for the answer... Now I have another question... when I use Firefox... the form pops up alll the way in the top and it doesn't center...

    Also... does it not work well Wiht IE?

  • Profile Image
    Answered on June 07, 2011 at 02:13 AM

    Can you post the URL of the form? Can you also open a new forum thread for it since this is a new issue? Thanks.