The page next button gets cut off as new fields are shown on the form

  • Profile Image
    Asked on July 28, 2015 at 02:25 PM

    Help!  This is causing a serious delay in registration!

    Kathy James


  • Profile Image
    Answered on July 28, 2015 at 02:55 PM

    Could you let me know which form you are referring to. And if possible a link to it in use on your website so I can replicate the problem.

  • Profile Image
    Answered on July 28, 2015 at 03:34 PM
    I am referring to the Waitlist Application 2015/2016
    It is found under the Enrollment Tab on our website at
    Thanks so much!
  • Profile Image
    Answered on July 28, 2015 at 05:12 PM

    I found this form: under this page: (Enrollment -> 2015-2016 K12 Waitlist Application)

    Now, I took a look at the form and I see that as you have some field shown or hidden, the forms height does not change so the page next button becomes cut off and it does not matter what is the field, as soon as enough new fields get shown, it is pushed further down.

    Now if you do not mind the scrollbars, simply changing the iframe code from scrolling="no" to scrolling="yes" would resolve this issue.

    However since I presume that you do not want to have the scrollbars shown, I would suggest increasing the height of your iframe to be higher than needed - this would then show the form without the scrollbars, but it would take a bit more space than needed at some times.

    I would also like to ask you if you can try and add the following code to your website to see if it works:

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 1430px; border: medium none;" src="//" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><script type="text/javascript">window.handleIFrameMessage = function(e) {var args =":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight" = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) { = 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>

    Do let us know how it goes.