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 page is cutting off when embedding form using iFrame method.

    Asked by slleykersx on April 19, 2016 at 05:26 PM

    Good afternoon , I have a problem in my form when I will include the iframe it works normally , but once in the Thank you screen it cuts half of the screen thus obscuring some items. I need help....



    This is a re-post of a comment on Getting the form iFrame code

    items thank thank you page
  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 19, 2016 at 07:20 PM

    When you embed the form using the iFrame method, there is a Javascript code that calculates the height of the form depending on the elements in order to display it properly; however, seems like the height set on the thank you page is not enough and there are two possible ways to fix this, the first option is removing the Javascript code and setting the height manually and fixed, if you decide to use this method then you only need to embed this iFrame code: 

    <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

          src="https://jotform.com/60944402531651"

          frameborder="0"

          style="width:100%;

          height:2200px;

          border:none;"

          scrolling="no">

    </iframe>

     

    But it will set the height the same even on the thank you page, showing a lot of space right after the thank you message, this is why I would like tot show you the second way to achieve it, you will not to remove the Javascript code since it calculates the height for each section of your form, but it needs to be modified in order to display your thank you message completely, I print the current height that it is setting to your thank you message and added a custom code to set the proper value, here is the code that I have added to the Javascript given with the iFrame code: 

    if(args[1] == 437){

              customHeight = 600; 

              }else{

              customHeight = args[1];

              }

    This will work only with this form, and if you change the thank you message probably it will not work anymore, so if you need changes you will need  to update this code as well, copy this iFrame code and embed it in your website: 

     <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

          src="https://jotform.com/60944402531651"

          frameborder="0"

          style="width:100%;

          height:2052px;

          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":

              if(args[1] == 437){

              customHeight = 600; 

              }else{

              customHeight = args[1];

              }

                iframe.style.height = customHeight + "px";

                break;

              case "collapseErrorPage":

                if (iframe.clientHeight > window.innerHeight) {

                  iframe.style.height = window.innerHeight + "px";

                }

                break;

              case "reloadPage":

                window.location.reload();

                break;

            }

            var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

            if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

              var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

              iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

            }

          };

          if (window.addEventListener) {

            window.addEventListener("message", handleIFrameMessage, false);

          } else if (window.attachEvent) {

            window.attachEvent("onmessage", handleIFrameMessage);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            var ifr = document.getElementById("JotFormIFrame");

            var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

            if(ifr && get.length > 0) {

              var src = ifr.src;

              src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;

              ifr.src = src;

            }

          }

          </script>

    The highlighted code is the custom code that I have added, please try it and let us know if it works, if it does not work, please provide us the link to your website where the form is embedded, we  will be glad  to take a look. 

  • Profile Image

    Answered by slleykersx on April 19, 2016 at 07:52 PM

    Unfortunately the code of Iframe Javascript did not work .. It continues in the same way .. This below an image with the situation . But the only Iframe code it works, but after moving to the page break the same does not return to the top .

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 19, 2016 at 11:22 PM

    Can you please try injecting the custom css code below to see if that will display the full thank you page?

    .thankyou {

        height: 600px!important;

    }

    #stage {

        height: 550px!important;

    }

    To inject css, please follow this guide: How to Inject Custom CSS Codes.

    It would also help us to better assist you if you share with us the URL of your page where the form is embedded.

    If the issue persists, please let us know.
    Regards.

  • Profile Image

    Answered by slleykersx on April 20, 2016 at 07:20 AM

    Now it works .. The last problem is depending on the resolution of the monitor used creates scrollbar. Is there any way to automatically resizes the independent monitor?

    In position height it does not automatically expands .. In position width expands all automatic .

     

    Thanks in advance.

     

  • Profile Image
    JotForm Support

    Answered by jonathan on April 20, 2016 at 08:36 AM

    Since the height dimension was now specifically specified, it will not dynamically resize anymore. The height simply become static now.

    But can you also share to us the URL of your website wehere the form was used. Perhaps we can find a workaround that can address the height requirement.

    We will wait for your update.

    Thanks.

     

     

     

  • Profile Image

    Answered by slleykersx on April 20, 2016 at 10:01 AM

    Below the web page.

    The THANK page is the only one with this problem.

     

    stipesquisa.esy.es

     

     

    I appreciate the help .

     

     

     

  • Profile Image

    Answered by Ben on April 20, 2016 at 11:30 AM

    I took a look at the page and I see that you are actually adding iframe directly to the page without any additional code.

    What I personally recommend is to change that by adding this code before iframe:

    <!DOCTYPE html>
    <head>
    <title>THE TITLE TO SHOW IN TAB</title>
    </head>
    <body>

    Then after the iframe, to add:

    </body>
    </html>

    Now, other than that, the iframe seems OK, there are no scrollbars shown on the standard screensizes for me, but please do note that the browser can be resized to any dimension and it would not be possible to make it work for all.

    Once you add the code mentioned above browsers will better understand the page and do a better job at rendering the same so you are likely to see some difference, but if the height goes over the amount of the window space, the scrollbars will be shown automatically to allow people to go down to the end of the form.

    Hope this makes sense.

    I do only wish to check with you if the scrollbar might be on iframe - not on the entire page?

  • Profile Image

    Answered by slleykersx on April 20, 2016 at 12:07 PM

    I tried with the iframe bar and did not work correctly .. in another test .

     

    I added the commands that you sent me.

     

    The problem is the screen Thank you ...

     

    EDIT: 

     

    Unfortunately I reached the limit of the form .

    I made several tests and for this reason over.

    OBS: I put another form which is actually the same for testing.

  • Profile Image

    Answered by Ben on April 20, 2016 at 01:30 PM

    I took a look at your page, but I can not see the thank you page being cut off on any of the usual resolutions.

    Could you please grab a screenshot of the issue so that we can see what you are seeing so that we can assist you with the same.

    Now I just want to check if by some chance you are not talking about the thank you page but rather about the screen which shows white color under the iframe, then you could fix that by adding the following code to your page:

    <style type="text/css">
    html, body {
        background: rgb(44, 62, 80) url("https://shots.jotform.com/elton/pattern/pattern-eo2z.png") repeat fixed center top;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }</style>

    The best place to add it is in the <head> element that you had added few moments ago, after the title so it looks like:

    <title>Pesquisa de Satisfacao</title>
    <style type="text/css">
    html, body {
        background: rgb(44, 62, 80) url("https://shots.jotform.com/elton/pattern/pattern-eo2z.png") repeat fixed center top;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }</style>
    </head>

    After you do the black background of your form will be set for the page so on thank you page it will seem as one entire (same color) page shows the thank you page.

  • Profile Image

    Answered by slleykersxx on April 20, 2016 at 02:30 PM

    Now it very well .. Thanks in advance already .

     

    I have a question : Are you able to put this white window shown below centered vertically ? 

    center in the center of the screen.

    Another Doubt : Include automatic redirection after a few seconds , on the same screen below the image ?

     

    Thank you so much .

     

  • Profile Image

    Answered by Ben on April 20, 2016 at 03:49 PM

    Since these would be two different things, both different from the original post, I have moved both of them to new threads, so that we can assist you properly with each.

    The one about positioning the same in the middle of your page is here: https://www.jotform.com/answers/823107

    About the redirection, a new thread can be found here: https://www.jotform.com/answers/823109

    In regards to the original issue, I am glad that you like it :)

    We will be following up on both threads shortly.

  • Profile Image

    Answered by slleykersxx on April 20, 2016 at 03:59 PM

    I appreciate the attention.