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

    Does JotForm work with jQuery?

    Asked by AvrohomYisroel on November 18, 2014 at 12:27 PM

    Hello,

    I have a form that works fine when used as a plain standalone .html file, but that fails when I try to include it as part of an existing site.

    I have discovered that the problem is when I add a reference to jQuery to the page. As soon as I do that, the signature widget won't appear.

    Can I use JotFrm with jQuery? If so, how?

    Thanks

    Screenshot
    JotForm problem site thanks hello
  • Profile Image
    JotForm Support

    Answered by david on November 18, 2014 at 01:41 PM
    Hi,
    Occasionally our forms have can cause a conflict with jquery.  Inserting "noConflict" code in your site may allow for your form to work properly.  Here is a guide on inserting the code:
    http://stackoverflow.com/questions/16294536/jotform-conflict-with-jquery
    If this does not resolve your issue, let us know and we will be happy to see what else we can do.

     

  • Profile Image

    Answered by AvrohomYisroel on November 18, 2014 at 02:00 PM

    Hello, thanks for the reply.

    Unfortunately, I'm not sure your suggestion is going to work. I'm using Bootstrap, which is a hugely popular framework that's built on jQuery, as well as a few other libraries that are as well, and I can't go through them all and change their code.

    Does your code use the $ as well? If so, why? Surely this is asking for problems, given how prevalent jQuery is. I know they don't own Javascript, nor any rights over the $, but given that just about everyone uses jQuery, it seems odd to do something that's going to conflict with it.

    Any other suggestions? Thanks again.

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on November 18, 2014 at 03:42 PM

    We have a ticket here to request Boostrap Frame and Jotform functionality

    However, I think you shouldn't have a conflict with other JS libraries if you embed the form using its iFrame version

    If this is not the case and if the conflict is between jquery and our form's code ( which is java prototype), then you should find the last line of jquery code prior to the jotform's code and add this function (I'm talking about finding the jquery line in the page where the form will be added)

    <script>jQuery.noConflict();</script>
     

  • Profile Image

    Answered by AvrohomYisroel on November 23, 2014 at 04:00 PM

    Hello,

    Well, I don't see how I'm going to use this form at all. If I use the iframe version, it looks lousy, as I have your signature widget and button stuck in the middle of a bigger form. Even if I don't use the iframe, I can't see how to get rid of your button and stick with the one I'vee got, or at least to move your button to the bottom of the form and style it to look like the normal Bootstrap button.

    Is it possible to integrate with ASP.NET MVC? I seem to be spending a lot of time trying to work around your code. I just want to use the signature widget on my own form. Can I do that?

    Thanks

  • Profile Image
    JotForm Support

    Answered by ashwin_d on November 23, 2014 at 10:52 PM

    Hello,

    Embedded your form with its iFrame embed code should not change the look & feel of your form. Please share the web page URL where you have embedded your form and we will take a look.

    Did you try to use the noConflict code as suggested earlier?

    Even if I don't use the iframe, I can't see how to get rid of your button and stick with the one I'vee got, or at least to move your button to the bottom of the form and style it to look like the normal Bootstrap button.

    Please be noted that of you remove the button of your form, the data of form fields including the signature widget will not be captured. 

    Please share your web page URL and we will take a look.

    Thank you!

  • Profile Image

    Answered by gvilcins on December 05, 2014 at 12:14 PM

    @AvrohomYisroel, I agree, it's disappointing that the JF library conflicts with a popular library like jQuery, as we all see the benefits of using it. IFrames are very "old-school" and I also prefer not to use them because you cannot have a nice custom look.

    The "noConflict" approach did not work for me because it cancels out the rest of my jQuery and Bootstrap code, but I found another workaround, not the cleanest solution, but it seems to work for a simple form.

    Remove the JF scripts from the form and after your page has loaded, load the JF scripts via AJAX after the other JS/jQuery code you have. I believe this resolves the namespace issue of both libraries using the "$".

    $.when(

         $.getScript("https://static-interlogyllc.netdna-ssl.com/static/prototype.forms.js"),
         $.getScript("https://static-interlogyllc.netdna-ssl.com/static/jotform.forms.js?x.x.xxxx"),
         $.Deferred(function(deferred){
              $(deferred.resolve);
         })
    ).done(function(){
         JotForm.init();
    });