Form fields not displaying properly in mobile

  • virtualearth
    Asked on April 13, 2015 at 12:43 AM

    Hi,

    We've tried everything to hold the fields on an iPhone browser so they display the same as when viewed in a desktop web browser.

    The name and date fields stretch across the screen destroying the look, feel and usability.

    When we set the field widths in either the date or full name tools the fields fold under each other. If we don't set them they spread across the screen.


    Any suggestions would be warmly welcomed.

    Thank you

    Kind regards

    Brad

    Jotform Thread 551051 Screenshot
  • virtualearth
    Replied on April 13, 2015 at 4:34 AM

    Change to responsive yes. Fixed the horizontal issue with Full Name Tool however added a large margin/padding. The date tool has day and month dropping down.

     

    Form fields not displaying properly in mobile Image 1 Screenshot 20

     

  • Jan
    Replied on April 13, 2015 at 12:13 PM

    Hi there,

    I cloned your form and I was able to see the issue. Please try the following steps:

    1. On the Form Builder, please "Shrink" the wedding date and date for booking fields.

    Form fields not displaying properly in mobile Image 1 Screenshot 40

    2. Go to Form Designer.

    Form fields not displaying properly in mobile Image 2 Screenshot 51

    3. Enable the "Make this form responsive" option.

    Form fields not displaying properly in mobile Image 3 Screenshot 62

    4. Save the changes and then please test it. 

     

    Hope this works. Thank you.

  • virtualearth
    Replied on April 13, 2015 at 4:04 PM

    Thank you, appreciate your input.

    Your recommendation works fine in portrait however the date tool falls apart in landscape view and most of the form aligns left of screen rather than centre.

    Kind regards

    Brad

     

  • raul
    Replied on April 13, 2015 at 5:15 PM

    I've created a cloned version of your form and made some changes in the custom CSS code that it had (I removed the custom width settings for the fields and set them all using the form designer) and this is how it looks like in my phone.

    Portrait

    Form fields not displaying properly in mobile Image 1 Screenshot 30

    Landscape

    Form fields not displaying properly in mobile Image 2 Screenshot 41

    You can find my version here: http://form.jotformpro.com/form/51026587401955 feel free to clone it to your account if you want to inspect further the changes I made.

  • virtualearth
    Replied on April 13, 2015 at 7:01 PM

    Thank you Raul,

    Is there anyway we can contain the fields to the width of the form? Form is centered and set at width: 350px, max-width: 350px however in landscape, on an iPhone, the fields spread across the whole screen.

    Kind regards

    Brad

    PS: I also need to reduce the default padding at the top of the form

  • Ashwin JotForm Support
    Replied on April 14, 2015 at 1:28 AM

    Hello Brad,

    I did check my colleagues's form in my iPhone device and it is displayed correctly. Please check the screenshot below:

    Form fields not displaying properly in mobile Image 1 Screenshot 30

     

    Form fields not displaying properly in mobile Image 2 Screenshot 41

    Responsive form should adjust the width of the form fields based on the screen size. If you do not want the fields to be displayed in full width, you will have to disabled the "Responsive Form" property of your form. Please take a look at the following cloned form and see if this works fine:  http://form.jotformpro.com/form/51030507523947? 

    Thank you!

     

  • virtualearth
    Replied on April 14, 2015 at 9:58 AM

    Hi guys,

    The URL we are using (https://secure.jotformpro.com/form/51027081993961) is showing two forms in our application. On the web it is one form however for some reason which we haven't been able to find it is pulling two exact same forms.

    You can download the app on a mobile at: http://weddings.shareableapps.com

    In the hamburger menu go to Book a Consultation. The app is still in dev so it may load a little slow. Just close the app and reopen if it lags.

    Kind regards

     

    Brad

  • Ashwin JotForm Support
    Replied on April 14, 2015 at 12:15 PM

    Hello Brad,

    Since we cannot answer multiple questions in one thread, I have moved your latest question to a new thread and you will be answered here:  http://www.jotform.com/answers/552259 

    Thank you!