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

    Form not displaying correctly on iOS.

    Asked by kayfelix on August 11, 2016 at 03: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.

    Screenshot
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 11, 2016 at 05: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.

  • Profile Image

    Answered by kayfelix on August 11, 2016 at 05:58 PM

    Hi!

     

    Thanks for the quick reply :)

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

     

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

     

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

  • Profile Image

    Answered by kayfelix on August 11, 2016 at 06: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:

     

    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:

     

    but here is the cloned form you made:

  • Profile Image
    JotForm Support

    Answered by Chriistian 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" onload="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.

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

  • Profile Image

    Answered by kayfelix on August 16, 2016 at 03: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

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 16, 2016 at 04: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 onload="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. 

  • Profile Image

    Answered by kayfelix on August 16, 2016 at 04:25 PM

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

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on August 16, 2016 at 06:18 PM

    I see the fields expand when on portrait iPad view:

    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 

    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:

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