I'm also having a conflict with the javascript in the jot form. It breaks the lightbox in my Unbounce Landing page. Help?

  • Jhnewbill
    Asked on September 22, 2015 at 1:17 PM
    Jotforms officially integrates with UB, however not really in my case I think. We use a form handler (pardot) and I cant just paste <script type="text/javascript" src="//jotformpro.com/jsform/52628337035960"></script>   in a custom HTML box cause the POST action is set up to go to Jotforms. 
     
    Your original solution was to build a thank you page and make it a php redirect to pass the POST data! So working with pardot I tested a logical one. I just copied the source code and manually changed it. I just mapped the new names and replaced the POST data and it worked great!!
     
    <form class="jotform-form" action="http://www2.prometheanworld.com/l/18462/2015-09-18/7dq3kp" method="post" name="form_52628337035960" id="52628337035960" accept-charset="utf-8">
     
    Then I inserted in a page that had a lightbox video to YouTube. 
     
    Through testing I noticed when I took out the source js the lightbox worked and of course the dynamic dropdown that reveals state when us is selected didn't.
     
    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/prototype.forms.js" type="text/javascript"></script>
    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/jotform.forms.js?3.3.9158" type="text/javascript"></script>
     
    When removed, the lightbox fires...the Jotform works but the dynamic hidden field and example scripts don't.....
     
    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/prototype.forms.js" type="text/javascript"></script>
    <script src="//d2g9qbzl5h49rh.cloudfront.net/static/jotform.forms.js?3.3.9158" type="text/javascript"></script>
     
    <script type="text/javascript">
       JotForm.setConditions([{"action":[{"field":"12","visibility":"Show"}],"id":"1442798918117","index":"0","link":"Any","priority":"0","terms":[{"field":"11","operator":"equals","value":"United States"}],"type":"field"}]);
       JotForm.init(function(){
          setTimeout(function() {
              $('input_4').hint('ex: myname@example.edu');
           }, 20);
          setTimeout(function() {
              $('input_18').hint('ex: (###) ###-#### ');
           }, 20);
          JotForm.description('input_18', 'If you number is in a country other than the United States, simply at 011 and your country code of origin. ');
    JotForm.clearFieldOnHide="disable";
    JotForm.onSubmissionDISABLEDerror="jumpToSubmit";
       });
    </script>
     
    Firebug and some forums lead me to believe it was a conflict. However, by default Unboounce already runs the "no conflict" script. 
     
    So the hunt began...here are some of the solutions but I don't which will work with UB. If I should call the libraries externally, is there a way to change the POST action to my handler without doing a PHP page,  etc....
     
    This one seems logical but I cant make it work - (maybe user error):
     
    Unbouncel delivers the lighbox as an iframe so someone said it may be css related
     
    another said run a script that changes the $ to Jquery.....
     
     
    Help!!!!
  • Charlie
    Replied on September 22, 2015 at 2:49 PM

    Apologies for the inconvenience or trouble that you are having.

    It is highly likely that you will get script conflict when you use the form's full source code, and at the same time your website builder is loading external script libraries.

    When I checked your websites source code, you'll noticed that you actually have 3 Javascript libraries that uses jQuery, one is that you called the jQuery via Google API twice, then you are also calling a library of Fancybox as a jQuery plugin. 

    Im also having a conflict with the javascript in the jot form Screenshot 30

     

    You also have jQuery scripts running at the bottom of your website page. You might need to check the solution of the user TheBronx in this link using the jQuery noConflict: http://stackoverflow.com/questions/16294536/jotform-conflict-with-jquery. The "$" is now free to use by JotForm. But if you will be using jQuery's scripts, you need to use the word "jQuery" when calling them, please refer to the link for the guide.

    Here's an example conflict that I believe is happening, Fancybox is a jQuery plugin, but the code below it uses "$" which should have already been available to use by JotForm, it conflicted with that script. I believe Fancybox should use "lp.jQuery(document)" as it is a plugin by jQuery, but I might be wrong in this. You might need to change the Fancybox's actual script library to use a different syntax when calling the functions.

    Im also having a conflict with the javascript in the jot form Screenshot 41

     

    jQuery.noConflict is quite tricky especially if you have multiple libraries running on one page.