Jotform on Wix Mobile

  • Profile Image
    watchhelp
    Asked on January 21, 2019 at 11:43 AM

    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"

         onload="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>

  • Profile Image
    Kiran
    Answered on January 21, 2019 at 01:10 PM

    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?

    1548094009iframe_embed_changeheight.png

    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!

  • Profile Image
    watchhelp
    Answered on January 21, 2019 at 01:43 PM
    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
    *
    ...
  • Profile Image
    Mike
    Answered on January 21, 2019 at 02:54 PM

    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.

  • Profile Image
    watchhelp
    Answered on January 22, 2019 at 02:12 PM

    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 


    1548184138IFrame code only on Wix mobile



  • Profile Image
    Mike
    Answered on January 22, 2019 at 03:43 PM

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

    1548189593record.gif

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