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 mobile devices

    Asked by slider17 on October 21, 2014 at 06:21 AM

    Hi

    My form is currently set to display in two column format, this works fine on desktop devices but on mobile devices the content is all squished into a hybrid single column.

    This only started happening after using the new form designer.

    Any ideas how to fix this??

     

    Thanks

    Page URL:
    http://form.jotform.co/form/42838586079875

    Mobile devices form designer new form format
  • Profile Image

    Answered by Ben on October 21, 2014 at 09:25 AM

    Hi,

    I see what you mean.

    Can you please tell us what changes did you make in the new Form Designer?

    In regards to fixing this, I would suggest taking a look at this guide: How to View Form Revision History.

    It will help you to restore any version of your jotform when your jotform was working properly.

    Best Regards,
    Ben

  • Profile Image

    Answered by slider17 on October 21, 2014 at 10:33 AM

    Really the only changes made were the column setting to 2

  • Profile Image
    JotForm Support

    Answered by Charlie on October 21, 2014 at 11:19 AM

    Hi,

    I see that your columns are overlapping and does not correctly display on a mobile device, may I suggest you to use the widget Mobile Responsive. This will automatically display your form properly when viewed on a mobile device.

    Let us know if this helps.

    Thank you.

  • Profile Image

    Answered by slider17 on October 22, 2014 at 12:39 AM

    yup that helps!  :)

     

    one visual problem that still exists is the issue of a 'gap' appearing on the form when viewed on desktop devices.

     

    Please refer to screenshot below

    http://gyazo.com/cb4e429876aae2d589d2921cd608de92

     

    u will see some empty space on the left hand column.  Any idea how to fix this??

  • Profile Image

    Answered by Ben on October 22, 2014 at 08:04 AM

    Hi,

    I am glad to hear that the mobile responsive widget worked for you.

    Now after going back to your jotform it seems to be displayed in both columns for me.

    Do let me know if you have changed the layout or if you are still experiencing the same issue.

    If you are still experiencing the issue, can you please tell us what is the browser that you are using?

    Best Regards,
    Ben

  • Profile Image

    Answered by slider17 on October 22, 2014 at 08:15 AM

    Its supposed to show up as two columns on desktop displays but single column on mobile devices.

    Im using Google Chrome (latest version) on a Win 8.1 system

     

    On the topic of mobile, i've noticed my form displays just like the desktop version on a iPhone.  On my Nexus4 its single column responsive, but on any Iphone device its two column layout.  Any idea why that is??
  • Profile Image
    JotForm Support

    Answered by Charlie on October 22, 2014 at 10:14 AM

    Hi,

    I'm not sure if this workaround is what you are looking for. But you may also try.

    Add this code using Inject Custom CSS or from the Form Designer.

     

    li.form-line.form-line-column {

        width : 350px;

        max-width: 400px;

        margin-left : auto;

        margin-right : auto;

    }

     

    Adjust the width with the value you wanted and it will adjust the sizes of the fields on the two columns. The problem is that the fields are widgets, it has a different width as a widget and as an input field. 

     

    With the iPhone size display, not sure what's the problem with it but we'll take a close look.

    I hope this helps. Let us know if this works.

    Thank you.

     

  • Profile Image

    Answered by slider17 on October 24, 2014 at 06:31 AM

    tried the above, still getting big gaps in my form, both it step 1 and step 2.  

  • Profile Image
    JotForm Support

    Answered by Charlie on October 24, 2014 at 08:34 AM

    Hi,

    I think I misunderstood you. I thought we are talking about the columns gap but it was the gap between the date and address widget. 

    I tried making some workarounds but unfortunately nothing worked properly. I'll escalate this to our dev/technical team so that they can take a closer look. You will receive a notification when we have an update regarding this

    I also made a separate thread about the iPhone display issue of the form so we can have a different focus on each thread. You can find it here: http://www.jotform.com/answers/448575 

    Regards