Lightbox embed form causes terrible bugs on page.

Hello. If Jotform form is inserted on webpage using "Embed – Lightbox" code, a lot of problems with the rest page begin.

Let me explain what happens. First look to the assumed HTML code:

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

It includes JS file https://form.jotformeu.com/static/feedback2.js?3.3.REV. Lets explore it:

As you can see it includes jQuery and other libraries overwriting previously included versions of this libraries. This action causes a few terrible results:

1. Old version of jQuery (1.6.4) is used on the page. Some other plugins don't work if old version is used.

2. All included jQuery plugins disappear.

There a simple ways to fix file https://form.jotformeu.com/static/feedback2.js?3.3.REV:: check whether jQuery and others haven't been included bere including them. For example:

if(!jQuery) { /* include jquery */ }

I would recommend you to embed your form using the Iframe code in order to avoid conflicts with the JQuery libraries on your site: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

Before you embed the code, paste it in a text editor like WordPad, you will notice two part of codes, only copy and embed the iFrame part in your webpage, example:

Otherwise, please check this page to learn how to deal with jQuery conflicts. http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ 

This is sad because the Lightbox form is required :( I will have to recommend purchasing another form constructor for my chief.

Iframe code causes no problem, but I need lightbox.

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ is about avoiding conflicts of $ variable. But the problem is related to jQuery variable overwriting another jQuery variable. I can't affect it because I don't have write access to file https://form.jotformeu.com/static/feedback2.js?3.3.REV. The only thing I can do is to put JetForm code before including normal jQuery and other libraries, but it is a kludge.

I propose you to add to the file https://form.jotformeu.com/static/feedback2.js?3.3.REV code that checks whether jQuery and others are already included. For example:

if(!jQuery) { /* include jquery */ }

We apologize for the inconvenient, however, I do not think that could be possible to apply the workaround that you provided, this is because sometimes the jQuery version used on the website where is embedded the form is not the same as the one that the form uses to work, then  if this is applied there comes other problem, variables are declared using a different syntax in the different versions of jQuery, for example, in one version this is correct jQuery(), but in the new versions this is the correct way $(), so it means that the conflict will be there even if is verified if jQuery is already in use. 

Now, something that you may do is apply your own script to your website, for example, here is a link with the code to get a modal dialog box: http://www.sitepoint.com/14-jquery-modal-dialog-boxes/. 

You may use some of that options which is compatible with your version of jQuery. 

Thank you for explanation.

What about adding this code to the file https://form.jotformeu.com/static/feedback2.js?3.3.REV? 

// Include Jotform jQuery here
var jotFormJquery = jQuery.noConflict(true);
(function ($, jQuery) {
    // The rest of the Jotform script
}(jotFormJquery, jotFormJquery));

Here is live demo: http://codepen.io/anon/pen/pyeYjb?editors=1000. As a result, Jotform script uses it's own version of jQuery and previously defined variables `$` and `jQuery` keep having the same values.

Unfortunately we cannot add additional jQuery code to your form. A possible workaround would be to apply your own script to your website as my colleague suggested, then you can embed the form there. For your convenience, here again is the link that my colleague shared: http://www.sitepoint.com/14-jquery-modal-dialog-boxes/. 

I don't ask for additional jQuery code for my form. I ask to add only a few additional lines of code to your script file  https://form.jotformeu.com/static/feedback2.js?3.3.REV:

And that's all. After that you script won't change any variable in the global scope and will use certain version of jQuery while the rest page uses another version of jQuery. Why is it not good?

Please note that it is up to our developers whether to add a code to the script file, so we cannot modify that code for you. A possible alternative would be to add <script>jQuery.noConflict();</script> in your website before the line where the form will be added.

Regards.

Ok, I got it. I just want you developers to know about this problem. Thank you!

Yes, thank you for letting us know that, however, the script provided by my colleague should fix the conflict that may cause the use of different versions of jQuery in the same website.