i-frame hiding button of form

Hi.
I'm trying to use i-frame embed option to put a form on my web page.  I've had success with a similar form but with this one it is cutting out the bottom of the form for some reason and I can't see the button to move to the next page when the make certain selections in the form fields.

The form is at: http://cheekyface.com.au/forms/booking/  (i've included the link to the jotform version below)

Could you please have a look and see if there is anything obvious that I've missed?

Cheers,
Danny

I just removed a bunch of hidden fields from the form and it seems to have fixed the issue.  
You can see the hidden fields if you edit this version (copy): http://form.jotformpro.com/jsform/52273138275961

...They are right at the top and set up for me to ake the form unavailable when I was doing lengthy edits.  I won't need this if I embed the form in my web page but still might be worth checking why this was causing the form to hide the bottom.

I can see that you are using the iFrame embed method - which is great for making sure that there are no conflicts between your page and the form.

Our iFrame embed codes also come with a little script underneath them, which tries to dynamically change the height of the form's iFrame according to how the length of your form is changing. You have probably noticed that the form is only taking as much space as it needs to on each page.

As this resizing script is outside of the form itself (it is on your page, outside of the iframe), it can't always correctly calculate the height of the form inside - which is when the content inside can appear cut off. For this reason, I would advise you to try removing the script from your embed code (marked with orange background), and try setting a desired height directly on the iFrame itself (marked with bold red):

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

Your form would no longer dynamically change its height, but you will control the height directly in the code.

I hope this helps. Please let us know if you need further assistance.

I have done this but the only problem with it is that when the user moves to the next page (from a long one to a shorter one), unless they scroll back to the top they won't see the form and may think there's a problem.  Is there a chance the script could be checked to see why it's not dynamically allowing the full length of the form to show? 

It seems that the hidden fields altering the length on show is where the problem may be?

Hi,

I've checked your website and replicated the issue. Does it happen when you still have the script embedded in your website?

We will wait for your response.

Regards.

Hi Christian, yes but I removed the script as instructed by boris and now it works ok and I see all the way to the bottom but when I click to the next page the page doesn't scroll back up to the top of the form.
If you're asking if the page scrolls back up, with the script installed, then yes it does but it still cuts of the length of the form.

Here is an example of a similar form with the script and each page starts back at the top after clicking through.  On the third page (maybe 4th) you will see the bottom gets cut off as it's a longer section of fields than the previous.

go to: http://cheekyface.com.au/forms/quote/index2.html

Hi,

Can you try to embed the form using the iFrame Code below and see if it will work? I have added a custom script.

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

Do get back to us if the issue still persists.

Regards.

Have a look for yourself:

http://cheekyface.com.au/forms/quote/index2.html

If you click on the more info button on the first page this shows a form text area that is longer than the frame allows so it cuts off again.

By the way, I changed the form ID in that code so it was for the correct form.  Not sure if that affects how it works?

Hi,

I just want to confirm that the problem you are reporting on after you have fixed the height of your iFrame on this issue is that the form does not go back up when you go to the Next Page on this form - http://cheekyface.com.au/forms/booking/? Please correct me if this is not the issue you are reporting. I have suggested the iframe code above to fix the issue on form not going back up when you go to the next page.

I found some problem on the script that I have provided to you earlier. Can you remove the script and use the script below instead?

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

If you are going to implement this on your form  on this page - http://cheekyface.com.au/forms/quote/index2.html, please also adjust the height set on the iFrame like you did on the other form. For example:

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

Do get back to us if the problem still persists.

Regards.

Hi Chriistian.
Yes the scroll-to-top on next page is the secondary issue but it looks like it's working now with your new script, thank you!!

I have adjusted the height of the iframe and now it works.  Nor sure why it didn't before, maybe I didn't ake it tall enough.  I have to have set to at least 2000px high to make sure that none of the pages lose the bottom.

Thanks for your help.

Cheers,
Danny

If I wanted to use the same script with a different form would that be OK?  I'm guessing that I'd just replace the the script by pasting over what the script in any form's iframe embed code?
Alternatively I would assume it's OK to just change the form ID in the iframe code and use the whole lot in another web page?

Hello cheekyface,

Yes that is correct. The script shared by my colleague will work with any JotForm embed code but the iFrame ID if the embed code should be "JotFormIFrame" (all embed code of JotForm will have the same ID).

Alternatively I would assume it's OK to just change the form ID in the iframe code and use the whole lot in another web page?

Yes you can replace the form ID and that should also work. I would suggest you to grab you form's direct URL and replace the complete URL of the iFrame embed code. Please be noted that when you create a form, a domain is automatically assigned to the form based on your location. Please check the screenshot below on how to grab your form's direct URL:  

Thank you!