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.
Form height problem with container DIV or iFrameAsked by EpicStudio on November 06, 2015 at 02:23 AM
I have a pretty nice working form, but when I load my page on desktop width and change it to responsive width, the form adjusts and its cropped by the container DIV or iFrame. See image 1
When I load the page on a narrow width like a mobile phone and I then make the browser wide, the containing DIV or iFrame leaves a space at the bottom of the form.
Is there a way to avoid so? Maybe a flexible DIV/iFrame height?
problem height div form height problem
I have checked your website, and I do see and understand what you are asking about.
We have a script that resizes your form automatically, so that your form can always be displayed in its full height without the need for any scrollbars. The form loads fine when you first load or refresh your page, because that is when the scripts are recalculating the form's height and setting the iFrame to the desired height.
Due to both technical limitations and performance reasons, the form re-calculates its height only in certain instances - such as when the form is first loaded, when conditions to show/hide fields on the form (inside the iFrame) are triggered, when you have switched to another page of a multipage form (inside the iFrame), and similar.
The script can't resize the form based on resizing of your browser window, because the height calculation script is inside the iFrame, and the script that is afterwards setting the iFrame's height is outside the iFrame. Communication goes from inside the iFrame to outside, where the form from inside is saying "hey, this action I have performed has just changed my height; can you please resize my iFrame for me?"
The good part is that the iFrame will always be in its correct height when the form is loaded, which means that all your users will see the form correctly when opening your website. On mobile devices, iFrame will load with height for that mobile device, and on a desktop, it will load with the proper height for that desktop. Your users shouldn't be experiencing any issues with the form not being displayed.
I hope this helps. Please let us know if you need further assistance, and we'll do our best to help.
Thanks Boris, pretty clear. I had somehow in mind that users might no have a problem to see the form, but I was concerned jsut in case they experimented visualization issues.
Very helpful and explanatory, thanks for taking the time explaining it..!
You are most welcome, I'm glad that it was helpful.
As always, if you run into any issues with the form sizing, or if you need any other assistance with your forms, please do not hesitate to let us know about it in a new thread, and we'll be happy to look for solutions. :)
Thanks again! Very appreciated.