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.


  • Profile Image

    How to put input fileds in column instead in row in mobile browser

    Asked by simonemarotta on February 05, 2017 at 11:21 AM

    Hello!

    I love this widget and I'm using it for a dinner subscription.

    But fields in raw are not responsive for mobile.

    Can you help me?

    Thanks in advance

    Simone

    Page URL:
    https://form.jotformeu.com/simonemarotta/iscrizione-cena-al-buio

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan on February 05, 2017 at 03:25 PM

    You can refer to this user guide also. 

    User guide: https://www.jotform.com/help/311-How-to-make-forms-mobile-responsive

    You should also add the Mobile Responsive widget on your form.

    Ex:

    result:

     

    Let us know if you need further assistance.

     

  • Profile Image

    Answered by simonemarotta on February 05, 2017 at 04:15 PM

    Hello Jonathan,

    thank you very much for answering so rapidly.

    I think the problem is related to the widget called "Configurable list"

    If you click on radio button "si" (yes) option ("vuoi iscrivere altri partecipanti"), you will see that in a normal web page all 4 fields (in 4 different columns) are visible, but on mobile phone it's not the same.

    Example below:

    Could you help me a little bit more?

    Thanks in advance!

    Simone

  • Profile Image
    JotForm Support

    Answered by jonathan on February 05, 2017 at 05:31 PM

    Hi Simone,

    Can you also test my test form https://www.jotform.com/70356255452960 on your mobile browser. 

    When I test nn my mobile browser, the configurable list widget was responsive as intended.

    screenshot:

     

    Let us know how it goes.

  • Profile Image

    Answered by Simone Marotta  on February 05, 2017 at 06:37 PM

    I've tested your link, in works with iphone 6 (safari), but not with samsung s5 (chrome and built-in browser).

  • Profile Image

    Answered by simonemarotta on February 05, 2017 at 06:40 PM

    I've tested your link, in works with iphone 6 (safari), but not with samsung s5 (chrome and built-in browser). 😡

  • Profile Image
    JotForm Support

    Answered by Ian on February 05, 2017 at 11:50 PM

    Please add the following code to CSS of the Configuration list

     

     

     

    tr {

         height: 150px!important;

    }

     

    #list > tbody > tr:first-child {

        display: none;

    }

     

    td.col1:before {

    content: "Nome ";

    display: block;

    }

     

    td.col2:before {

    content: "Cognome ";

    display: block;

    }

     

    td.col3:before {

    content: "E-mail";

    display: block;

    }

     

    td.col4:before {

    content: "Intolleranze ";

    display: block;

    }

     

    .col1 {

    float: left!important; 

    left:20px!important;

    position: relative;

    }

    .col2 {

    float: left!important; 

    left:20px!important;

    position: relative;

    }

     

    .col3 {

    float: left!important; 

    left:20px!important;

    position: relative;

    }

     

     

    .col4 {

    float: left!important; 

    left:20px!important;

    position: relative;

    }

     

    This is how it should look after applying the code.

     

    You can clone the form from : https://form.jotform.com/70358492519969

    Hope this helps.