Thank you message being cut down

Hi this is similar to another question I have going with you at the moment but it is a different form. My thank you message is being cut off for some reason and you can only see the first part of it.

The form id is http://www.jotform.com//?formID=50518642701955  and it is embeded as an iframe on this web page http://www.2ezyskipbinsbrisbane.com.au/contact-us/

I have attached two screen grabs the first is on desktop view the second is on mobile view.

Thanks Mark

Here is the second grab

Hi there,

I can see that there are 2 width and height elements inside the iFrame. Please remove the the other one. Also, remove the script below the iFrame code. 

Use this iFrame code instead:

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

Hope this works. Let us know if the issue is still the same.

Thank you.

Hello,

If that's the case then please use the iFrame code together with script code just like what it is originally.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50518642701955" frameborder="0" style="width:100%; height:487px; 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>

And then add this custom CSS code inside your webpage and not inside JotForm. If you are using wordpress there is a way for you to add this in style.css or in the header.

#JotFormIFrame { height: 487px !important;}

This code will force the JotForm iFrame to stay on 487px height.

Hope this helps. Let us know if it is still the same.

Thank you.

Hi Mark,

Using the iframe embed code of the form in your website will allow multiple forms embedded on the same web page.

user guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

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

Thanks.

Hi Jonathan,

Yes I have got to separate forms on my web page but my question was won't that css code Jan gave me affect both forms even though they are completely different.

thanks Mark

@Mark

If you place that CSS code in your WP header or footer, it will affect both forms since all Jotform iframes has default iframe id JotFormIFrame. 

If you only want it for that particular form then wrap that css with style tag and place it just above your iframe embed code.

Example:

<style>#JotFormIFrame { height: 487px !important;}</style>

Try it and let us know how it goes. Thanks!

Hello there,

I checked your webpage and I did not see the script after the iFrame code. At first I've told you to remove it but on my 2nd reply, I've told you to put it back. Please try using this code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50518642701955" frameborder="0" style="width:100%; height:487px; 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>

Hope this works. Thank you.

Hi Mark,

In that case, I would suggest removing the empty spaces in your thank you message page as well as the inline CSS margin:

Try it and let us know if that makes a difference.

Thanks

Hi Welvin,

Ok did that and still have to scroll alot on mobile to see message.

Thanks Mark

Hello,

On the iFrame code, please change the value of onload attribute. Change it from 0,0 to 0,1072.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,1072)"......

Hope this works. Thanks!

Hi Jan,

Ok did that when web page opens it scrolls hard to the bottom so I can't see the beginning of the form to start filling it in.

Thanks Mark

Okay, if that's the case then please change the 1072 back to 0 so it won't jump. 

Since, everything is working except for the page to jump to "thank you" message after hitting submit in the mobile then I would just recommend you creating a custom thank you page. So that once you hit submit, it will go to that custom thank you page. Although you need to create a separate page for that in your website. 

Hope this helps. Thank you.