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

    Our lightbox is not opening on a website after adding jotform lightbox code

    Asked by Divya  on April 27, 2016 at 03:51 AM

    Hi,

    I have created a jotform, and applied its script code on my site. I have applied it in my footer.html template. But this stops the product images on the site from opening. You can refer this, one of the product of my site: http://prairie-mountain-furniture.mybigcommerce.com/products.php?product=Upholstered-Hickory  

    And when i remove the script code of jotform from the template,, images get open quickly. This means the jotform get conflict with product images in my site.

    Please suggest me the solution so that  i can resolve my problem.

    Page URL:
    http://prairie-mountain-furniture.mybigcommerce.com/products.php?produ<br/>ct=Upholstered-Hickory

    template product lightbox
  • Profile Image
    JotForm Support

    Answered by liyam on April 27, 2016 at 06:03 AM

    Hello Divya,

    I have just checked your form on Chrome and Firefox, but I don't see any image containers that failed to load. 

    I also checked your feedback form and it loads properly as well.

    If the problem persists on your end, can you provide us more information regarding this such as the type of browser you're using?

    Also if I'm misunderstanding the problem, it would be great if you can explain more.

    Looking forward to your response.

    Thanks.

  • Profile Image

    Answered by div on April 27, 2016 at 06:44 AM
    Please check product images, they are not opening. jotform is loading,, but
    product images are not opening,, and if i remove the jotform from my site,,
    then image gets open.
    ...
  • Profile Image

    Answered by Ben on April 27, 2016 at 07:46 AM

    I took a look at it and I see what you mean.

    The images are shown, but since they are in the lightbox as well, they are not showing up.

    I have noticed the following error being shown (in developers tools not on the website):

    TypeError: jQuery.fn.fancybox is undefined
       
    To try to fix this, you could try adding the lightbox code to your page with this addition:

    <script type="text/javascript">$.noConflict();</script>
    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
          var JFL_61102417389453 = new JotformFeedback({
            formId: '61102417389453',
            base: 'https://form.jotform.me/',
            windowTitle: 'Message Contact Form',
            background: '#e26324',
            fontColor: '#FFFFFF',
            type: 'false',
            height: 552,
            width: 700,
            openOnLoad: false
          });
        </script>

    That should make it work properly, however do check it out and let us know how it goes.

  • Profile Image

    Answered by div on April 27, 2016 at 08:44 AM
    I have tried it before. It doesn't works. And as you suggest , i tried it
    ...
  • Profile Image

    Answered by Ben on April 27, 2016 at 09:19 AM

    I took a look at your website and I still see the same code used.

    Could you Divya please try to add the entire code, including the noconflict one mentioned above?

    This would be the full form embed:

    <script type="text/javascript">$.noConflict();</script>
    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
          var JFL_61102417389453 = new JotformFeedback({
            formId: '61102417389453',
            base: 'https://form.jotform.me/',
            windowTitle: 'Message Contact Form',
            background: '#e26324',
            fontColor: '#FFFFFF',
            type: 'false',
            height: 552,
            width: 700,
            openOnLoad: false
          });
    </script>

    Once that is there as well it would allow us to check out the website further and see what else we should do to make it work properly for you.

    Do let us know once you do add it so that we can check it out for you.

  • Profile Image

    Answered by div on April 28, 2016 at 01:44 AM
    Hellow,
    I have added this code with conflict,, but it distrubs the designing of my
    store,, and also affect the other things,, that's why again i removed it. I
    have tried it yesterday. Please tell me some other solution,, that why it
    get conflict.
    ...
  • Profile Image

    Answered by div on April 28, 2016 at 04:44 AM
    Can you please tell me that where else should i keep the script code of
    jotform instead of footer.html?
    ...
  • Profile Image

    Answered by Ben on April 28, 2016 at 07:04 AM

    OK, thank you for the additional details.

    Would you mind using the following instead:

    <script type="text/javascript">$.noConflict();</script>
    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
          var JFL_61102417389453 = new JotformFeedback({
            formId: '61102417389453',
            base: 'https://form.jotform.me/',
            windowTitle: 'Message Contact Form',
            background: '#e26324',
            fontColor: '#FFFFFF',
            type: 'false',
            height: 552,
            width: 700,
            openOnLoad: false
          });
    </script>
    <script type="text/javascript">$.noConflict();</script>

    It has no conflict before and after the code, since based on what you have mentioned it seems that it  breaks the other codes using jquery as well and this might help.

    If not, then do try to add the script for your form to the head section of your page not at the footer.

    Then we might be able to use no conflict on your other lightbox code and see if that helps show the images.

    If it works better, but not completely and you do not want to leave it as such on your website, consider creating a copy of that page and hiding it from others, so that we can check it out over direct link and see what else might be needed to be done.

  • Profile Image

    Answered by div on April 28, 2016 at 07:44 AM
    I have put this code as it is,, how you said. You can check
    http://prairie-mountain-furniture.mybigcommerce.com/12-cubby-shelf/ this
    that what changes have come. Only product image get open and that also not
    in lightbox. And image below the product image is not opening. Please check.
    ...
  • Profile Image

    Answered by div on April 28, 2016 at 07:44 AM
    And also please suggest that at which place i should put it in header.html?
    ...
  • Profile Image

    Answered by Ben on April 28, 2016 at 09:25 AM

    I see what you mean.

    The lightbox is no longer activated when you click on product image, so it is using the lightbox fallback - it opens the image in the link.

    Now, I have tried the code I had mentioned above and it worked for me. While I can not tell you in which file it is on your side, I can tell you where it ended up on the page.

    I have added it right after this segment:

    <link rel="canonical" target="_blank" href="http://prairie-mountain-furniture.mybigcommerce.com/12-cubby-shelf/" rel="nofollow">

    and right before this one:

    <link target="_blank" href="//fonts.googleapis.com/css?family=Lato:400,300" rel="stylesheet" type="text/css">

    Most likely it is in your header.html file.

    This is the exact code (with the code that you will be able to find on your pages above and under it, so do not include that as well):

    <link rel="canonical" target="_blank" href="http://prairie-mountain-furniture.mybigcommerce.com/12-cubby-shelf/" rel="nofollow">

    <script type="text/javascript">$.noConflict();</script>
    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
          var JFL_61102417389453 = new JotformFeedback({
            formId: '61102417389453',
            base: 'https://form.jotform.me/',
            windowTitle: 'Message Contact Form',
            background: '#e26324',
            fontColor: '#FFFFFF',
            type: 'false',
            height: 552,
            width: 700,
            openOnLoad: false
          });
    </script>
    <script type="text/javascript">$.noConflict();</script>

    <link target="_blank" href="//fonts.googleapis.com/css?family=Lato:400,300" rel="stylesheet" type="text/css">

    Do let us know how it goes.