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

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

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.

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/

 

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"

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

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

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?

 

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.