Jotform not displaying correctly on iphone.

  • Profile Image
    Asked 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:

    Any advice would be great.


  • Profile Image
    Answered on March 28, 2013 at 06:59 AM


    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.



  • Profile Image
    Answered 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.

    All the best, James

  • Profile Image
    Answered on April 14, 2013 at 06:27 PM

    Hi James,

    I tried this website  on an iphone emulator, I was able to view the form just fine.


    Can you confirm if this was sorted already.


  • Profile Image
    Answered 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 @ you will see how it is supposed to look.

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

  • Profile Image
    Answered 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 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 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
    Answered 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.


  • Profile Image
    Answered on September 05, 2016 at 04:34 AM

    The form seems to work perfectly on all devices on this site

    And resizes automatically without the need to adapt the CSS. 

    What plugin are you using?