Lightbox Form Conflicts with Other Scripts

  • igida
    Asked on May 28, 2014 at 9: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> 

  • igida
    Replied on May 28, 2014 at 9: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? 

  • Carina
    Replied 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

  • igida
    Replied on May 28, 2014 at 11:05 AM

    Thank you for your response.

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

  • Welvin Support Team Lead
    Replied 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

  • igida
    Replied 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/

  • Welvin Support Team Lead
    Replied on May 28, 2014 at 1:34 PM

    I'm sorry for that.

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

    Lightbox Form Conflicts with Other Scripts Image 1 Screenshot 20

     

    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

  • igida
    Replied on May 28, 2014 at 2:55 PM

    Thanks for your continued help Welvin.

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

  • Elton Support Team Lead
    Replied on May 28, 2014 at 5: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!

  • igida
    Replied on May 28, 2014 at 5: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.

  • igida
    Replied on May 28, 2014 at 5: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?

  • jonathan
    Replied on May 28, 2014 at 8: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.

    Lightbox Form Conflicts with Other Scripts Image 1 Screenshot 20

     

    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!