One Form on two layouts?

  • ipbr21054
    Asked on April 16, 2015 at 10:26 AM

    I currently use a form which shows portrait on the PC, IPAD & IPHONE.

    Is it possible to use the same form but have it show portrait on the IPHONE but landscape for the PC & IPAD.

    The form in question is 50907214204344

     

    Please advise.

  • Charlie
    Replied on April 16, 2015 at 12:40 PM

    Hi,

    I'm not sure what you meant on portrait and landscape. The form actually adjust the width and height of the form fields depending on the where it is being viewed, so if the display of the device has a longer width and a shorter height (landscape orientation), then it will adjust the form fields to match the screen.

    If you are looking on how to make the form mobile responsive, then you can do that by following this guide: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive.

    You can further check the display of the form by "Previewing" it on the Form Designer Tool.

    1. Click the "Designer" in the form builder.

    One Form on two layouts? Image 1 Screenshot 40

    2. Click "Preview Form".

    One Form on two layouts? Image 2 Screenshot 51

    3. You'll see how the form will looked like in different device display.

    One Form on two layouts? Image 3 Screenshot 62

     

    I hope this helps. Do let us know if you need more information on this.

    Kind regards.

  • ipbr21054
    Replied on April 16, 2015 at 1:48 PM

    I have done what you advised above but no change on any item at all.

    Pc iphone & ipad all show vertical/portrait view.

    Please check as by selecting "make it responsive" etc no noticeable change was shown.

     

    I have attached my example for my views as per post title.

    I have edited this form 40122641705342

    When i view this form on iphone i would like to see it like example shown below.

    When i view this form on ipad & pc i would like to see it like example shown below.

    One Form on two layouts? Image 1 Screenshot 20

  • Charlie
    Replied on April 16, 2015 at 3:01 PM

    Hi,

    Upon checking your form: http://www.jotformeu.com/form/40122641705342, I see that you have not enabled the "Make this form responsive" option inside the Form Designer Tool.

    One Form on two layouts? Image 1 Screenshot 30

    Your custom CSS codes also have errors.

    One Form on two layouts? Image 2 Screenshot 41

     

    I've cloned your form and edited it in my end, here it is: http://form.jotformpro.com/form/51055779789979. See if that one works, if it does, you can clone it and make further changes to it. Here's a guide on how to clone a form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Also, may I know if your form is embedded on a website? Or is the form not being mobile responsive even viewing the direct link or the form's URL?

    Kind regards

  • ipbr21054
    Replied on April 16, 2015 at 3:12 PM

    Still no change.

    Looking at the different view "top right of screen" the layout is the same.

    Looking at my example yellow image will the form adjust like example when screen rotated ?

  • Charlie
    Replied on April 16, 2015 at 3:57 PM

    Hi,

    I get it now, there was a little confusion. The form won't change to the Desktop layout because that form is created already like this:

    One Form on two layouts? Image 1 Screenshot 30

     

    It is forced to look like a mobile display, showing all the fields in a tight column and one field per line. You need to manually re-position the form fields, change the width to match the layout for the desktop or larger displays you are looking for.

    These are the things you can do, but I would recommend that you clone your form for testing purposes, or you can clone mine at the bottom:

    1. Find the custom CSS code that you do not like or that will adjust the positions that you need.

    2. OR you can delete the custom CSS code so that you can have a fresh start to design:

    One Form on two layouts? Image 2 Screenshot 41

    3. After you get a reset on the design, you can position the fields. Here's a guide on how to position them: http://www.jotform.com/help/90-Form-Field-Positioning 

    Here's my cloned form without the custom CSS code and made some re-positioning of the fields, you should see how the form changes to mobile view, because here originally the form by default is displayed in a layout for desktop: http://form.jotformpro.com/form/51055779789979 

    I hope this helps.

    Kind regards.