My jotform iframe is disappearing when used in conjunction with stickkit.js. How do I keep this from happening?

  • austinfilmschool
    Asked on May 12, 2017 at 4:57 PM

    Hi,

     

    Here is a link to the site I'm working on...

     

    http://austinfilmschool.org/membership/membership-overview-with-jotform/

     

    You'll notice that, on page load, the jotform is there and doing fine. But, on page scroll, the jotform disappears. You'll also notice that the div it is in will follow the viewport on scroll, adding borders to itself. I'm doing this via a plugin called sticky-kit.js, specifically the plugin .js file is called stickykit.min.js. This is a jquery plugin that makes a div fixed on certain parts of the page when the user scrolls, so the assigned div/box will follow the user down the page.

    I think that when the stick-ki javascript is activated, either the plugin, or something JotForm is doing is making it disappear. I was thinking maybe it was jotfrom responding to an unotherized javascript event on it's jotform iframe and making all of the form disappear. The reason I think this is because, if you scroll and activate stickykit.js on the 'div.ov-sticky-box', the iframe from jotform within is still there, but it's <head> and <body> element go from full, to completely empty. 

    But, maybe I'm wrong about this? Is there a way to fix this problem either through jotform, or simple JS. I may just be missing something altogether so any input would be greatly appreciated. 

    Below are two screen shots, one before scroll and thus before 'sticky_kit:stick' event is activated, and one after. If you look at the chrome inspector in each screen shot, you'll see that under the iframe, the body first has content, and then after scroll, has no content. 

    Any help would be greatly appreciated.

    My jotform iframe is disappearing when used in conjunction with stickkit Screenshot 30

     

    My jotform iframe is disappearing when used in conjunction with stickkit Screenshot 41

     

    Thanks,

     

    Hamilton

  • Kiran Support Team Lead
    Replied on May 12, 2017 at 6:17 PM

    It seems that the form scripts are conflicting with the other scripts on the web page. I see that the form is embedded using default javascript embed method. Could you try embedding the form using iframe embed method and see if that helps? You may get the iframe embed code of your JotForm by following the steps provided in the guide below:

    https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Please get back to us if the issue still persists. We will be happy to assist you further. 

  • austinfilmschool
    Replied on May 15, 2017 at 12:14 PM

    Ok, we're getting closer. If you look at the link now, in Chrome at least, it seems to load the iframe, then, on scroll, it disappears, then reloads the iframe while also jumping the user back up to the top of the page. 

    Not sure what in the jotform iframe is doing this, but I do see quite a bit of javascript in there so maybe its another script conflict? 

  • Kiran Support Team Lead
    Replied on May 15, 2017 at 12:30 PM

    I have checked the provided web page http://austinfilmschool.org/membership/membership-overview/ and see that there is no form embedded. I have also tried inspecting the web page and couldn't find the embedded form on the page. Did you remove the form embed code from the form? 

    Please try embedding the form using iframe embed code and let us know so that we can take a look and provide you with necessary assistance.

    Thank you! 

  • austinfilmschool
    Replied on May 15, 2017 at 12:32 PM

    Here's the correct link. Thank you.

  • BJoanna
    Replied on May 15, 2017 at 1:54 PM

    I have inspected the webpage you provided and I was able to replicate mentioned issue. When I scrolled to the bottom of the webpage, the form disappeared. 

    I have checked console logs on your webpage and I think that this issue is not related to JotForm iFrame code. It seems that plugin that you are using is constantly being recalculated and it's diapering. 

    My jotform iframe is disappearing when used in conjunction with stickkit Screenshot 20

    You can try to remove script code of your iFrame code, to see if that will resolve your issue. Use only this part of the iFrame code:

    <iframe id="JotFormIFrame-71316174684156" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.us/71316174684156" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

    Beside that I can only suggest you to check the plugin that you are using or to try to move the from to the middle of the page.

    Let us know if you need further assistance. 

  • austinfilmschool
    Replied on May 15, 2017 at 3:37 PM

    Hi BJoanna,

    I believe you're right. It seems like it's now the plugin that's having problems. After removing jotform on another iteration I'm working on, this problem still persists with the stick box disappearing on me. It's done this before as well. 

    I'll do some debugging and try to catch it but I appreciate your and all of your colleagues help! 

     

    Thanks

     

    Hamilton

  • BJoanna
    Replied on May 15, 2017 at 3:49 PM

    I am glad to hear that you found the cause of your issue. 

    Unfortunately we can not help you to debug your plugin, because that is out of our scope. 

    If you have any other issue or questions that are related to JotForm, please let us know.