My form is not showing entirely on shopify

I've got my form set up the way I want, but when I put the embed code in my shopify page, only the top part of the page shows up. In an earlier version I was working on today it was a larger portion, but now it's only a tiny portion of the form.

http://www.illuminatedme.com/pages/wholesale

Thanks, Peter

I was able to replicate your issue. The form only shows the top portion and cut off after that.

The solution is to re-embed the form using the Iframe method. In this way, script conflicts between the form and the webpage will be prevented.

Let us know if you're still having issues with it. Thank you.

My apologies, it looks like your new response did not come through completely.  If you are still having trouble with a portion of your form not showing, let us know and we will be happy to assist you further.

Thanks for the heads up. I tried to attach a screen grab and it messed up the support form too... 

The iFrame makes my form look great, so thanks for that. However, it doesn't stay that way. If you go to the page and type something in the first cell, then hit tab to go to the second cell and suddenly the height changes to be much too small for the form (and there's no scroll bar so you can only tab between fields); it's pretty much unusable at that point. How can I fix that?

Thanks,

Peter

In the beginning of your iFrame code, there is a height attribute.  It is currently not set to a value, so when the form tries to resize, it goes a bit crazy. 

<iframe id="JotFormIFrame" allowtransparency="true" src="https://form.jotform.com/60396668496171" frameborder="0" style="width: 100%; height: undefinedpx; border: none;" scrolling="no" onDISABLEDload="window.parent.scrollTo(0,0)">

Change the highlighted portion to:

<iframe id="JotFormIFrame" allowtransparency="true" src="https://form.jotform.com/60396668496171" frameborder="0" style="width: 100%; height: 1000px; border: none;" scrolling="no" onDISABLEDload="window.parent.scrollTo(0,0)">

Adjust the value until the height of the frame is to your liking.  It should give the form a defined height and prevent the issue you are experiencing.

Thank you, but that did not fix it. I tried 500px, I tried 1000px, and I tried 100%. 

I don't know this code, but it appears that this height attribute is being overridden just below that. Where is Args[1] coming from? That looks like it's setting the new height as soon as I hit tab....

Thanks,

Peter

window.handleIFrameMessage = function(e) {

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

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

        }

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

        }

      };

You can try without the autoheight script to see if that works:

<iframe id="JotFormIFrame" allowtransparency="true" src="https://form.jotform.com/60396668496171" frameborder="0" style="width: 100%; height: 100%; border: none;" scrolling="no" onDISABLEDload="window.parent.scrollTo(0,0)">
    </iframe>

The script looks to be changing the height from 1050 to 120 when changing fields in Chrome.  It does not happen in Firefox.