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

  • Profile Image
    austinfilmschool
    Asked on May 12, 2017 at 04: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.

     

     

    Thanks,

     

    Hamilton

  • Profile Image
    Kiran
    Answered on May 12, 2017 at 06: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. 

  • Profile Image
    austinfilmschool
    Answered 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? 

  • Profile Image
    Kiran
    Answered 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! 

  • Profile Image
    austinfilmschool
    Answered on May 15, 2017 at 12:32 PM
  • Profile Image
    BJoanna
    Answered on May 15, 2017 at 01: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. 

    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" onload="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. 

  • Profile Image
    austinfilmschool
    Answered on May 15, 2017 at 03: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

  • Profile Image
    BJoanna
    Answered on May 15, 2017 at 03: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.