How do I improve the layout on mobile devices?

  • Profile Image
    tkeener
    Asked 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.

    Thanks.

  • Profile Image
    tkeener
    Answered on January 27, 2015 at 03:37 PM

    I adjusted the iPad problem but the phone number is still on two lines.

  • Profile Image
    Ben
    Answered on January 27, 2015 at 05:22 PM

    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:

    From this:

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

    to this:

    <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).

  • Profile Image
    tkeener
    Answered on January 27, 2015 at 09:10 PM

    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.

    Thanks again.

  • Profile Image
    Welvin
    Answered on January 28, 2015 at 08:23 AM

    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!

  • Profile Image
    tkeener
    Answered on January 28, 2015 at 02:58 PM

    Yes, the problem is solved. Thank you again.