What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Thank you message being cut down

    Asked by 2ezy on March 31, 2015 at 06: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

     

    Page URL:
    http://www.2ezyskipbinsbrisbane.com.au/contact-us/

    Screenshot
    Thank You message thank you cut down
  • Profile Image

    Answered by 2ezy on March 31, 2015 at 06:37 AM

    Here is the second grab

  • Profile Image
    JotForm Support

    Answered by Jan 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" onload="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.

     

  • Profile Image
    JotForm Support

    Answered by Jan on April 01, 2015 at 09: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" onload="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.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 01, 2015 at 04: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.

  • Profile Image

    Answered by Mark  on April 01, 2015 at 05: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

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 01, 2015 at 06: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!

  • Profile Image
    JotForm Support

    Answered by Jan on April 02, 2015 at 09: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" onload="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.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 03, 2015 at 05: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

  • Profile Image

    Answered by 2ezy on April 03, 2015 at 08:55 AM

    Hi Welvin,

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

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Jan on April 03, 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" onload="window.parent.scrollTo(0,1072)"......

    Hope this works. Thanks!

  • Profile Image

    Answered by 2ezy on April 03, 2015 at 07: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

  • Profile Image
    JotForm Support

    Answered by Jan on April 03, 2015 at 08: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.