What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    My form is not showing entirely on shopify

    Asked by illuminatedme on February 09, 2016 at 09:32 PM

    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

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

    form is not showing embed form embedded form iframe embed cut off
  • Profile Image
    JotForm Support

    Answered by Jan on February 10, 2016 at 07:12 AM

    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.

  • Profile Image
    JotForm Support

    Answered by david on February 10, 2016 at 11:48 AM

    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.

  • Profile Image

    Answered by illuminatedme on February 10, 2016 at 12:22 PM

    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

  • Profile Image
    JotForm Support

    Answered by david on February 10, 2016 at 01:29 PM

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

  • Profile Image

    Answered by illuminatedme on February 10, 2016 at 02:33 PM

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

            }

          };

  • Profile Image
    JotForm Support

    Answered by david on February 10, 2016 at 03:47 PM

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