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 Form Conflicts with Other Scripts

    Asked by igida on May 28, 2014 at 09:37 AM

    My setup:

    - Wordpress Website
    - Avada Theme

    I'd like to have a link on one of our pages which opens up our form in a lightbox. I've successfully completed this step and the form works 100% perfectly. Problem is that all other scripts on the page stop working as soon as I add the lightbox code, and I can't figure out why. Please help. Here's the lightbox code I'm using (as obtained from your embed button on your website). I'm pasting this code in the body where I'd like the form link to be.

     

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

    new JotformFeedback({

    formId:'xxx',

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

    windowTitle:'Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

     

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

    lightbox form scripts conflicts form link problem style height
  • Profile Image

    Answered by igida on May 28, 2014 at 09:56 AM

    I've done some more digging on your site and came accross the following thread:
    http://www.jotform.com/answers/251136-Where-To-Insert-Jquery-Script-NoConflict

     

    The problem is that since I'm using Wordpress with a theme called "Avada", I use shortcodes for all the special scripts used by the template, so I don't have access to change them. Is there a Jotform Lightbox workaround for Wordpress installations that contain other scripts? 

  • Profile Image

    Answered by Carina on May 28, 2014 at 11:04 AM

    I kindly ask you to share with us the website url so we can run some tests and try to find a solution for this difficulty.

    Thank you

  • Profile Image

    Answered by igida on May 28, 2014 at 11:05 AM

    Thank you for your response.

    Here is the URL:
    http://www.ottawastudenthousing.ca/form-test/

  • Profile Image
    JotForm Support

    Answered by Welvin on May 28, 2014 at 12:20 PM

    Try to use the following codes - embed forms wrapped with jQuery no conflict codes: http://pastiebin.com/53860bf82b0f5.

    Update us here for the result.

    Thanks

  • Profile Image

    Answered by igida on May 28, 2014 at 12:27 PM

    Thanks Welvin. I just tried that and it makes the JQuery work again. However, the lightbox no longer seems to work. http://www.ottawastudenthousing.ca/form-test/

  • Profile Image
    JotForm Support

    Answered by Welvin on May 28, 2014 at 01:34 PM

    I'm sorry for that.

    Please try this, without the 2 in the feedback2.jshttp://pastiebin.com/53861d5ae1c19

     

    If that isn't working, please try the following codes: http://pastiebin.com/53861ddfa67e4

    Please get back to us for the result. I have asked my colleague to help as well.

    Thanks

  • Profile Image

    Answered by igida on May 28, 2014 at 02:55 PM

    Thanks for your continued help Welvin.

    For the last two methods, the lightbox JotForm starts working, but the JQueries stop.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 28, 2014 at 05:02 PM

    Hi,

    Removing the "2" on feedback seems working as suggested by my colleague.

    Please check my demo:

    https://shots.jotform.com/elton/workaround/lightbox_384076.html

    The jQuery Slide under the form is working and the form itself is also working. Can you tell us which jQuery that's not working when removing "2" on feedback is applied? Maybe I am missing something, kindly check.

    We'll await your reply. Thanks!

  • Profile Image

    Answered by igida on May 28, 2014 at 05:05 PM

    Thank you EltonCris. Most of the JQueries work in the demo, with the exception of the "4 Hour Approval" animation. If we can't get that working, I guess I could simply remove the "4 Hour Approval" animation to make things simple.

  • Profile Image

    Answered by igida on May 28, 2014 at 05:10 PM

    Also, I guess using feedback.js (without the 2) results in the lightbox not being able to resize itself as the form grows and shrinks?

  • Profile Image
    JotForm Support

    Answered by jonathan on May 28, 2014 at 08:16 PM

    Hi,

    In your test website page http://www.ottawastudenthousing.ca/form-test/  I could not find the link to lightbox form, so I can at least check also in actual.

    Can you guide me how I can do the test?

    Also, I guess using feedback.js (without the 2) results in the lightbox not being able to resize itself as the form grows and shrinks?

    I can see what you meant on the test website of our colleague EltonCris.

     

    you can correct the resizing using injected CSS codes also.

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    Try adding this CSS code into your form

    .form-all{width : 350px !Important;}

    you can adjust the px width accordingly.

     

    Hope this help. Inform us if there is more we can help you with.

     

    Thanks!