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

    Iphone: how to make forms to fit into safari mobile browsers

    Asked by bchoi on June 14, 2013 at 03:24 PM

    Hi, I am having trouble getting the form responsive on iPhone browsers. However, it does respond to different screen sizes on desktop web browsers including mobile size. I tried the @media method, doesn't seem to work. Can anyone take a look?

    http://bit.ly/12uo1m8

    Thanks!

    Page URL:
    http://bit.ly/12uo1m8

    Screenshot
    size Mobile different thanks
  • Profile Image

    Answered by jeanettebmz on June 14, 2013 at 07:08 PM

    Can you please try embedding the iFrame version  of the form?

    Most of the time safari browsers will not render the form ok if you do not apply this. You can even reduce the height of the form in  that code version

    Let us know if the issue persist

  • Profile Image

    Answered by bchoi on June 18, 2013 at 05:33 PM

    Hi Jeanettebmz,

    I tried embedding the iFrame and the problem still persist. I tested the form on multiple browsers on my iPhone and none of they shows the form correctly. Any other idea?

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on June 18, 2013 at 06:08 PM

    Hi,

    I suggest reviewing this thread . Our colleague EltonCris suggested CSS codes usually work all the time.

    The injected code is like this

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

    .form-textbox{

    width:300px !important;

    min-width:300px !important;

    max-width:300px !important;

    }

    }

     

    Adjust the numbers to match your form's and I suggest you increase your form width a little higher. 90 px is too narrow even for a mobile browser. This is how I see your form because of the too narrow width

     

    Please inform us if you need further assistance on this.

    Thanks.

  • Profile Image

    Answered by bchoi on June 18, 2013 at 07:29 PM

    Thanks jonathan,

    I injected the @media code into my form and it still not reacting to the screen size as you showed here with the emulator. I have tried other numbers beside 300px, but nothing works on my iPhone.

    Just FYI, my form width was set at 90%, not 90px. Using "%" seem to be the only way to make the form responsive "at least" on desktop browser.

    Please advise.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on June 18, 2013 at 11:01 PM

    Hi,

    Will you be able to share to us a screenshot on how it looks on your end?
    Try uploading the screenshot here http://imgur.com/ paste here the URL of your uploaded image when you reply.

    Try also clearing your mobile browser cache or desktop browser cache to refresh the page viewer.

    So far, all is good on my end already...

    You can also check on the Iphone emulator I am using http://iphone-emulator.org/

     

    -- 

    I had never tried the % number in the form's width property before =)

    I am not sure it should be working, but it seems to, on your website.

    On the other hand, I'd like to inform you that when I cloned your form to check, the width is only 90 not 90% -- so this is in pixel unit. It seems the form builder is reeseting the unit for the unsupported type.

    Thanks.

     

  • Profile Image

    Answered by bchoi on June 19, 2013 at 12:35 PM

    Hi Jonathan,

    Here are the screenshots of the form on my end (iPhone Safari and Chrome). The form works perfectly on desktop browsers and the iPhone Emulator, just not on iPhone (I cleared my cache).

    Thanks!

     

    iPhone Safari

     

    iPhone Chrome

  • Profile Image
    JotForm Support

    Answered by jonathan on June 19, 2013 at 06:11 PM

    Hi,

    I could see that you have not yet updated the CSS codes for your form

     

    I recommend that you try to apply the suggested CSS code workaround for mobile browser. And also, use a specific form width in px unit -- try 550. I did some extensive test using your form, and I come up with this CSS code 

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

    {.form-textbox{width:225px !important;min-width:225px !important;max-width:225px !important;}

    }#label_6 { display: none;}

    #label_7 { display: none;}

    #label_3 { display: none;}

    #label_8 { display: none;}

    #label_21 { display: none;}

    This is the test form http://www.jotformpro.com/form/31696840963971 if OK with you, I suggest you clone my form and use it to test on your website. 

    Use this guide to clone How-to-clone-an-existing-form-from-a-URL

    --

    I also emulated your website page so I can better test on an iphone browser.

    Please test this URL on your iphone browser https://shots.jotform.com/jonathan/webtest/iphone_form_not_working_bchoi.html

    While I was doing the web page test, I noticed this particular meta code on the web page source,

    I found out that it is causing conflict on the iphone browser, so, I disabled it on my test page. It works fine after that.

    This is how my test page look on the Iphone emulator browser

     

    Thanks.