Embedded Card Forms: Wrong form height on mobile devices

Hi everyone!

Did you find a way to fix the problem? It's shame to not have the possibility to integrate correctly the form in WP!

May be there is a code, or a script to insert in WP or in DIVI theme which could be adjust the size of the integration?

Tell me if you find a way, thanks.

Sylvain

Hello again,

Basically, you should add the following css code to your web page:

body {margin: 0 !important;}

We can take a look if you provide us the link to your WP site.

Let us know if you need any further help.

Hi victoria,

First of all, Thanks for your answer.

I tried to integrate your code in the CSS of my web page, but nothing moved! :(

Find here the link of my web page: http://www.magadi.fr/index.php/form/

And here my form: https://form.jotformeu.com/MAGADI/voyages-mysteres

Thanks again for your help!

Sylvain

My apologies for splitting the thread. I've just realized that I was the one who has changed the username for you. 

Can you please try the following code to embed the form on your web page?

<iframe id="JotFormIFrame-82504205061343" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotformeu.com/MAGADI/voyages-mysteres" frameborder="0" style="width: 1px; min-width: 100%; height:539px; max-height:100% !important; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-82504205061343"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { 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"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": 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}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

That is the iframe code, but I have added the max-height property.

From my tests this should work. Please let us know how it goes.

Nothing happens!! :(

And I tried with min-height:100% !important; ... but nothing too!

I don't understand, I tried to change all the box sizes, but nothing moved. I can only reduce the size, but not enlarge.

I'm surprised that works in your side.

Sylvain

Probably, the height of elements containing the form is not set. Here is my embedded test form.

The only difference I see that my page has also a height for body set to 100%;

Can you try this? 

body {margin: 0 !important; height: 100%;}

Unbelievable!!! I did it!!

I think the problem was a strike between DIVI Style and JOTFORM style (certainly because of the boxes proposed in DIVI style)! Because, as you said Victoria, in your side the form fitted well... so that was strange, but you didn't use DIVI builder. That's how I understood!!

So I create an HTML file (with no CSS file attached), with the HTML code which I found on your link, Victoria. Then I send the file in my ftp. I linked all the links on my website... Then TADAM, my Jotform rocks!

http://www.magadi.fr/form

Thanks you everybody!

Have a nice weekend

Sylvain

Hey Jotform!

I have a new problem! When I load my page with my jotform, I have white band at the bottom of the screen. Let's see:

Don't understand why I got this. I didn't change my html code since last week. It's always the same:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>MAGADI - Voyages Mystères</title>

    <link rel="shortcut icon" href="images/LogoMagadi.png">

   <style>

       html,

       body {

           margin: 0;

           height: 100% !important;

           padding:0;

       }

   </style>

</head>

<body>

    <iframe

      id="JotFormIFrame-82504205061343"

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

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

      src="https://form.jotformeu.com/MAGADI/voyages-mysteres"

      frameborder="0"

      style="width: 1px;

      min-width: 100%;

      height:100% !important;

      border:none;"

      scrolling="no"

    >

    </iframe>

    <script type="text/javascript">

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

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

        var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

        if(ifr && get.length > 0) {

          var src = ifr.src;

          src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;

          ifr.src = src;

        }

      }

      window.handleIFrameMessage = function(e) {

        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";

            break;

          case "collapseErrorPage":

            if (iframe.clientHeight > window.innerHeight) {

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

            }

            break;

          case "reloadPage":

            window.location.reload();

            break;

          case "loadScript":

            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}), "*");

        }

      };

      if (window.addEventListener) {

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

      } else if (window.attachEvent) {

        window.attachEvent("onmessage", handleIFrameMessage);

      }

      </script>

</body>

</html>

All my screen-height in the code is 100%, but when I load the page in my browser and I check the console (under Google Chrome), the height change to 640px automatically. Is there a problem in the script?

Thanks for your help,

(Sorry for the long message, I gave you all the tries I did)

Sylvain

I fixed it! ;) 

Thank you for taking the time updating us on the status and letting us know you have resolved the issue already.

I did checked on your website and I see all is good now.

To inform you, I changed this part (in red) in the Iframe. And I think the problem came from the code that you share when we want to publish the form in a website.

<iframe id="JotFormIFrame-82504205061343" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotformeu.com/MAGADI/voyages-mysteres" frameborder="0" style="width: 1px; min-width: 100%; height:100%; min-height:100% !important; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-82504205061343"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { 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 = window.innerHeight + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": 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}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

Thank you for sharing the resolution to us. We will mention this to our back end team support so they can take a look as well and do the necessary fix/adjustments.

Best