Embedded form is cut off from bottom in the mobile view

Hi there,

I have a few forms built with Jotforms, and I have embedded them on my Squarespace website. For some reason, when viewing on mobile, the forms are being cut off at the bottom. See screenshots.

How do I fix this?

Thanks,

Summer

Hi Summer,

Thanks for reaching out to Jotform Support. I'm really sorry that you're having trouble with this. I cloned your form and tested it to see if I could replicate the issue, but everything worked properly on my side. Check out my results in the screencast below:

I've cleared your form caches. Can you try it again and see how it goes? If you run into the same problem again, let us know and we'll do some more testing to see what's going on.

Reach out again if you need any other help.

Hi there,

Okay so the wrapped blooms form, seems to be working now, thank you. However, the form on this page ~ https://www.aliceandalec.com/weddings on mobile view is now cropping off the bottom. There should be a button below the details field.

Also this page too, same issue ~ https://www.aliceandalec.com/contact

Thanks,

Hi Alice,

Thanks for getting back to us. Can you please try embedding your form using its iFrame code? Let me show you how:

• In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
• In the menu on the left side of the page, click on Embed.
• Now, select iFrame, and copy the code.

• If the provided iFrame code doesn't work, please increase the height value until the full form is shown, and also try changing the scrolling property to "yes".

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

Hi there,

I have tried both your suggestions and am still getting the same issue with the form being cut off on mobile view. I also not want the scrolling effect, I do not like the look of this. If I select scrolling yes, the form is cut off at first but then you can scroll down to the button. I do not like this, I just want the form to be full height please.

Can you advise what my next step would be?

Thanks,

Hi Alice,

Thanks for getting back to us. Can you please try to embed your form using the iFrame code I shared below?

  <iframe

      id="JotFormIFrame-231408395866870"

      title="Wrapped Blooms"

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

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

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

      frameborder="0"

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

      scrolling="no"

    >

    </iframe>

    <script type="text/javascript">

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

    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 these a try and let us know how it goes.

Hi there, can you please do the wedding enquiry form instead of the wrapped blooms form? The wrapped blooms seems to be working fine but the wedding enquiry form is not. Form here ~ https://form.jotform.com/231408395866870

Thanks,

Summer

My enquiry form is also doing the same thing as my wedding form. Cutting off the bottom button on mobile view. See form here ~ https://form.jotform.com/231007800848856.

Please help me fix this as its having a detrimental effect on my business.

Hi Summer,

Thanks for getting back to us. If you're having the same issue with your other form being cut off at the bottom on the mobile view when it is embedded, you can try to use the embed code below:

 <iframe

      id="JotFormIFrame-231007800848856"

      title="Enquiry Form"

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

      allowtransparency="true"

      allowfullscreen="true"

      allow="geolocation; microphone; camera"

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

      frameborder="0"

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

      scrolling="no"

    >

    </iframe>

    <script type="text/javascript">

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

    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>

Can you please go ahead and try it? If you run into the same issue again, we'll investigate it more to see if we can figure out what's going on.

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