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

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

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.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

JamieHoh

Asked 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.

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.

JamieHoh

Answered 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/

JotForm Support

Charlie

Answered 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.

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.

JamieHoh

Answered 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?

JotForm Support

Mike

Answered 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.