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

    Form is not expanding based on conditions.

    Asked by johneff on August 05, 2015 at 10:39 AM

    This form was working and now it seems that the form collapse is not working as before. When a user selects a class or exam, it should open to allow more selections and eventually take them to PayPal.

    the form is located here:

    http://njfoodsafe.com/registration.html

     

     [EDIT]

    I added scrolling to the form and this allows the additional selections to be viewed with the scroll bar. However, I am concerned

    that this was working perfectly without the scrolling before and now it does. Obviously something has changed and this is troublesome.

    Page URL:
    http://njfoodsafe.com/registration.html

    open iFrame embed
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 05, 2015 at 03:05 PM

    I have tested your form and I noticed that you added scroll bar and I was able to scroll it down to the bottom of the form.

    If you do not want to have scrolling, then you can try to increase height of the form inside of iframe code. 

    Let us know if you need further assistance. 

  • Profile Image

    Answered by johneff on August 05, 2015 at 03:34 PM

    Thanks for the reply!

    Upon looking at the iFrame code, it shows that the height of the form is set already at 2975px.

    Since the iFrame/form is embedded on my page via a <DIV> statement, I tried using both "auto" and 2975px as the height with the same result of not expanding the collapse sections.

    Here is what the iFrame reads:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50524654572961" frameborder="0" style="width:100%; height: 2795px; border:none;" scrolling="yes"></iframe>

    As I previously said, this form was working without problems and then it stopped so something must have changed and I cannot see where or what made the change.

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 05, 2015 at 05:06 PM

    I have cloned your form and tested my cloned form locally and it seem that script you have embedded with iFrame is causing this problem. 

    Can you please try to re-embed your form and get only what it's between the <iFrame> tags and discard the code between the <script> tags?

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by johneff on August 05, 2015 at 05:25 PM

    I'm not sure that I understand what you want me to remove.

    Is it this line?

     

    <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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

  • Profile Image
    JotForm Support

    Answered by Boris on August 05, 2015 at 07:59 PM

    Yes, that is correct. So from the following code on your website, you would remove the part marked with orange, while keeping the part marked in green.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50524654572961" frameborder="0" style="width:100%; height: 2795px; border:none;" scrolling="yes"></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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>   

    This script is there to try and resize the iFrame that contains your form, so that the iFrame is only as high as it needs to be. However, sometimes this script doesn't calculate the height perfectly, which is when your form may get cut off.

    In your case, I can see that the script is incorrectly calculating the form height as being only 889px, and is using this height instead of the height: 2795px; part from the iFrame embed code. By removing the script, your iFrame will be as high as you set its height in the iFrame embed code, as marked in bold red letters above.

    Please let us know how it goes after removing this script.

  • Profile Image

    Answered by johneff on August 05, 2015 at 09:46 PM

    Yes, I can see that the form is now expanded. However, the size is way too big and is at least twice

    the size that is needed.

    As a test, I tried changing the height in the iFrame to a lower number and 1400px seems to be fine.

     

    I guess this fix will do for now, but it was very nice before when the form expanded when the radio and check boxes were selected.

     

    Any idea what may have happened to cause this recent problem?

  • Profile Image
    JotForm Support

    Answered by Boris on August 05, 2015 at 11:11 PM

    This might have been caused by one of the recent changes to our internal scripts inside the form itself. Our developers are constantly working on improving our internal scripts, and sometimes this leads to some changes in how the form height is calculated.

    The way that the iFrame resizing works is that there are internal scripts (scripts inside the form, inside the iFrame) which calculate how tall the form is supposed to be, and send this information to the external script on your page.

    Then, the script on your page (which you have removed to fix this) resizes the iFrame based on the information it receives. Sometimes, external script interprets this data incorrectly due to accidental conflicts with other scripts, and sometimes our internal scripts send wrong calculation.

    Whatever the case, by not using any of the scripts, your form will always listen to the height: property that you set yourself on your iframe embed codes. This is where you have used 1400px.

    I hope this helps. Please let us know if we can assist you further, and we will be happy to do so.