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 do I get my form to display correctly on Mobilphone?

    Asked by joim on January 18, 2015 at 07:04 AM

    The issue on my Desktop Monitor looks all good, but if I open my forms in a mobile phone I don't see my submit button.

    The lower part is cut off.

    I tried to enlarge the iFrame hight: 2200px but on Mobilphone still cut of the lower part!

     

    I am looking forward for your help and say Thank You

    joim

    Page URL:
    http://art.imj.ch/Kontakt.htm

    Screenshot
    Mobile form cut off
  • Profile Image

    Answered by Ben on January 18, 2015 at 08:23 AM

    Hi,

    It seems that it is caused by the div into which the jotform is implemented by being set to hide all extra space that the jotform would take.

    <div style="position: absolute; left: -26px; top: 688px; width: 760px; height: 1007px; overflow: hidden;">

    As you can see it will only allow 1007px of height to be in it and will hide the rest of it as if it does not exist.

    You could change that to:

    <div style="position: absolute; left: -26px; top: 688px; width: 760px; height: 1007px; overflow-x: hidden; overflow-y: auto;">

    Using auto on overflow-y will create the scrollbar if needed and will not show it if it is not needed.

    Alternative would be to change the height of the div instead.

    Do let us know how it goes.

    Best Regards,
    Ben

  • Profile Image

    Answered by joim on January 18, 2015 at 02:30 PM

    Hello Ben

    First I’ll Thank u for ur fast replay :O)

    I have changed the code too:

    <div style="position: absolute; left: -26px; top: 688px; width: 760px; height: 1007px; overflow-x: hidden; overflow-y: auto;">

    But on Mobile phone still shows not right:
    And on the Desktop Display shows me now the scroll bar:

    Well I did made several Testing Page with Dreamweaver MX, I get the Source Code and download the separate .css & .js  files and after Upload it was the same display matter on the Mobil phone screen.

    So I going Back on Xara Designer Pro and tried with iFrame add this and then I changed the height:2200px and allow the scrolling Yes

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50153225132945" frameborder="0" style="width:100%; height:2200px; border:none;" scrolling="yes"></iframe>


    Any other solution for this matter?

    Best regarding’s joim

  • Profile Image
    JotForm Support

    Answered by jonathan on January 18, 2015 at 03:15 PM

    Hi Joim,

    We have a user guide on how to add form to Xara.

    user guide: http://www.jotform.com/help/78-Adding-forms-to-Xara-6

    and http://www.jotform.com/help/175-Changing-Height-in-Xara-7

    Have you tried following the user guide instead?

    Hope this help. Please let us know if issue remains.

    Thanks.