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

    Internet Explorer: Text Area and Signature Area shrink making form undesirable

    Asked by JamieHoh on July 28, 2016 at 07:28 PM

    Hello,

    I created a form and plugged the script into my site and it displays fine, but I wanted to be able to put it in a collapse/expand section for aesthetic purposes.  I tried two different plugins and both are shrinking the text area and signature sections of the form.

    I tried changing the columns in the text area and the signature, but it did not help.

    Anyone have a solution?

    Thanks,

    Jamie

    Page URL:
    http://www.providencecatholic.org/admissions/shadow-days/#registration

    internet explorer embedded form
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 28, 2016 at 11:20 PM

    I checked the text area and signature sections on your webpage, then compared it with the form using the direct link. The form embedded on the page appears to be similar to the form when viewed on the direct link.

    Signature viewed on direct link.

    Signature viewed on your webpage.

    The same goes for the text area.

    Were you able to resolve the issue using a different collapse plugin? If the issue persists or in case I missed something, please let us know so we may better assist you.

    I noticed you are currently using the script embed method. If you like, you can try embedding the form to your page using the iFrame embed code instead. Here's how: Getting the form iFrame code.
    Regards.

  • Profile Image

    Answered by JamieHoh on July 29, 2016 at 02:06 PM

    It is not displaying correct in Internet Explorer 11, see below.  Also, the signature boxes are not even showing at all in Firefox.  The iframe did not work at all.

    Any help is appreciated.

    http://www.providencecatholic.org/admissions/shadow-days/

     

  • Profile Image
    JotForm Support

    Answered by Charlie on July 29, 2016 at 02:49 PM

    I'm checking your website and I see that you are still using the default <script> embed code. As mentioned by my colleague, please do try re-embedding the form using the iFrame embed code. 

    Another problem is that you are embedding TWO forms on the same website page, if you use the <script> embed code, the resources between the forms will most likely cause a conflict, that is also true if you are loading other Javascript libraries on the same page.

    Here's my suggestion. 

    1 We will re-embed the form using the iFrame embed code BUT is slightly edited. 

    2. Here's my sample iFrame embed code:

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:539px;

          border:none;"

          scrolling="no">

        </iframe>

        <script type="text/javascript">

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

            }

          };

          if (window.addEventListener) {

            window.addEventListener("message", handleIFrameMessage, false);

          } else if (window.attachEvent) {

            window.attachEvent("onmessage", handleIFrameMessage);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

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

            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;

            }

          }

          </script>

     

    The iFrame embed code has two parts as shown in the highlights above:

    1. Green highlight - This is the <iframe> element where the form's link is loaded and displayed.

    2. Yellow highlight - This is the <script> code responsible on making the form mobile responsive in websites. 

     

    You will need to remove the yellow highlighted code and re-embed using the code wrapped in the <iframe> element. Make sure that you change the height value of the iFrame because it will no longer adjust, meaning the height is fixed. The final code should be like this:

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:739px;

          border:none;"

          scrolling="no">

        </iframe>

     

    Let us know if that works. Please do make sure to leave the form using the iFrame embed code on your website so that we can check it further if it does not work. We'll wait for your response.

  • Profile Image

    Answered by JamieHoh on July 29, 2016 at 03:10 PM

    Thanks for your efforts, I really appreciate it, but as I mentioned above, I did try the iframe and it still did not work.  However, to show this I did put in the iframe in and on Internet Explorer 11 I still get the same result.  The shrunken boxes.

    Are you saying I can't have the two forms on the same page?

    Also, I am not sure how to determine the height as it is different on computer, tablets and phones...Is there a better way to do this?  Maybe an alternative signature and don't use a text box?

     

  • Profile Image
    JotForm Support

    Answered by Mike on July 29, 2016 at 04:01 PM

    Thanks for your efforts, I really appreciate it, but as I mentioned above, I did try the iframe and it still did not work.  However, to show this I did put in the iframe in and on Internet Explorer 11 I still get the same result.  The shrunken boxes.

    Unfortunately, it looks like that the issue is related to the collapse implementation method on your web page. It has some issues with dynamically loaded embedded content in Internet Explorer. This is not likely that we can fix this anytime soon from our side.

    Are you saying I can't have the two forms on the same page?

    Usually you can have multiple forms embedded on the same page. However, if you have iFrame embedded forms with their auto-height scripts, the height change of one form might affect other form(s) on the same page.

    Also, I am not sure how to determine the height as it is different on computer, tablets and phones...Is there a better way to do this?  Maybe an alternative signature and don't use a text box?

    Yes, I would like to suggest trying a simple E-Signature field and a Text Area in a plain text mode.