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

    Iframe resizing does not seem to work properly causing submit to be cut off and thank you page to be missing

    Asked by adriandinsdale on April 07, 2015 at 07:33 AM

    Hello,

    When an entrant enters a coupon code, there is a message that the code has been successfully accepted. The problem I have is that this resizes the form and pushes down the 'Pay and submit' button at the bottom of the form so that part of it disappears.

    Another point: once an entrant successfully completes the whole form and submits it, the 'Thank You' message is not displaying in its entirety.

    Can you please advise?

    Thank you,

    Adrian.

    Page URL:
    www.visualidentityawards.com/enter

    resizing message thank you page iframe size
  • Profile Image

    Answered by mikegultia on April 07, 2015 at 09:31 AM

    Hi, adriandinsdale,

    Please allow me to help you.

    If I'm not mistaken, please correct me if I'm wrong, your issue is this:

    http://postimg.org/image/sv9d45o9d/

    In order for you to resolve this issue, one thing that you can do is remove the <script> part of your embedded iframe code. 

    or you can also re-embed your iframe code and instead of copying the whole code to your code, you can remove the <script> part first.

    Once you're done with any of this, all you need to do next is adjust the height of the style attribute of your <iframe> to your preference and that should solve the issue.

     

    For future references, you might also want check this documentation, How to Get the iFrame Code.

    I hope I was able to help you.

     

     

    Best, 

     

    Mike

  • Profile Image

    Answered by Ben on April 07, 2015 at 11:02 AM

    Looking at your website Adrian, I am not able to recreate the issue with the Thank you message. However there is a way to make sure that it is shown every time, and would be by adding the min-height property to the right size, like here:

    <iframe frameborder="0" scrolling="no" style="width: 100%; border: medium none; height: 1450px; min-height: 180px;" src="https://secure.jotformpro.com/form/50485800172956" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></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 &gt; 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>

    This is what I saw:

    As Mike mentioned about the issue with the form being cut, the solution would be to set its height manually and remove the script part. This would be the code in that case:

    <iframe frameborder="0" scrolling="no" style="width: 100%; border: medium none; height: 1450px;" src="https://secure.jotformpro.com/form/50485800172956" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>

    Do let us know if you have any further questions or issues and we would be happy to assist.