Form Embedded on the Website has a Scrollbar

Hallo zusammen,

es geht um folgende Seite, on der ein Formular eingebettet ist: https://testshop.akkutec.at/akku-reparatur/

Leider ist das Formular hier zum scrollen. Wie kann ich denn die Höhe dieses Formulars bestimmen, sodass es nicht mehr scrollbar ist?

Lg Lorenz

Hi lstritzinger,

Thanks for reaching out to Jotform Support.Thanks for reaching out to Jotform Support. Our German Support agents are currently busy assisting other Jotform users. However, I'd be happy to help you in English using Google Translate and you can reply in whichever language you feel comfortable using. If you'd rather have support in German, let us know, and we can have them do that. But keep in mind that you'll have to wait until they're available again.

Now, let me help you with your question. When you inspect the embedded form, the form height will show on the development tools. The form's height is 452.703px.

But since your form is a card form layout, the height per page will differ. I would recommend you embed the form using Iframe code, and then you can adjust the height from there. Let me show you how:

1. Go to the top of Form Builder and select Publish.
2. Next, select Embed from the left pane.
3. Next, pick iFrame from the list of choices.
4. Lastly, choose Copy Code at the bottom to copy the iFrame embed code for your form.

Insert the code into the body tag of your webpage. You may also utilize the features in your content management system's editor to display custom HTML and incorporate your form into your website if you're using one.

Let us know if you need any other help.

Hi, thank you for the answer. I already used iFrame but how can i change the height now?
Best regards

Hi lstritzinger,

Thanks for getting back to us. For you to change the height, you need to copy the Iframe code first and then paste it to your notepad. After pasting it to your notepad, you can start configuring the height value depending on your preference. Replace "539px" with your desired height in pixels.

We suggest testing the code by adjusting it from the publish tab, then clicking preview to see if it matches your preference.

Give it a try, and let us know how it goes.

Thank you!

I have now entered 900px as the height. Unfortunately it is still displayed so small! 

See here: https://testshop.akkutec.at/akku-reparatur/

Hi Lorenz,

Thanks for reaching out to Jotform support. To resolve your issue, please try to embed the forum using the following code, instead of the one found in the embed option of the Form Builder:

  <iframe

   id="JotFormIFrame-233302999131355"

   title="Akku Analyse - Akkutec.at (V3)"

   onload="window.parent.scrollTo(0,0)"

   allowtransparency="true"

   allowfullscreen="true"

   allow="geolocation; microphone; camera"

      src="https://form.jotform.com/233302999131355"

   frameborder="0"

   style="min-width:100%;max-width:100%;height:539px;border:none;"

   scrolling="no"

  >

  </iframe>

  <script type="text/javascript">

  var ifr = document.getElementById("JotFormIFrame-233302999131355");



    

if (ifr) {

   var src = ifr.src;

   var iframeParams = [];

   if (window.location.href && window.location.href.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));

   }

   if (src && src.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));

    src = src.substr(0, src.indexOf("?"))

   }

   iframeParams.push("isIframeEmbed=1");

ifr.src = src + "?" + iframeParams.join('&');

  }

  window.handleIFrameMessage = function(e) {

   if (typeof e.data === 'object') { return; }

   var args = e.data.split(":");

   if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }

   if (!iframe) { return; }

   switch (args[0]) {

    case "scrollIntoView":

     iframe.scrollIntoView();

     break;

    case "setHeight":

     iframe.style.height = 900 + +args[1] + "px";

     if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {

      iframe.style.minHeight = args[1] + "px";

     }

     break;

    case "collapseErrorPage":

     if (iframe.clientHeight > window.innerHeight) {

      iframe.style.height = window.innerHeight + "px";

     }

     break;

    case "reloadPage":

     window.location.reload();

     break;

    case "loadScript":

     if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }

     var src = args[1];

     if (args.length > 3) {

       src = args[1] + ':' + args[2];

     }

     var script = document.createElement('script');

     script.src = src;

     script.type = 'text/javascript';

     document.body.appendChild(script);

     break;

    case "exitFullscreen":

     if   (window.document.exitFullscreen)    window.document.exitFullscreen();

     else if (window.document.mozCancelFullScreen)  window.document.mozCancelFullScreen();

     else if (window.document.mozCancelFullscreen)  window.document.mozCancelFullScreen();

     else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();

     else if (window.document.msExitFullscreen)   window.document.msExitFullscreen();

     break;

   }

   var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

   if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

    var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

    iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

   }

  };

  window.isPermitted = function(originUrl, whitelisted_domains) {

   var url = document.createElement('a');

   url.href = originUrl;

   var hostname = url.hostname;

   var result = false;

   if( typeof hostname !== 'undefined' ) {

    whitelisted_domains.forEach(function(element) {

      if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) {

        result = true;

      }

    });

    return result;

   }

  };

  if (window.addEventListener) {

   window.addEventListener("message", handleIFrameMessage, false);

  } else if (window.attachEvent) {

   window.attachEvent("onmessage", handleIFrameMessage);

  }

  </script>

