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.
Form not displaying correctly on mobile devicesAsked by slider17 on October 21, 2014 at 06:21 AM
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??
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.
Really the only changes made were the column setting to 2
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.
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
u will see some empty space on the left hand column. Any idea how to fix this??
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?
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 systemOn 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??
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.
width : 350px;
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.
tried the above, still getting big gaps in my form, both it step 1 and step 2.
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