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

    Form is cut-off after being embedded as an iframe in a website

    Asked by milladesignmaccom on April 30, 2016 at 09:22 AM

    HI I HAVE TWO ISSUES.

    The first: I have 12 unsolved css problems here but don't know what they are:

    }.form-textbox {}.form-line.jf-required {}#first_3 {}.form-payment-divider {}.form-payment-subtotal form-payment-label span {}.form-input.jf-required {}#cid_1 {}.form-payment-price span {}.form-payment-price {}.form-html {}.form-label.form-label-left {}@media only screenand (min-device-width : 414px)and (max-device-width : 736px){

     

    The second, the iFrame form does not work properly in all sizes (see 800 with at screenshot) it gets cut of. It seems to work fine in the mobile version.

     

    My iFrame code that I implement in Adobe Muse is:

     

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

     

    Is there a nice way to get the iFrame to scroll?

    Page URL:
    http://elisabethtalen.no/bestillingskjema-privat.html

    Screenshot
    iframe code iframe form style embed iframe responsive
  • Profile Image
    JotForm Support

    Answered by Mike_G on April 30, 2016 at 10:13 AM

    As for your first question, kindly delete the exact codes you have shown above (that's from line 62 to 65).

    Then, add the exact CSS codes below:

    }.form-textbox {}.form-line.jf-required {}#first_3 {}.form-payment-divider {}.form-payment-subtotal form-payment-label span {}.form-input.jf-required {}#cid_1 {}.form-payment-price span {}.form-payment-price {}.form-html {}.form-label.form-label-left {}

    @media only screen and (min-device-width : 414px)and (max-device-width : 736px){

    .form-all {

    width : 320px !important;

    }}

    Once  you've done that, all the 12 erros should be removed then please save your form.

    As for your second question, I would suggest you embed the iframe code to the website you're working on without its script part.

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

    Above, remove the part highlighted in blue and just embed the part highlighted in yellow.

    Then, please let us know what happens after. There is a possibility that the scripts on your website and the scripts on your form are having conflicts.

    We will wait for your response. Thank you.

  • Profile Image

    Answered by milladesignmaccom on April 30, 2016 at 11:01 AM

    hi, thanks, I've now changed but can't view it properly, is there any settings to make for the iFrame to automatically change for the height of the form, as this will be different at times, as my customer will place new products...

     

     

  • Profile Image

    Answered by milladesignmaccom on April 30, 2016 at 11:11 AM

    also I'm trying to get a border on my total payment and som space around, but when I go out of the designer mode (after saving) nothing changes on that.

     

    This is the code I use:

     

    .form-payment-total {

        line-height : 40px;

        margin : 0px;

        border : 5px solid #A78286;

        border-radius : 4px;

        padding : 50px;

        margin-top : 50px;

        margin-bottom : 20px;

    }

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 30, 2016 at 02:08 PM

    On the iframe code that you've embedded in your website, please change the height property of the style attribute of the iframe to 5553px.

     <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:5553px !important; border:none;" scrolling="no"> </iframe>

    Then, on any of the CSS file you used in your website, add the following CSS codes below.

    @media only screen and (min-width : 270px) and (max-width : 667px) {

       #JotFormIFrame{

          min-height: 12426.90px !important;

       }

    }

    @media only screen and (min-width : 668px) and (max-width : 970px) {

       #JotFormIFrame{

          min-height: 7350px !important;

       }

    }

    Or you can, also, add it after the CSS codes above inside <style></style> after the <iframe> code of your form.

    With regards to your other concern, I have moved it to a new thread which you can follow by clicking this link to avoid confusion with the answers being given.

     

    Let us know if you have any questions with any of the instructions given above.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 30, 2016 at 02:29 PM

    By the way, adding a border as such to the Total Payment text would require you to increase the "min-height" and the "height" that I have mentioned in the codes above. Please advise if you need further assistance. Thank you.

  • Profile Image

    Answered by milladesignmaccom on May 01, 2016 at 05:58 AM

    hmmm it does not seem to be right, but it's closer ... but what will happen when my customer adds ... say 10 more products to the form?

     

    This is my iFrame-code:

     

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:5553px !important; border:none;" scrolling="no"> </iframe>

     

     

    <style>@media only screen and (min-width : 270px) and (max-width : 667px) {

     

       #JotFormIFrame{

     

          min-height: 12626.90px !important;

     

       }

     

    }

     

    @media only screen and (min-width : 668px) and (max-width : 970px) {

     

       #JotFormIFrame{

     

          min-height: 7550px !important;

     

       }

     

    }</style>

  • Profile Image
    JotForm Support

    Answered by Jan on May 01, 2016 at 11:59 AM

    If you set a fixed height then the iframe height will not automatically adjust if you add more elements or products. You can actually enable the scrollbar function in the iframe. You just need to set the value of scrolling attribute to yes.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:5553px !important; border:none;" scrolling="yes"> </iframe>

    Hope that works for you. If not, let us know. Thank you.

  • Profile Image

    Answered by milladesignmaccom on May 01, 2016 at 12:28 PM

    could I set the iFrame to just fit the ongoing hight, so that it adjust to the number of products at any time?

  • Profile Image
    JotForm Support

    Answered by Kiran on May 01, 2016 at 02:00 PM

    It is possible to adjust the height of the iframe embedded form to adjust automatically with the additional script (code within <script></script> which was removed from the embed code) attached to iframe embed code. It looks like this script is conflicting with other scripts on your web page and hence you were asked to remove it to see if works.

    Hope this information helps! 

  • Profile Image

    Answered by milladesignmaccom on May 01, 2016 at 03:11 PM

    ok, that works fine now, thanks you, but

    is it possible to get the scrollbarjust to scroll vertical, and in a wider and different style type than the page scroll, so the user dont get confused?
  • Profile Image
    JotForm Support

    Answered by Kiran on May 01, 2016 at 04:32 PM

    I've moved your other question to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/830383

    Thank you!