Embedded form is cut off.

Experiencing issues with a form not loading entirely. Using IFRAME embed code, removed the height in the CSS. I've tried with with height included in the CSS. I've tried it with 2500px in the height, still cuts off. I've tried in safari, chrome, chrome in iPhone. Same result.

Please advise

https://lakehamiltonmap.com/

Hi Brent,

Thanks for reaching out to Jotform Support. I opened your site and tested it to see if I could replicate the issue, but everything was working properly. The form wasn't cut off. Check out the screencast below to see my results:

Can you try it again and see how it goes? If you run into the same issue again, can you take a screenshot of what’s happening and send it to us? This guide will show you how to do that.

Give it a try and let us know if you have any other questions.

I closed the window, started a new window, loaded it up again and hit refresh. Same result. Every once in awhile it loads correctly. Not very often. Cardd has already done troubleshooting on their end without luck and encouraged me to contact you.

Hi Brent,

Thanks for getting back to us. I checked and open your site again to see if I will now replicate the issue, and I ran into the same issue. After investigating it a bit, I found that the height is set to 2296px. 

Can you try adjusting it back to 2500px? If it can help, I'll provide the Iframe code below that you can paste in your site.

  <iframe

id="JotFormIFrame-240953787069168"

title="LH-Map"

onload="window.parent.scrollTo(0,0)"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/240953787069168"

frameborder="0"

style="min-width:100%;max-width:100%;height:2500px;border:none;"

scrolling="no"

>

</iframe>

<script src='https://form.jotform.com/s/umd/latest/for-form-embed-handler.js'></script>

<script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-240953787069168'", "https://form.jotform.com/")</script>

Give it a try and let us know if you have any other questions.

Done.
Same result.
...

Hi Brent,

Thanks for getting back to us. I tested your form to see if I could replicate the issue, and I ran into the same problem:

To fix this issue please embed the form using the below code:

<iframe

  id="JotFormIFrame-240953787069168"

  title="LH-Map"

  onload="window.parent.scrollTo(0,0)"

  allowtransparency="true"

  allow="geolocation; microphone; camera; fullscreen"

  src="https://form.jotform.com/240953787069168"

  frameborder="0"

  style="min-width:100%;max-width:100%;height:539px;border:none;"

  scrolling="no"

>

</iframe>

<script src='https://form.jotform.com/s/umd/latest/for-form-embed-handler.js'></script>

<script>

  window.jotformEmbedHandler("iframe[id='JotFormIFrame-240953787069168'", "https://form.jotform.com/");

  window.addEventListener('message', function(e) {

    var args = e.data.split(':');

    var iframe = document.getElementById('JotFormIFrame-240953787069168');

    if (args.length > 1 && args[0] == "setHeight") {

      iframe.style.height = 150 + +args[1] + "px";

    }

  }, false);

</script>

Here's what the result will look like:

Please give it a try and let us know how it goes. 

That appears to have worked!
What had to be done differently?
...

Hi Brent,

Thanks for getting back to us. Glad to know the code my colleague shared works. As for your question, It's because of the code below:

window.addEventListener('message', function(e) {



    var args = e.data.split(':');



    var iframe = document.getElementById('JotFormIFrame-240953787069168');



    if (args.length > 1 && args[0] == "setHeight") {



      iframe.style.height = 150 + +args[1] + "px";



}

This was added inside the script, which helps ensure that the an additional size in height is automatically added on top of what was set, preventing it from getting cut-off.

Let us know if you have any other questions.