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.
How do I improve the layout on mobile devices?Asked by tkeener on January 27, 2015 at 03:04 PM
We have responsive websites and when I set up the JotForm as responsive the phone number is now on two lines when you are using it on an iPad or the computer. The iPad layout does not look nice.
Secondly, on the iPhone the form only shows about two lines of the form and a user must tab it's way through the form. That is a problem because that is not an intuitive function. We are getting complaints from customers.
I would appreciate any ideas to make this easier for clients. We use these forms on multiple responsive sites.
layout Mobile phone number
I adjusted the iPad problem but the phone number is still on two lines.
I presume that you no longer need to tap to open the jotform further then?
In regards to the phone number field, I can only see 1 field using the mask on it for phone numbers, I can not see any phone field on that jotform that is with 2 inputs.
In either way I would recommend slightly changing the jotform iframe code:
<iframe id="JotFormIFrame" frameborder="0" width="300" height="150" scrolling="no" src="https://secure.jotformpro.com/form/33635732343958" style="width: 100%; height: 1085px; border: medium none;"></iframe>
<iframe id="JotFormIFrame" frameborder="0" width="300" scrolling="no" src="https://secure.jotformpro.com/form/33635732343958" style="width: 100%; height: 1085px; border: medium none; min-height: 1100px;"></iframe>
I have marked with red color the part that I have removed since it instructs the iframe (in early stages) to be 150px in height.
The bold part in the blue code will make sure that it is fully shown on mobile devices and the PC browsers when viewed (based on what I saw when going to the page you have given us the link for).
Thanks so much for such a quick response. Instead of using the Quick Tools for the phone number I used the Text Box and set a mask for the phone. That seemed to work well. I also saw that I could adjust themin-height to whatever the form needed.
You're welcome! So, it seems that your problem is now resolved. Please confirm or let us know if you need more help about it.
Thank you very much!
Yes, the problem is solved. Thank you again.