-
2ezyAsked on March 31, 2015 at 6:36 AM
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
-
2ezyReplied on March 31, 2015 at 6:37 AM
Here is the second grab
-
JanReplied on March 31, 2015 at 10:39 AM
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.
-
JanReplied on April 1, 2015 at 9:02 AM
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.
-
jonathanReplied on April 1, 2015 at 4:45 PM
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.
-
MarkReplied on April 1, 2015 at 5:47 PM
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
-
Elton Support Team LeadReplied on April 1, 2015 at 6:36 PM
@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!
-
JanReplied on April 2, 2015 at 9:32 AM
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.
-
Welvin Support Team LeadReplied on April 3, 2015 at 5:12 AM
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
-
2ezyReplied on April 3, 2015 at 8:55 AM
Hi Welvin,
Ok did that and still have to scroll alot on mobile to see message.
Thanks Mark
-
JanReplied on April 3, 2015 at 10:13 AM
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!
-
2ezyReplied on April 3, 2015 at 7:31 PM
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
-
JanReplied on April 3, 2015 at 8:05 PM
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.