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

    Configurable List: How to display the widget properly in mobile devices?

    Asked by ccach on November 29, 2016 at 04:40 PM

    Hi there,


    I have two forms with configurable lists.  Both have the setting checked for Make Responsive. 

    http://ccach.org/tutoring/
    http://ccach.org/afroquiz/afroquiz-registration/

    For both forms don't seem to work well on a phone vertical layout.  The configurable list doesn't fold under and goes off the right side of the screen and for some reason the full name, phone and email fields have very long text fields that go off the right hand side of the screen.

     

    Can you provide some assistance on how I can get these forms to look nicer on a mobile device?

    Thanks

    Tanya

    Page URL:
    http://ccach.org/tutoring/

    two forms configurable name layout Mobile
  • Profile Image
    JotForm Support

    Answered by Kevin_G on November 29, 2016 at 08:22 PM

    After checking the links you have provided I can see what you're referring to, but this does happen even when you're loading the direct link to your form. 

    To display the widget in multiple lines then you will need to inject this code: 

      th {

            display: none;

        }

     

        tr {

            display: block;

        }

     

        .col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before,.col7:before,.col8:before {

     

            font-weight: bold;

     

            display: block;

     

        }

     

        /* Naming the fields*/

     

        td.col1:before {

            content:"Student's Full Name";

        }

     

        td.col2:before {

            content:"Student's Age";

        }

     

        td.col3:before {

            content:"Student's Grade";

        }

     

        /* Positioning the fields in multiple columns*/

     

        td.col3 {

            display: block;

            position: relative;

            top: 3px !important;

            margin-left: 0px;

        }    

    Since the widgets seem similar then the code should work for both, and to inject the code click on the widget and then on the wizard icon: 

    Go to the Custom CSS tab and paste the given code there: 

    Here's the link to my cloned form where I have applied the code: https://www.jotform.com/63337966791976 

    If you have any question, please let us know.