Form not displaying correctly on iOS.

  • kayfelix
    Asked on August 11, 2016 at 3:38 PM

    Hi,

    My form was working fine (fields displaying exactly as on desktop and transparent background) until I clicked the designer button to make my form into 2 columns when elements are shrunk.

    After saving the form did not display correctly anymore, all fields on separate rows and stretched full width.

    Very similar to the problem here:
    https://www.jotform.com/answers/669013-Form-not-displaying-correctly-on-Ipad

    However the instructions didn't help in my case, at least not completely (all fields still on separate lines).

    Here is the form: https://form.jotformeu.com/62207038156350

    To complicate matters further, it looks fine when I view the form by itself (direct) but when its in my WIX page through an iframe, it doesn't display anymore!

    http://cindyfuller.wix.com/designs-direct#!design-brief-kay-edit/bzyoq

    tested in Safari iOS, Chrome iOS and Desktop Chrome

    Any help greatly appreciated.

    Jotform Thread 904293 Screenshot
  • BJoanna
    Replied on August 11, 2016 at 5:00 PM

    Your form is displayed properly on my end on desktop. However when I tested your embedded form on my phone I noticed that form is cut off. After that I have tested your standalone form it was also cut off. Your form is not fully responsive. 

    You can make your form responsive by adding mobile responsive widget to your form. 

    How to Add a Widget to your Form?

    Also please remove CSS code that you added to your form, from other thread. 

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    input[type=text], input[type=email], input[type=tel], textarea {

    width: initial !important;

    }

    Here is my cloned form: https://form.jotform.com/62236447565966 

    Feel free to test it and clone it

    Hope this will help. Let us know if you need further assistance.

  • kayfelix
    Replied on August 11, 2016 at 5:58 PM

    Hi!

     

    Thanks for the quick reply :)

    Your cloned form looks great in the browser when viewed directly:
    https://form.jotform.com/62236447565966

    Form not displaying correctly on iOS Screenshot 30 

    but unfortunately as soon as its a WIX iframe it loses the formatting:
    http://cindyfuller.wix.com/designsdirect-kay#!cloned-form/bvf0z

    Form not displaying correctly on iOS Screenshot 41

     

    I just don't understand what is creating this behavior?

  • kayfelix
    Replied on August 11, 2016 at 6:18 PM

    here is a better view of the cloned form displaying within the wix iframe on ipad air 2 running ios 9.3 using chrome browser:

    Form not displaying correctly on iOS Screenshot 40

     

    its the same problem on the iphone, i tested it on the SE model running 9.3

    the thing is, I originally copied the registration form template and built my form from that.

    here is the reg form:

    Form not displaying correctly on iOS Screenshot 51

     

    but here is the cloned form you made:

    Form not displaying correctly on iOS Screenshot 62

  • Chriistian Jotform Support
    Replied on August 11, 2016 at 11:16 PM

    Can you please try using the Jotform iFrame embed code to embed the form to your page instead of the wix iframe? You can get the iframe code from this guide: Getting the form iFrame code

    Just copy the iFrame part and not the script part. You can copy the example below:

     <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62236447565966" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> 

    Just paste the iFrame code to the HTML block of Wix.

    Form not displaying correctly on iOS Screenshot 20

    If the issue persists, please let us know.
    Regards.

  • kayfelix
    Replied on August 16, 2016 at 3:57 PM

    Hi! Thank you for the answer and sorry for the late reply, I've been caught up in other things!

    I copied the code over, and although it looks better it's only showing about half the page:

    https://form.jotformeu.com/62207038156350

    http://kayfelix.wix.com/dd-kay#!design-brief-final/y5x94

     

    Form not displaying correctly on iOS Screenshot 20

  • BJoanna
    Replied on August 16, 2016 at 4:18 PM

    Please try to increase the height of your iFrame code from 539px to 1200px. You can also set scrolling to "yes" or "auto". 

    <iframe onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/62207038156350" frameborder="0" style="width:100%; height:1200px; border:none;" scrolling="auto"></iframe>

    Hope this will help. Let us know if you need further assistance. 

  • kayfelix
    Replied on August 16, 2016 at 4:25 PM

    As soon as it's long enough, the styles go haywire again!

     

    Form not displaying correctly on iOS Screenshot 20

  • David JotForm Support Manager
    Replied on August 16, 2016 at 6:18 PM

    I see the fields expand when on portrait iPad view:

    Form not displaying correctly on iOS Screenshot 40

    I cloned your form, and inspected all the inner CSS code the form had, in order to remove the code related to iPad view, so now it's set to default, here is how it is viewed now: https://form.jotform.co/62287319818870 

    Form not displaying correctly on iOS Screenshot 51

    You  may clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Then get the Iframe code and embed it in your site: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Before you embed the code, paste it in a text editor like WordPad, you will notice two part of codes, only copy and embed the Iframe part in your webpage, example:

    Form not displaying correctly on iOS Screenshot 62

    Let us know if you need more help, we will be glad to assist you.