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

  • sunshine2127
    Asked on July 28, 2015 at 2:25 PM

    Help!  This is causing a serious delay in registration!

    Kathy James

    801-358-2935

    kjames@americanleadership.net

  • AaronSiciliano
    Replied on July 28, 2015 at 2: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.

  • sunshine2127
    Replied on July 28, 2015 at 3:34 PM
    I am referring to the Waitlist Application 2015/2016
    It is found under the Enrollment Tab on our website at
    www.americanleadership.net
    Thanks so much!
    Kathy
    ...
  • Ben
    Replied on July 28, 2015 at 5:12 PM

    I found this form: http://form.jotform.us/form/50264649781160 under this page: http://www.americanleadership.net/apps/pages/index.jsp?uREC_ID=216250&type=d&pREC_ID=683277 (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="//form.jotform.us/form/50264649781160" allowtransparency="true" onDISABLEDload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Do let us know how it goes.