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

    My form which is embedded using iframe jumps to top after clicking the submit button

    Asked by Khan Tabish on April 18, 2016 at 07:07 AM

    I am facing the same issue on iPhone. when user click on the link it send user on the top. but its fixed with the code which you have provided in the above threads.

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

    But its not working when i make the height=100%. 

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

    please help.

    form jumps iframe embed
  • Profile Image
    JotForm Support

    Answered by Welvin on April 18, 2016 at 07:27 AM

    If that is the case, you should put the fixed height value. You can adjust the value until the form will fully show up in the page. Do you have any issue with the fixed height? Let us know.

  • Profile Image

    Answered by Khan Tabish on April 20, 2016 at 01:15 AM

    Yes we have issue with the fixed height. because in our application we have given the flexibility to the user to create their own form on jotform and use their URL in the application. and we are showing that URL on iPhone.

    so here we dont know the exact height of the jotform which user is created.

    and if user created the form with accordion menu then its height can not be stable on menu click.

     

  • Profile Image
    JotForm Support

    Answered by mert on April 20, 2016 at 04:01 AM

    Hi there,

    In order to beat that issue, you can define a specific "height" value with respect to the resolution of the screen. To do that, you need to use the following media query:

     

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    iframe{

    height:800px;

    }

    }

     

    As it is seen, the height of the "iframe" is adjustable and you can add more specific height by repeating the same media query structure from the above, However, I need to add that the height of the form is not a big problem, so you can leave it as its original value which is "1063px" for your form. By the way, to inject this CSS rule, you need to use the following document from the below, if you don't know how to inject a CSS to your form.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    I hope this one will help. Please, do let us know, if you need any extra information.

    Regards.

  • Profile Image

    Answered by tabblack on April 21, 2016 at 01:50 AM

    Thanks for your reply, I have tried this but its not work for me. The issue my jotform have the accordion menu which is expand and collapse on its item click. So when i click on the first item of the menu then its expanding and increase their height and when clicking on 2nd item of the menu then it is sending us on the top instead of open the 2nd item.

    These functionality is working fine on Web and Android device. but it have the issue on iPhone.

    Here is my jotform URL : https://form.jotform.com/60727819191260

    I already use the nojump but its is also not working.

    Note: I can not add any CSS style at jotform side, because there are multiple other users who are creating their form at jotform and using my application for their jotform URL to view it on their device. 

    Please help us how we can handle this kind of scenario.

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 21, 2016 at 03:25 AM

    I noticed that the original url (form.jotformpro.com/form/50878115520958) from this thread in relation with the link jumping to top  is different from the most recent url that you have provided about the accordion issues on iphone (https://form.jotform.com/60727819191260).

    Does the issue still occur in the original form url? The code needed for the accordion form might be different from the other form, so issues may occur if we try to use the same for the original form. If these are different forms, I would suggest posting separate threads for each of these issues to avoid confusion.

    With regards to your issue with the accordion, unfortunately I do not have an iPhone to test the issue. However, I did test the form on an emulator, but I was unable to replicate the issue there. Have you embedded the form (https://form.jotform.com/60727819191260) to a website? Does the occur when using the direct url? Please let us know the url of your website so we can further investigate the issue.

    In the meantime, please try using the iframe code below to see if this resolves the issue on iphone.

    <iframe id="JotFormIFrame"  onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//https://form.jotform.com/60727819191260?nojump" frameborder="0" style="width:100%; height:1417px; border:none;" scrolling="no"></iframe>

    If the issue persists, please let us know.
    Regards.

  • Profile Image

    Answered by tabblack on April 25, 2016 at 10:17 AM

    The issue is coming on the accordion menu form. and its also coming on the form which have button and dropdown.

    First consider the Accordion menu form which is high priority.

    Its working fine when i am using URL in the browser of iPhone but if we embedding it on the website then its not working properly.

    I have already tried all the <iframe> code which you have mentioned but its not working.

    and we can't use the fix height for the forms. because in our application user can enter their created form URLs which can have different heights.

    So here what we exactly want:

    <iframe id="JotFormIFrame"  onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="[This can be dynamic URL]" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="no"></iframe>

    So here the URL can be dynamic, it can be either 'https://form.jotform.com/60727819191260' or 'http://form.jotformpro.com/form/50878115520958' or any other url. that's why we are using height 100%

    But the accordion menu form is not working for the 100% height. its working for fixed height but its not feasible because user can change their jotform URL.

     

    Please suggest the way to handle the accordion menu form issue.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 25, 2016 at 11:46 AM

    First option: How about trying the default embed method, the "Embed" option? Please try that and let us know if it breaks your website.

     

    Second option: How about using a fixed height then enabling the scrolling in the iframe? From scrolling="no" to scrolling="yes"?