Let us know how this works for you.

Looks good, thank you!

Everything fits on the desktop now - thank you! 

Unfortunately, as soon as there are less selection options on the mobile phone, a lot of empty space is displayed until the "next" button is visible. As a result, many visitors will probably not find the "next" button. 

Is there a solution for this? 

Here is a screen record: https://we.tl/t-cmqEQhEldf

Hi Lorenz,

Thanks for getting back to us. You need to make adjustments to the styling and layout of the form to ensure it displays properly in mobile view.

You can make your form wider so that, on smaller screens, it doesn't go beyond the width of the screen. The iframe's inline style's max-width property needs to be updated.

style="min-width: 100%; max-width: 100%; max-width: 600px; height: 539px; border: none;"



Apply this CSS to make your form more mobile-friendly:

@media only screen and (max-width: 600px) {

    /* Add styles for small screens */

    iframe {

        max-width: 100%;

        height: auto;

    }

}

Make these changes, then check that the form appears appropriately across a range of devices.

Give it a try, and let us know how it goes.

Unfortunately I could not insert the code but I increased the width in elementor and adapted the height to "auto".

Unfortunately this does not solve my problem and there is still a lot of padding between the selection options and the "next" button on the phone. :/

Hi Lorenz,

Could you try the modified iframe embed code as provided below?

  <iframe

   id="JotFormIFrame-233302999131355"

   title="Akku Analyse - Akkutec.at (V3)"

   onload="window.parent.scrollTo(0,0)"

   allowtransparency="true"

   allowfullscreen="true"

   allow="geolocation; microphone; camera"

      src="https://form.jotform.com/233302999131355"

   frameborder="0"

   style="min-width:100%;max-width:100%;height:539px;border:none;"

   scrolling="no"

  >

  </iframe>

  <script type="text/javascript">

  var ifr = document.getElementById("JotFormIFrame-233302999131355");

        let c=0;

        ifr.onload = (e=>{

         if(c==0){

              c++;

         }else{

            ifr.style.height="529px";

            ifr.scrollTo(0,0);

        }

        }); 

if (ifr) {

   var src = ifr.src;

   var iframeParams = [];

   if (window.location.href && window.location.href.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));

   }

   if (src && src.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));

    src = src.substr(0, src.indexOf("?"))

   }

   iframeParams.push("isIframeEmbed=1");

ifr.src = src + "?" + iframeParams.join('&');

  }

  window.handleIFrameMessage = function(e) {

   if (typeof e.data === 'object') { return; }

   var args = e.data.split(":");

   if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }

   if (!iframe) { return; }

   switch (args[0]) {

    case "scrollIntoView":

     iframe.scrollIntoView();

     break;

    case "setHeight":

     iframe.style.height = 900 + +args[1] + "px";

     if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {

      iframe.style.minHeight = args[1] + "px";

     }

     break;

    case "collapseErrorPage":

     if (iframe.clientHeight > window.innerHeight) {

      iframe.style.height = window.innerHeight + "px";

     }

     break;

    case "reloadPage":

     window.location.reload();

     break;

    case "loadScript":

     if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }

     var src = args[1];

     if (args.length > 3) {

       src = args[1] + ':' + args[2];

     }

     var script = document.createElement('script');

     script.src = src;

     script.type = 'text/javascript';

     document.body.appendChild(script);

     break;

    case "exitFullscreen":

     if   (window.document.exitFullscreen)    window.document.exitFullscreen();

     else if (window.document.mozCancelFullScreen)  window.document.mozCancelFullScreen();

     else if (window.document.mozCancelFullscreen)  window.document.mozCancelFullScreen();

     else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();

     else if (window.document.msExitFullscreen)   window.document.msExitFullscreen();

     break;

   }

   var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

   if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

    var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

    iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

   }

  };

  window.isPermitted = function(originUrl, whitelisted_domains) {

   var url = document.createElement('a');

   url.href = originUrl;

   var hostname = url.hostname;

   var result = false;

   if( typeof hostname !== 'undefined' ) {

    whitelisted_domains.forEach(function(element) {

      if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) {

        result = true;

      }

    });

    return result;

   }

  };

  if (window.addEventListener) {

   window.addEventListener("message", handleIFrameMessage, false);

  } else if (window.attachEvent) {

   window.attachEvent("onmessage", handleIFrameMessage);

  }

  </script>

