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

    Issue with the form on Apple mobile devices

    Asked by DTC_membership on May 20, 2014 at 10:12 PM

    Hi,

    I have a form that was created for membership sign-up. On all PC browsers as well as Android mobile phones, form looks just fine. On Apple mobile devices, there are two issues:

     

    1. On iPhone, form is not displayed in full. There is a missing part at the end where sumbission button is so there is no way to submit the form when it is filled in

    2. On iPad, form is displayed in full but a "secret word" is not displayed. There is a turning wheel that is constaltny shown and word never gets displayed

     

    Here is the iFrame that is embedded in the web page created by Xara:

     

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

    I have played around with width (replaced % with the pixel count) and height (increased number of pixels) but none of that worked. Can you let me know what else can I try to make it work on the Apple mobile devices?

     

    Thank you

    Page URL:
    http://www.dunlacetennis.com/join.htm

    Mobile JotForm style height ipad
  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 20, 2014 at 11:58 PM

    Hello DTC_membership,

    I did check your web page in my iPhone device and I was able to replicate the issue you are having. I would suggest you to please try the following iFrame code and see if that solves your issue:

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

    Do check and get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by DTC_membership on May 21, 2014 at 07:25 AM

    Hello,

     

    thank you for your reply. I have tried what you suggested and it did not work.  Iphone is mising much more while ipad is not displaying a word to type in before submiting. Is there a way to attach images (if needed) so you can see what I am talking about? Any other suggestions?

     

     

     

     

  • Profile Image

    Answered by digiosolutions on May 21, 2014 at 07:34 AM

    @ DTC:

     

    1. take screen shot

    2. upload to imgur.com

    3.

     

    4. enter the actual image URL (NOT the url for sharing, on imgur click on image to get this url in your address bar, it will look like http://i.imgur.com/Kz4DEJ8.png) into the image url field to attach your screenshot.

  • Profile Image

    Answered by DTC_membership on May 21, 2014 at 09:40 AM

     

    Here it is; top picture is ipad (Safari) and bottom is from iphone4 (Chrome, same on Safari)

     

    iPad issue

     

    iPhone issue

    iPhone

  • Profile Image

    Answered by EliezerN on May 21, 2014 at 11:48 AM

    Thanks for the screenshots. I was able to see them after copying their URL and pasting them in the browser.

    - Regarding to the issue of the captcha word not being displayed on iPad, we kindly ask you to try switching to reCaptcha field instead, that may work fine. To switch to reCaptcha mode simply click on the Captcha field and then click on the Recaptcha option in the top:

    - Regarding to the form not being fully displayed on iphone, please try increasing the height of the iframe code. So, if the current height is 2850px then change it to 3000px or more if that is not enough. So, the code should be like this one.

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

    I hope this helps. Please inform us if you need further assistance with this query.

    Thanks

  • Profile Image

    Answered by DTC_membership on May 21, 2014 at 09:56 PM

    Hi,

    your suggestion did not help. I even put the height to 4500px and result was the same. I also played with the width (90%, 110%, 120%) and could not make the whole form to show up on iphone browser. It would cut it at different place or not show part of the right side of the form.

     

    Regarding capcha; what you suggested fixed the problem on iPad and now, the words are showing up all the time.

    Why are your forms so sensitive to the resolution of the browser? Can we make my form to display properly on iphone>

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 22, 2014 at 02:03 AM

    @DTC_membership

    Glad to hear my colleague was able to help.

    Regarding on the iPhone cut off issue, the problem is related with the div container where you have pasted your form embed code. You have to adjust the div container's height once the page is viewed on iPhone so the form will not get cut. Just insert the following CSS code before your form embed code, this should fixed it.

     <style>

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

    #xr_xrii #xr_xr div#xr_xri.xr_ap div {

    height: 3000px !important;

    }

    }

    </style>

    Visual guide:

    Regards!

  • Profile Image

    Answered by DTC_membership on May 22, 2014 at 06:51 AM

    Hi,

    this fixed the problem. Thank you