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

    iFrame code on Wix site showing scroll bars

    Asked by iMatter 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>

    Page URL:
    http://www.imatteryouth.org/#!subscribe/c2146

    iframe code site scroll JotForm problem style
  • Profile Image

    Answered by Syed 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

    Answered by iMatter 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

    Answered by Syed 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

    Answered by iMatter 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

    Answered by Syed 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

    Answered by iMatter 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

    Answered by Syed 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

    Answered by iMatter 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
    JotForm Support

    Answered by david 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

    Answered by iMatter 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
    JotForm Support

    Answered by david 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

    Answered by iMatter 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
    JotForm Support

    Answered by david 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.