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 Jotform not displaying correctly on Iphone

    Asked by James on May 05, 2013 at 06:34 PM

    Hello, I have created a form and inserted it onto a webpage and it views fine all okay on my pc (on all browsers) but when viewed on a iphone its pushs the form options down which doesnt give it enough room to view all the form and submit button.

    I have tried as embedded code and also as an iframe but still no joy. I have inserted the website and also screen shots from my iphone of the form.

    I already have this bit of code injected to remove the space around the form (if this makes a difference)

     

    .form-all {

    padding-top: 0px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-left: 0px !important;

    }

    Page URL:
    http://www.ournewwebsite.co.uk/ldm

    Screenshot
    JotForm style pc form-line hello
  • Profile Image

    Answered by issy_links on May 05, 2013 at 06:36 PM

    Sorry meant to say that (as showen on a pc) the form option should be left aligned with the input boxs - so that each one is on the same line.

  • Profile Image

    Answered by pinoytech on May 05, 2013 at 07:05 PM

    Hi,

    Sorry for the inconvenience that may have caused. I've check your form's label alignment and I found out that it is set to Auto. Can you please try to set it to Left instead of Auto?

    Thank you!

  • Profile Image

    Answered by LDMservices on May 05, 2013 at 07:33 PM

    Hello - i have reset all the fields to be left aligned and saved. I have removed all history from my iphone and viewed again and also viewed on a friends ipad and it is still the same as the photo i attached above. Still forcing the input boxs below.

  • Profile Image

    Answered by LDMservices on May 05, 2013 at 07:36 PM

    Also i have double checked that the form isnt larger tha nthe actual placeholder i have inserted it into and it is a lot shorter, so no problem there.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 06, 2013 at 05:00 AM

    @LDMservices

    Inject the following CSS codes to your form. This should make the left labels not to moved down when viewed on mobile devices.

    @media only screen and (max-device-width: 550px){

    .form-label-left, .form-label-top{

    float: left !important;

    display:inline !important;

    }

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Let us know if you have any other questions or concerns. Thank you!

  • Profile Image

    Answered by LDMservices on May 06, 2013 at 04:25 PM

    Hello, i have inserted the code you supplied in the custom CSS section but i am still getting the same problem - please see new screen shot below:

  • Profile Image
    JotForm Support

    Answered by jonathan on May 06, 2013 at 09:44 PM

    Hi,

    I was also able to see the problem when I viewed the page in an Iphone emulator.

    Can you please try re-embedding the form using this iframe codes only

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

    It could be the additional script is conflicting with the other scripts in your Xara website.

    Please try and update us of the results.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by liyam on May 06, 2013 at 10:00 PM

    Hello LDMservices.  The problem that I see is that when viewed via iphone, the width of the textbox gets too wide You can try using this CSS code (you may shorten the size of the width if it still goes to a new line):

    @media only screen and (max-device-width: 550px){

        input[type="text"]{ width: 160px; }

    }

  • Profile Image

    Answered by LDMservices on May 07, 2013 at 02:09 PM

    Hello, i have tried both above (from Jotform) and re uploaded onto a new domain - so that it is all refreshed, but still the same issue:

    Here is the link: http://www.carpet-cleaner-in-bristol.co.uk

  • Profile Image
    JotForm Support

    Answered by jonathan on May 07, 2013 at 05:53 PM

    Hi,

    I am sorry for this, but yes, it seems it still does not work on your form when it is viewed on Iphone.

    We have this guide in JotForm http://www.jotform.com/help/175-Changing-Height-in-Xara-7

    Can you please try the suggestion on the guide (that is, if you are using Xara -- I am not to sure)

    I am still trying to find a solution for this. I will get back to you as soon as I have one.

    And my colleagues will also get back to this thread with suggestions/solutions as soon as they are back online. We will try to come up with a solution to this.

    Thank you for the patience and understanding.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 08, 2013 at 09:53 PM

    @LDMservices

    I have fixed it for you. Kindly check your form in iPhone device now.

    This is how it looks on iOS 6 Simulator/iPhone 5:

    Here's what I've injected on your form.

    @media only screen and (max-device-width: 550px){

    .form-label-left, .form-label-top{

    float: left !important;

    display:inline !important;

    }

    .form-all{

    width:420px !important;

    }

    .form-buttons-wrapper{

    text-align:left;

    margin-left:91px !important;

    }

    .form-submit-button{

    line-height:10px !important;

    }

    }

    Let us know if it displays different on your device. Thanks!