JotForm on Wix Mobile

Hello.

I am trying to make a Jotform (new card format) show up nicely on our Wix site. I contacted you all a little while ago and you provided me with some CSS code which I included as instructed. It seemed to help, but we are realizing now, not nearly enough. 

Below is the form code AND the CSS. I adjusted both (in bold) to try to make the frame shorter without luck. 

I have also included a screenshot of the mobile page as Wix renders it in their preview. In truth, after checking several actual devices, iOS and Android, the Start button is below the fold, every time. 

How do I get rid of all the space on top allowing the button to be visible? i.e. if I drag the Wix frame to make it smaller (shorter) the form starts to disappear. 

Thanks in advance for your help!
Mark

   <iframe

     id="JotFormIFrame-83315962800153"

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

     allowtransparency="true"

     allowfullscreen="true"

     allow="geolocation; microphone; camera"

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

     frameborder="0"

     style="width: 1px;

     min-width: 100%;

     height:239px;

     border:none;"

     scrolling="no"

   >

   </iframe>

   <script type="text/javascript">

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

     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) {

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

           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>

 

<style type="text/css">

 

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

 

#JotFormIFrame-83464366601155{

 

height: 100px !important;

 

}

 

}

</style>

I am sorry that I am unable to find your previous thread with the CSS code provided. Could you try using only the iframe section from the embed code after adjusting the height and see if that works?

If you are still experiencing any issue, please provide us with the web page URL where the form is embedded so that we can take a look and assist you further.

Thanks!

Thank you for your email.
Attached pls find the reply from Jotform where we were provided the CSS
code.
I will use only the iFrame code as instructed. I hope that helps...but that
is exactly what we had used in the past.
I will get back in touch shortly.
Mark
*Mark Ryan Pollock, Operations Manager*
800-896-8669 / 770.263.8669 /
mark@watchhelp.com / www.HurleyRobertsService.com

6990 Peachtree Industrial Blvd. Ste. C
Peachtree Corners, GA 30071
*Expert Watch Repair Since 1980*
*Leave us feedback: **https://getfivestars.com/f-2121
*
...

Unfortunately, we cannot receive the email attachments.

The card layout forms are less customizable. When you have a link, please post it in this support thread so we will be able to check the embedded form.

Here is the screen shot of the Wix mobile preview. ONLY the iFrame code was used. 

As you see, there is no improvement. Note also that the actual phones that I have been viewing this page often display the green button totally below the fold.  

When I initially inserted the CSS code provided to me in December, the white space on top WAS successfully minimzed to allow the button to be above the fold. That is no longer the case. 

I would appreciate any help you can offer to get the form higher up on the screen so folks can see the whole form easily. 

Thanks,

Mark 

Please try adjusting a script that comes with the iFrame code to see if that helps in any way.

Change:

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

to:

case "setHeight":
iframe.style.height = window.innerHeight - 15 + "px";

Make sure to test the page using a mobile device. The preview may look different.