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

    Lightbox embed form causes terrible bugs on page.

    Asked by RussianBoss on March 21, 2016 at 08:26 PM

    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 */ }

    Page URL:
    http://codepen.io/anon/pen/XdMOgX?editors=1000

    Screenshot
    bugs JotForm pop-up embed
  • Profile Image
    JotForm Support

    Answered by BDAVID on March 21, 2016 at 09:02 PM

    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/ 

  • Profile Image

    Answered by RussianBoss on March 21, 2016 at 09:14 PM

    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.

  • Profile Image

    Answered by RussianBoss on March 21, 2016 at 09:18 PM

    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 */ }

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 21, 2016 at 10:17 PM

    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. 

  • Profile Image

    Answered by RussianBoss on March 21, 2016 at 10:34 PM

    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.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 21, 2016 at 11:02 PM

    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/

  • Profile Image

    Answered by RussianBoss on March 21, 2016 at 11:15 PM

    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?

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 22, 2016 at 12:06 AM

    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.

  • Profile Image

    Answered by RussianBoss on March 22, 2016 at 12:31 AM

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

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 22, 2016 at 12:41 AM

    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.