progress bar hides partially/completely when validation errors are displayed on iframe embed

  • hphanpeterson
    Asked on September 24, 2014 at 1:38 PM

    Hi,

    I have a multi page form and the progress bar is at the bottom of my page.

    I have the following issues.

    - on page 1 the progress bar is showing fine both when validation error is not showing and when the error is showing. But, on page 2 there are two issues.

    1) When validation error is not shown, progress bar is partially hidden.

    2) when validation error shows, the progress bar is completely hidden.

    Also note in screenshots,

    On page 1 - the iframe height is very tall. I have to scroll all the way down to find my footer.

    On page 2 - the iframe height seems fine.

    ----------------------------------------------------------------------------------------------------------

    Sorry, i cant provide a link to my website as i am working on a local server.

    Can you please help me with this issue?

    Thank you.

    Jotform Thread 433847 Screenshot
  • Kiran Support Team Lead
    Replied on September 24, 2014 at 2:46 PM

    I understand that the height of the iframe is effected when showing validation error messages on the form. Could you provide us the iframe code that you have used to embed the form on the webpage?

    Also, please try embedding the form using normal embed method and let us know the result. This would help in investigating the issue further.

    We'll wait for your response. Thank you!!

  • hphanpeterson
    Replied on September 24, 2014 at 4:24 PM

    Hi,

    iFrame embed code used:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/40055714382147" frameborder="0" style="width:100%; height:15499px; 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>

    -------------------------------------------------------------------------------------------------------------

     

    Initially I had used the normal embed method. I had the problem of 'page not scrolling to the top of the form when 'next' or 'back' button clicked '.

    I contacted the support and they suggested i try the iFrame embed. 

    With the iframe embed the page scrolls to the top, but I have the problem mentioned in the above question.

    Let me know if any other information would help.

    Thank you for your help.

     

  • Kiran Support Team Lead
    Replied on September 24, 2014 at 4:33 PM

    Okay. Could you try embedding the form using the code with iframe tags excluding the code with script tags? That is  

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/40055714382147" frameborder="0" style="width:100%; height:15499px; border:none;" scrolling="no"></iframe>

    Please let us know the result so that we will look into the issue further. Thank you!!

  • hphanpeterson
    Replied on September 24, 2014 at 5:33 PM

    I embedded the iFrame with no script tags.

    The progress bar problem is solved. That is, it is no longer hidden when the validation errors are displayed.

    Now, the problems are:

    1) the iFrame height problem is not solved. It is still very long and I have to scroll a whole lot before I can see the footer.

    2) the page does not scroll up to the top of the form when 'next' button is clicked.

    This problem was not happening when I used the complete iframe embed including  the script tag.

    Thank you for your help.

     

  • jonathan
    Replied on September 24, 2014 at 6:21 PM

    Hi,

    1) the iFrame height problem is not solved. It is still very long and I have to scroll a whole lot before I can see the footer.

    2) the page does not scroll up to the top of the form when 'next' button is clicked.

    This 2 problems are now happening because the script part  of the Iframe embed code was already removed.

    To resolved this, please try the following:

    1# You can manually change the iframe height of the embed code.

    Example, change the height of the iframe code to lesser number

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/40055714382147" frameborder="0" style="width:100%; height:15499px; border:none;" scrolling="no"></iframe>

     

    #2 Change the parameter "scrolling" to "auto"

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/40055714382147" frameborder="0" style="width:100%; height:15499px; border:none;" scrolling="auto"></iframe>

     

    Hope this help. Please let us know if there are still issue.

    Thanks.

     

     

     

     

  • hphanpeterson
    Replied on September 24, 2014 at 7:36 PM

    It kind of works. 

    Now I have a vertical scrolling bar, which does not look good on the website and also makes the form a little hard to navigate on mobile devices. 

    Plus, the page still does not scroll up to the top of the form when I click 'next' button.

    Let me know if you need any other screenshot or information that would help.

    Thank you.

  • Elton Support Team Lead
    Replied on September 25, 2014 at 3:13 AM

    1. The vertical scroll bar is due to the scrolling="auto", set it back to scrolling="no" if you don't want any vertical scroll bars to appear.

    2. Regarding on the form that does not scroll up when next/back button is clicked, it's because the script was removed on your iframe embed code. I am referring to the following script that was part of the iframe embed code.

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/40055714382147" frameborder="0" style="width:100%; height:15699px; 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>

    If scroll to top is important, I would suggest to put the script back together with your iframe embed code.

    ----

    My suggestion on the cut progress bar is to add a little extra height on your iframe as also suggested by my colleagues though the downside when using iframe is that the height is static. It does not change depending on the length of the page content. The actual height of the iframe is taken from the page with the longest content, e.g. if page 2 has the longest content, then the iframe height would be equivalent to the page 2 height. That's its current behavior that's why some of the pages has gaps below them.

    Here's how to add extra space on the iframe height to prevent the cut on the progress bar.

    <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 = parseInt(args[1])+50 + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    If you need further assistance, let us know here. 

    Best Regards!

  • hphanpeterson
    Replied on September 25, 2014 at 6:46 PM

    Hello,

    I took out the scrolling and added the code bit  parseInt(args[1]+50 .... as suggested above.

    Thank you for the code, the cut on the progress bar issue is solved.

    But, the main problem of iFrame height is still unresolved.

    I am not able to manually change the height of the iframe. Even if I was able to I dont think it would solve the problem, since each page of my form has a different height and hence some would have more gap and some less.

    please help!

     

  • jonathan
    Replied on September 25, 2014 at 8:03 PM

    Hi,

    Have you tried using the jotform full source code embed also? 

    User guide: http://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    You may want to try it also and see if it makes the situation better.

    --

    To be honest, the removal of the script part of the Iframe code embed had actually presented more issue than the worth of it not being removed.

    Perhaps we should focus on retaining the original Iframe embed code (that includes the script part) and apply fix/workaround to prevent the script conflict issue.

    We are also being limited because we could not see the actual embedded jotform on your website/page. We could not do troubleshooting with the actual resources.

    Can you also tell us what is your website(intranet). Is it a CMS? a Wordpress, Joomla.. Wix?

     

    Thanks.

     

  • hphanpeterson
    Replied on September 26, 2014 at 12:43 PM

    I am using the form in a wordpress website.

    Initially I had embedded the form using the wordpress plugin, form generator for wordpress - Loved the plugin BTW.

    Everything worked great except for page not scrolling to the top when 'next' button clicked.

    So I contacted support and they said that its a jquery form embed issue ( The issue has been ticketed

     and sent to developers) and they asked me use a iFrame embed in the meantime.

    With the iframe embed, I am experiencing the above mentioned issues.

    ----------------------------------------------------------------------------------------------

     

    I tried embedding the complete source code. Page scrolling to top is fine but it completely messed up the layout.

    What's the right way to embed the complete source code in a wordpress website?

    Do I put everything in the page 'text' section? CSS, JS and all.

    ------------------------------------------------------------------------------------------------

    I understand that its hard to troubleshoot a problem without looking at it in a website.

    I will be putting website on a live server soon. If the problem is not solved by then I will contact the support and provide the link to the website.

    Thank you for your help.

     

     

  • Kiran Support Team Lead
    Replied on September 26, 2014 at 3:03 PM

    I've tried embedding the form on my local version of WordPress 4.0 using iframe method and source code method. The iframe method worked fine for me. But the source code embed has some issues with the layout as you had. This seems to be a conflict with other scripts that are installed. You are right if you have placed the script in text section.

    And yes, it would be really helpful to investigate on the issue if you can provide us with the website link. Please let us know the URL as soon as you make the website live.

    Thank you.

  • hphanpeterson
    Replied on October 3, 2014 at 8:38 PM

    Hi again,

    My website is live now and I have provided the link to the website.

    http://salutecolorado.org/application/

    I have embedded the form in a wordpress website using jquery embed.

    The issue that I previously had about 'page not scrolling up when 'next' button clicked' has been fixed now. Thank you for that.

    --------------------------------------------------------------------------------------------

    Currently I am having the following issues when I resize the browser window or view the form in a mobile device (max-width: about 700px)

    1. The 'back' and 'next' buttons are very close to the progress bar. There is no margin between them. When I tried giving margin, it caused further layout issues.

    2. When a validation error occurs and the validation message is shown, it is hidden behind the progress bar. 

    How do I fix these 2 issues.

    Thank you.

     

  • Welvin Support Team Lead
    Replied on October 4, 2014 at 12:50 AM

    That's great! It is our pleasure to help you fix it. 

    With regards to the additional issues, please check it here: http://www.jotform.com/answers/438560. I moved it as a new thread. We'll answer it shortly.

    Thank you!