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

    How can I fix the problem with a form overlapping the iframe?

    Asked by Campusjaeger on April 07, 2014 at 08:41 AM

    In this form http://www.campusjaeger.de/jetzt-anmelden.html you will find multiple of thee collapse bars (collapsed by default). However if you open one of them and scroll right back to the top of the form you cannot see it, because the iframe is to small.

    Any ideas how to change this without removing the collapse bars from my form?

     

    Thanks in advance guys!!

    Page URL:
    http://www.campusjaeger.de/jetzt-anmelden.html

    problem find scroll www thanks
  • Profile Image

    Answered by jedcadorna on April 07, 2014 at 10:26 AM

    Are you referring to this section? Which fields are cut since the collapse fields is open?

    Try to add padding-top: XXpx; to your Iframe embed code where XX is the number to be adjusted. You can try putting a value of 100px and see if that is enough or adjusting it more if needed.

    Sample Iframe code: 

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/40963915741965" frameborder="0" style="width:100%; height:8350px; border:none; padding-top:100px;" 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>


  • Profile Image

    Answered by Campusjaeger on April 08, 2014 at 04:14 AM

    Thanks for your answer.

    Yes that is the section I meant. Adding a top padding seems to work, but then my form is 200 or more px down the page which doesn't look so good to be honest.

    Is there a way of adding this padding to the bottom and "pin" the form to the top so that just the formcontent below the collapse bars is moving?

     

    Thanks

  • Profile Image

    Answered by jedcadorna on April 08, 2014 at 07:11 AM

    Removing the <script> </script> tag should fix the issue. I have tested it again and the form no longer cuts off.

    Here's a sample of your form with the <script></script> tag removed https://shots.jotform.com/jed/forms/Jetzt%20anmelden%20-%20Campusj%e4ger.htm.

  • Profile Image

    Answered by Campusjaeger on April 08, 2014 at 11:37 AM

    Thanks heaps for your answer. This is definately solving my problem.

    One more question: If it's possible to remove this effect of overlapping at all, isn't it possible to just expand the bottom side of the form, so that it is getting longer if the user opens one of the collapse bars? Because now there is a huge whitespace area between the end of the form and the website footer.

    I appreciate your help! Thanks for everything!

  • Profile Image

    Answered by EliezerN on April 08, 2014 at 01:35 PM

    Hi,

    Please note that with the iframe code it is not possible to remove the extra white space from the bottom of the form. It has an already fixed height and width sizes, and if you want a different size you need to change it from the iframe code manually.

    If you want your form height to automatically udjust to the space needed, then you will need to use the Embed Code instead of the iframe code:

    I hope this helps. Please let us know if you need further assistance with this inquiry or kindly open new threads for unrelated questions.

    Thanks