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

    Jotform not displaying correctly on iphone.

    Asked by James on March 28, 2013 at 06:46 AM

    Hello, i am currently making a website and have just emdedded a Jotform onto the contact page. When i view this on my pc it displays fine but if i view on my iphone it wraps the text fields underneath the lable options - which then makes the form to large to display. I have tried resizng the form width and making the text fields smaller but no joy.

    Here is the link:

    http://www.ournewwebsite.co.uk/mandp/contact.htm

    Any advice would be great.

     

    Page URL:
    http://www.ournewwebsite.co.uk/mandp/contact.htm

    JotForm form width iphone
  • Profile Image

    Answered by sidharth_kch on March 28, 2013 at 06:59 AM

    @James

    Request you to use the iFrame embed method to embed your form in your website. Please give it a try and see if it solves your issue.

    Thanks,

    Sidharth

  • Profile Image

    Answered by issywebsitedesign on April 14, 2013 at 03:26 PM

    Hello Sidharth

    I tried the forn as an iFrame on my other ite first to try (link below) but i still have the problem when viewing the form on an iphone.

    http://www.issywebsitedesign.co.uk/contact-website-design-taunton.htm

    All the best, James

  • Profile Image
    JotForm Support

    Answered by jonathan on April 14, 2013 at 06:27 PM

    Hi James,

    I tried this website http://www.issywebsitedesign.co.uk/contact-website-design-taunton.htm  on an iphone emulator, I was able to view the form just fine.

     

    Can you confirm if this was sorted already.

    Thanks.

  • Profile Image

    Answered by James on April 26, 2013 at 03:36 AM

    Sorry for the late reply, I have inserted the code now as a iframe as requested but it still doesn’t display correct on an iPhone or ipad. I know that you sent a screenshot but I have also used a few free iphone display tools from the website but they don’t give a real display.

    Please see screen shot below of the form from an Iphone4s (sorry it’s a photo taken from another phone). You will see that the form fields go under the headings and the submit button is missing.

    If you view the website on a pc @ http://www.issywebsitedesign.co.uk/contact-website-design-taunton.htm you will see how it is supposed to look.

    All the best, James
    Photo of Jotform on my Iphone 4s

  • Profile Image

    Answered by James on April 26, 2013 at 08:07 AM

    Any advise from anyone would be great - please see the photo and problem above. Thank you

  • Profile Image

    Answered by jefreylandicho on April 26, 2013 at 09:01 AM

    Please try clearing your Iphone safari browser cache and see if it works. Also, try changing the position value of the DIV wherein the IFRAME is located to relative instead of absolute.

    If it does not work, please contact us again.

  • Profile Image

    Answered by James on April 26, 2013 at 09:15 AM

    Thanks for you reply, but I am using a program called Xara (which they recommend using jotform) which creates a placeholder for me to insert the embedded code or iframe - this means I am unable to change any settings on the DIV.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 26, 2013 at 11:11 AM

    Hi James,

    One thing that will solved this issue is to inject Media CSS Queries to the form so the fields will be left align when it is viewed on mobile devices.

    Inject this codes to your form:

     

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

    .form-textbox, .form-textarea {

    width:200px !important;

    min-width:200px !important;

    max-width:200px !important;

    }

    .form-label-left {

    float: left;

    }

    }

    Guide: How to Inject Custom CSS Codes

     

     

    Let us know for the results.

    Thanks

  • Profile Image

    Answered by Damien  on September 05, 2016 at 04:34 AM

    The form seems to work perfectly on all devices on this site http://hashtagsm.com/contact-us

    And resizes automatically without the need to adapt the CSS. 

    What plugin are you using?