Form is not expanding based on conditions.

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.

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. 

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

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. 

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>

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

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?

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.