Give it a try and let us know how it goes.

One the first page it's perfect! But in the second it's still too much space to the "Next" Button.

Here is a Screencast: https://we.tl/t-FOa24AuEsc

Hi Lorenz,

The issue is due to the height that was manually set to 900 with the iframe embed code provided by my colleague Bojan. Since the height was manually set to 900, the form can no longer resize itself below 900 which is why you have encountered the issue. I have removed the code where the height is set to 900 and modified the code to adjust its height accordingly.

<iframe id="JotFormIFrame-233302999131355" title="Akku Analyse - Akkutec.at (V3)" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/233302999131355" frameborder="0" style="min-width:100%;max-width:100%;height:539px;border:none;" scrolling="no"></iframe>

<script type="text/javascript">

  var ifr = document.getElementById("JotFormIFrame-233302999131355");

  let c = 0;

  ifr.onload = (e => {

    if (c == 0) {

      c++;

    } else {

      ifr.style.height = "900px";

      ifr.scrollTo(0, 0);

    }

  });

  if (ifr) {

    var src = ifr.src;

    var iframeParams = [];

    if (window.location.href && window.location.href.indexOf("?") > -1) {

      iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));

    }

    if (src && src.indexOf("?") > -1) {

      iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));

      src = src.substr(0, src.indexOf("?"))

    }

    iframeParams.push("isIframeEmbed=1");

    ifr.src = src + "?" + iframeParams.join('&');

  }

  window.handleIFrameMessage = function(e) {

    if (typeof e.data === 'object') {

      return;

    }

    var args = e.data.split(":");

    if (args.length > 2) {

      iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]);

    } else {

      iframe = document.getElementById("JotFormIFrame");

    }

    if (!iframe) {

      return;

    }

    switch (args[0]) {

      case "scrollIntoView":

        iframe.scrollIntoView();

        break;

      case "setHeight":

        iframe.style.height = args[1] + "px";

        if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {

          iframe.style.minHeight = args[1] + "px";

        }

        break;

      case "collapseErrorPage":

        if (iframe.clientHeight > window.innerHeight) {

          iframe.style.height = window.innerHeight + "px";

        }

        break;

      case "reloadPage":

        window.location.reload();

        break;

      case "loadScript":

        if (!window.isPermitted(e.origin, ['jotform.com', 'jotform.pro'])) {

          break;

        }

        var src = args[1];

        if (args.length > 3) {

          src = args[1] + ':' + args[2];

        }

        var script = document.createElement('script');

        script.src = src;

        script.type = 'text/javascript';

        document.body.appendChild(script);

        break;

      case "exitFullscreen":

        if (window.document.exitFullscreen) window.document.exitFullscreen();

        else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen();

        else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen();

        else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();

        else if (window.document.msExitFullscreen) window.document.msExitFullscreen();

        break;

    }

    var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

    if (isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

      var urls = {

        "docurl": encodeURIComponent(document.URL),

        "referrer": encodeURIComponent(document.referrer)

      };

      iframe.contentWindow.postMessage(JSON.stringify({

        "type": "urls",

        "value": urls

      }), "*");

    }

  };

  window.isPermitted = function(originUrl, whitelisted_domains) {

    var url = document.createElement('a');

    url.href = originUrl;

    var hostname = url.hostname;

    var result = false;

    if (typeof hostname !== 'undefined') {

      whitelisted_domains.forEach(function(element) {

        if (hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element) {

          result = true;

        }

      });

      return result;

    }

  };

  if (window.addEventListener) {

    window.addEventListener("message", handleIFrameMessage, false);

  } else if (window.attachEvent) {

    window.attachEvent("onmessage", handleIFrameMessage);

  }

</script>

Give it a try and let us know how it goes.

Hi, thanks for the answer! 

With your code the form is scrollable again on the mobile phone. 

I understand that it is either scrollable or, if you fix the height, the form becomes too high on the second page and so there is too much spacing to the button. 

But isn't it possible to set the height variably? So that it is not scrollable and as soon as there are less options to choose from, the height is lower? 

Thanks for the effort, I know it's a pain, but it should all fit since we have several thousand visitors per month....

Hi lstritzinger,

Thanks for getting back to us. Unfortunately, the size of the container of the iframe will not be fluid when the other parts of your form's pages are taller or shorter. This is currently a technological limitation on web forms. But in case new developments arise that would make the iframe control its height automatically per page, we'll surely be applying it.

Meanwhile, let us know if you have more questions or need any other help.