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

    When I embed my form in a webpage using the javascript code none of the hover text appears.

    Asked by benrickard on September 29, 2015 at 11:26 PM

    Hi there,

    When I embed my form using the javascript code none of the hover text appears. None of the conditions work either (eg. fields to appear if box is ticked). And I can't advance to the next page.

    However, if I use the iFrame script then the hover text and field conditions work, but the form is cut off at the bottom in my webpage (this may also happen with the javascript embed but I can't get to that page yet)

    The form is: http://form.jotformpro.com/form/52698008828972.

    Please can you tell me how I can solve these issues?

    Thanks!

    Ben.

    Page URL:
    http://www.builtin.co.nz/subbies/ectest.html

    js embed hover text missing js conflicts
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 30, 2015 at 06:44 AM

    Hi,

     

    Can you try to embed your form using the iFrame code only, remove the <script> tag? Remove this part:

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

     

    Then adjust the height of the iFrame. Here is a sample iFrame code that you can use:

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

     

     

    Do get back to us if the issue still persists.
    Regards.

  • Profile Image

    Answered by benrickard on October 05, 2015 at 04:01 PM

    Thanks for your reply.  I had tried this and tried it again but the problem persists, the bottom of the form is cut off by the bottom of the webpage.  Is there anything else I can try?

  • Profile Image

    Answered by Ben on October 05, 2015 at 05:10 PM

    Please do try to use the full iframe code - including the script part at this time.

    The reason is that since the time my colleague has posted his reply to you there were few updates to the iframe code and the script part which allow the iframe to resize itself in a different manner than before.

    Please follow the steps here to see how: How to get the jotform iFrame Code

    If by some chance it is not working properly we can always use the same code without the script part (as mentioned above by my colleague) and we would help you with the code that you should add to it to make it show properly on your website.

    Do let us know how it goes.