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

    Feedback Form Conflicts with my Jquery Rollover and other Jquery Plugins

    Asked by kevin1016 on March 26, 2013 at 06:42 PM

    This isn't an issue with JotForm but I thought I'd ask here and see if anyone can give me some advice.  I'd like to use the Feedback button option for putting on the main page of my website, however, when I do, it breaks the other rollover effects.  I'm currently using the same type button from 123 contact forms and it doesn't break these effects.  Anyone have any suggestions?  I'd prefer to use JotForm.

    Page URL:
    www.cascadebuilderservices.com

    contact forms JotForm 123
  • Profile Image
    JotForm Support

    Answered by EltonCris on March 26, 2013 at 09:39 PM

    Hi,

    Most probably because of code conflict between JotForm and your existing website scripts. Here's how you can fixed it.

    On the first line of code on your lightbox embed code, remove the number "2" after 'feedback'. Example, it's highlighted below.

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.2402" type="text/javascript">

    new JotformFeedback({

    formId:'30833447631958',

    base:'http://jotformpro.com/',

    windowTitle:'Untitled Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-30833447631958" style="cursor:pointer;color:blue;text-decoration:underline;">Untitled Form</a>

    Feel free to updates us if this doesn't help. Thanks!

  • Profile Image

    Answered by kevin1016 on March 26, 2013 at 09:59 PM

    I tried this code (I removed the "2") which still creates the conflict:

     

    Here's a test page showing the new feedback button with the broken rollover effects on the other elements: cascadebuilderservices.com/test

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 27, 2013 at 03:00 AM

    Hi,

    Thanks for the details. I'll check this further and get back to you. It's most probably due to scripts clashing. 

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 27, 2013 at 03:18 PM

    Hi,

    Sorry for the delay. I was just a bit puzzled on finding a possible solution. I didn't realized your websites runs with 10+ different jquery plugins. While I wasn't able to fix it with jQuery noConflict what I did is I modified the jotform lightbox jquery script to be fully jquery based without noconflict code so it doesn't interrupt with your fully jquery site.

    Please use the following lightbox embed code.

    <script src="https://shots.jotform.com/elton/fjf_jotform.js" type="text/javascript">

      new JotformFeedback({

         formId   : "20491734198",

         buttonText : "Quote Request",

         base   : "https://www.jotform.com/",

         background : "#0280F5",

         fontColor  : "#FFFFFF",

         buttonSide : "bottom",

         buttonAlign  : "right",

         type   : 1,

         width    : 700,

         height   : 500

      });

    </script>

    Just in case this wont work, replace your scripts.js with this. https://shots.jotform.com/elton/script.js (you can copy this script and replace your existing script.js file)

    Demo: https://shots.jotform.com/elton/working_demo_197589.html

    Thank you!

  • Profile Image

    Answered by kevin1016 on March 27, 2013 at 05:53 PM

    That works.  Thanks!  Any idea why the button disappears when I position in left or right?  It only works in the bottom position.

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 27, 2013 at 06:06 PM

    Hi Kevin,

    Funny, we had the same issue earlier but I found out it's a mistake with my code when changing center and right. :) It should be:

    fontColor  : "#FFFFFF",

    buttonSide : "left",

    buttonAlign  : "center",

    type   : 1,

    Of course this is for the left position, changing left to right moves the button to the right. Kindly check that on your code as well. Thank you!

  • Profile Image

    Answered by kevin1016 on March 27, 2013 at 06:10 PM

    That works.  Thanks for all of your help!

  • Profile Image

    Answered by kevin1016 on June 09, 2013 at 03:06 PM

    I just noticed that this doesn't work correctly in IE10.  It shows the button horizontally instead of vertically.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 09, 2013 at 03:57 PM

    @Kevin,

    Hi, I could see the same issue when viewing your feedback button in IE10.

     

     

    But perhaps this is due to the original embed code being at the bottom when collected from the Jotform embed code.

    Can you try generating the feedback embed code again, using the right side screen alignment. And then just modify the code again appropriately as suggested by EltonCris.

    Then test again.

    Please inform us if you need further assistance on this.

    Thanks.

     

     

  • Profile Image

    Answered by kevin1016 on June 09, 2013 at 10:04 PM

    Looks like changing the Screen Alignment just makes the code say buttonSide : "right",

    The current code on my site already says buttonSide : "right",

    Is there something else I should change?

    Here's the full code currently in use:

    <script src="https://shots.jotform.com/elton/fjf_jotform.js" type="text/javascript">

     

      new JotformFeedback({

     

         formId   : "20491734198",

     

         buttonText : "Request a Quote",

     

         base   : "https://www.jotform.com/",

     

         background : "#37A8CA",

     

         fontColor  : "#FFFFFF",

     

         buttonSide : "right",

     

         buttonAlign  : "center",

     

         type   : 1,

     

         width    : 700,

     

         height   : 500

     

      });

     

    </script>

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 10, 2013 at 02:27 AM

    @kevin1016

    I think our new feedback form has a hotfix for IE10 issues, let me check this and get back to you with the solution.

    Our apologies for any inconveniences caused. Stay tuned!

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 10, 2013 at 02:49 AM

    Ok, on the first line of your form embed code, replace the script URL with this.

    https://shots.jotform.com/elton/feedback3.js

    It will then look like this:

     

    <script src="https://shots.jotform.com/elton/feedback3.js" type="text/javascript">

      new JotformFeedback({

         formId   : "20491734198",

         buttonText : "Request a Quote",

         base   : "https://www.jotform.com/",

         background : "#37A8CA",

         fontColor  : "#FFFFFF",

         buttonSide : "right",

         buttonAlign  : "center",

         type   : 1,

         width    : 700,

         height   : 500

      });

    </script>

    Result on IE10,

    Hope this helps. Thanks!

     

  • Profile Image

    Answered by kevin1016 on June 10, 2013 at 12:17 PM

    Thanks!  Working great.