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

    Forms Partially Displayed or Not At All in Chrome

    Asked by GothamSpirit on March 25, 2014 at 05:17 AM

    I have 3 embeded forms.  Two forms don't work properly.  One form is using JotForm's generated script and the other uses JotForm's generated iframe code.  Problem seems to be only in Chrome.

    Help!! Much of my business is generation is through these forms!!  

    *1) http://engle-heart.com/weddings_availability.html using code: <script type="text/javascript" src="https://secure.jotformpro.com/jsform/23344011566951"></script>

    *2) http://engle-heart.com/weddings_consultation.html using code: <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/23344735366962" frameborder="0" style="width:100%; height:2726px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    *3) http://engle-heart.com/contact.html using code: <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/23057455497967" frameborder="0" style="width:100%; height:969px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Form 1) Displays only part of of the form and cuts off the 4th row

    From 2) Doesn't display at all

    Form 3) No problem


    Screenshot
    all JotForm iframe code problem style
  • Profile Image
    JotForm Support

    Answered by jonathan on March 25, 2014 at 08:36 AM

    Hi,

    1. On your website http://engle-heart.com/weddings_availability.html re-embed the form using iframe code 

    I could see that the website page where the form was used contains other jquery scripts as well. This is the reason why scripts are conflicting between those on the form and the website. Using iframe code embed should prevent the conflict.

    2. I was also not able to see the embedded form here http://engle-heart.com/weddings_consultation.html 

    BUT I think it is because the div container where the form was suppose to be contained does not have an opening div tag. I noticed this when I checked the web page source code.

    See the image below for details on what I meant

     

     

    Please check the html tag where you have embed the form and correct if necessary.

    Hope this help. Inform us if issues persist.

    Thanks.

  • Profile Image

    Answered by GothamSpirit on March 25, 2014 at 01:22 PM

    Made changes but still no embedded form.

    For now, I'm focusing on #2: http://engle-heart.com/weddings_consultation.html

    There was an orphaned </div> but not the one you pointed out.  The opening for that one is <div class="col-1">.  I removed the orphaned close div tag and commented out all other java script but still the problem persists.  

  • Profile Image
    JotForm Support

    Answered by Mike_T on March 25, 2014 at 03:17 PM

    Can you try to remove an auto-height script (highlighted in orange) that is following the form iFrame code? Note, you can also change the iFrame height (highlighted in green) if needed.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/23344735366962" frameborder="0" style="width:100%; height:2726px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script> 

    I hope it will solve the issue.

  • Profile Image

    Answered by GothamSpirit on March 25, 2014 at 06:59 PM

    Yes, that worked.  Thanks!!