iFrame code on Wix site showing scroll bars

  • Profile Image
    iMatter
    Asked on April 21, 2015 at 11:22 AM

    I've just embedded my jotform onto my wix website.

    The only problem, is that a scrollbar appears on the right side of the form, so when someone scrolls down on the page, the form moves up under some other text. I don't want the scroll bar there - the form is exactly how I want it - without the scroll bar.

    Here is the iFrame code (which was auto-generated by jotform - I haven't changed it at all). What do I need to do - so the scrollbar doesn't appear?

     

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

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

  • Profile Image
    Syed
    Answered on April 21, 2015 at 11:57 AM

    Hi there;

            Please try to use the following way to display your form on WIX Website. Your website consists of 2 iFrames, which conflicts to each other. I just have clone your form for this particular thread and tested, it worked.

    <script type="text/javascript" src="//form.jotformpro.com/jsform/51083483504149"></script>

     

    Please test and will let us know if you need more clarification on this, we would love to assist you our users.

     

    Thankyou,

  • Profile Image
    iMatter
    Answered on April 21, 2015 at 12:04 PM

    I'm not sure exactly where to put the code you've suggested (not an HTML programmer). Can you be very specific for me, of where in the iFrame code this goes, and what it replaces, if anything?

    Thanks

  • Profile Image
    Syed
    Answered on April 21, 2015 at 12:11 PM

    Hi there;

             Just replace the old iFrame code with the code I provided

    Code Need To Remove:

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

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    Code Need to Insert/Replace:

     

    <script type="text/javascript" src="//form.jotformpro.com/jsform/51083483504149"></script>

     

    Let us know if it helps, if in case you can't figured it out, I will ensure you further.

     

    Thankyou,

  • Profile Image
    iMatter
    Answered on April 21, 2015 at 12:17 PM

    OK - i did this - but it is doing the same thing. Scroll bar still appears and scrolls. Note that I did not publish this - just tried it in Preview mode.

  • Profile Image
    Syed
    Answered on April 21, 2015 at 12:21 PM

    Can I take a look to your web page please. So that I can help you further.

     

    Thanks,

  • Profile Image
    iMatter
    Answered on April 21, 2015 at 12:58 PM

    Sure - the webpage link is in my initial submission - but here is another link to the page

     

  • Profile Image
    Syed
    Answered on April 21, 2015 at 01:10 PM

    Hi there;

            Please try to inject some CSS Code Block at the end, we've an alternative way to resolve this issue. Please read our guide here on How to Inject Custom CSS Codes.

    .s11iFrameHolder > iframe {position: absolute;height: 530px !important;}

    Let us know, if you still having issues on this, we would be happy to assist you.

     

    Thankyou,

  • Profile Image
    iMatter
    Answered on April 21, 2015 at 01:25 PM

    I read the guide - and tried this but it didn't work. However, I wonder if I'm putting the Custom CSS code in the right place. There already custom code in the field already (Form Style tab - Inject Custom CSS Code). 

    Here is what the code is at the end of the field - where should your suggested addition go? I imagine before the Inspect Separator? Before or after the last "}"

     

     

    .form-checkbox-item input, .form-radio-item input { width: auto; } .form-collapse-table { margin: 0 5%; } } /* | *//*__INSPECT_SEPERATOR__*/

  • Profile Image
    david
    Answered on April 21, 2015 at 02:07 PM

    Try embedding your form using the iFrame code minus the autoheight script at the end.  So replace your current code with just:

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

    To see if that works.  It has for other users in the past.

    If it does not, let us know and we will be happy to have another look.

  • Profile Image
    iMatter
    Answered on April 21, 2015 at 02:37 PM

    Nope - that didn't do it either. I copied the code you suggested and replaced the existing iFrame code that I had put in Wix - and it is still doing the same thing.

  • Profile Image
    david
    Answered on April 21, 2015 at 02:41 PM

    You may need to increase the height of the area your form is being embedded to in Wix.  Here is another user with a similar issue:

    http://www.jotform.com/answers/420196-Is-there-a-way-to-disable-the-scrolling-in-a-form-in-my-Wix-website

    Since it does not appear as though the form is causing the scrolling, it may be your Wix page is the culprit.

  • Profile Image
    iMatter
    Answered on April 21, 2015 at 05:22 PM

    OK - I increased the height - and that worked. Not exactly what I wanted, as it adds extra space that I'd rather not have. But I can live with it.

    Thanks

  • Profile Image
    david
    Answered on April 21, 2015 at 05:51 PM

    I am glad to hear it worked.  You can also try decreasing the height of the iFrame.  In the first section of the embed code, you can adjust the height:

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

    Making the frame shorter may allow for you to make the space the form is embedded to smaller without having the scrolling.

    If there is anything else we can help you with, let us know and we will be happy to assist you.