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 method: Please explain this code

    Asked by mgcaledonian13 on May 23, 2015 at 03:39 AM

    Please can you explain this bit of <iframe> code

    <iframe id="JotFormIFrame" style="width: 850px; height: 450px; border: none;" src="//form.jotformpro.com/form/51402615787962" width="300" height="150" frameborder="0" scrolling="no"></iframe>

    What does the Text in blue do, clearly the Text in red changes the size of the iframe.

    Regards Willy Scott 

    style size height iframe iframe embed code !important source editor
  • Profile Image
    JotForm Support

    Answered by Chriistian on May 23, 2015 at 05:36 AM

    Hi mgcaledonian13,

     

    Thanks for contacting us.

     

    As per my research, the text in blue sets the height and width of the iFrame. Basically, it does the same thing as the text in red does. However, as per my testing, the text in red overriides the effect of the text in blue.

     

    Anyhow, I wonder where you found the iframe code in question because I checked your form and the iFrame code is a little bit different from the one above.

    -------------------------------------------------------------------

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

    -------------------------------------------------------------------

     

    Regards.

  • Profile Image

    Answered by mgcaledonian13 on May 23, 2015 at 05:31 PM

     

    Thanks for your reply

    Yes I found out that if you put !important; in you can reduce the height to your own size, note the ! explanation mark, and you can make it too small as well thus cutting off the bottom of the form off, not what you would want to do though.

    <iframe id="JotFormIFrame" style="width: 850px; height: 1600px !important; border: none;" src="//form.jotformpro.com/form/51402615787962" width="300" height="150" frameborder="0" scrolling="no"></iframe>

    This now seem to affect the height (1600px) of the Thank You Page, is there anyway to set the height of the Thank You Page separately at all, I can't see anyway of accessing the code for it.

    I have not checked this out ie removing !important; and setting the page to the default height which I suspect reduces the Thank You Page height.

    Either way I now know how it works. well I think I do !!

    Regards Willy Scott 

     

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 24, 2015 at 02:18 AM

    Hi mgcaledonian13,

     

    Glad to hear that you were able to fix the height of your form by yourself.

     

    Regarding the height of your Thank You page, may I ask for the URL of the page where you embedded your form so we can check?

     

    If you want to know where to access the HTML code of your Thank You page, please see steps below.

     

     

    But I doubt that setting the height there will fix the issue so we need to check your web page.

     

    We will wait for your response.

     

    Regards.

  • Profile Image

    Answered by mgcaledonian13 on May 24, 2015 at 02:48 AM

    Again thanks for your prompt reply.

    I tried that, and sadly my Source Editor is blank. Would it be because I am using Chrome and I see that you were using Firefox, I would have thought it should not make any difference - comments !! 

    I Have checked the Thank You Page again and it seems to be OK now - strange!

    I have another issue, but will start a new thread for it.