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 on mobile devices?

    Asked by supportiveschools on March 02, 2016 at 05:18 PM

    Hi, 

    I'm trying to fit my configurable list on the form. I've seen other do so through the CSS codes but I can't figure out how to apply them to the data I'm collecting. Please help! 

     

    Thank you!

    Alison 

    Page URL:
    https://form.jotform.com/supportiveschools/CSS_PGC_Certification

    configurable list configurable CSS codes collecting
  • Profile Image
    JotForm Support

    Answered by jonathan on March 02, 2016 at 06:59 PM

    Hi Alison,

    I see this is your form http://www.jotform.us/form/60035283749155 with the Configurable List.

    Allow me more time to work on it. I'll get back to you shortly.

    Thanks.

     

  • Profile Image
    JotForm Support

    Answered by jonathan on March 02, 2016 at 07:58 PM

    Hi Alison,

    I just realised that applying the custom CSS code to split the Configurable List widget into 2 will break the layout of the widget itself. This can result to unintended behaviour for the widget on different browsers.

    For  the meantime, I was able to test on 2 options that might work for you.

    #1 Make the form width wider -- max at 880px.

    You can alter this using the Form Designer.

     

    it should look like this demo form https://www.jotform.com/60617972354966

     

    OR

    #2 Use 2 Configurable list widget. Break down the fields/questions to 2 group.

    like this form: https://form.jotform.com/60617613866966

     

    Please let us know on your feedback on the 2 options I have provided for now. 

    I will still work on the CSS option, but I need more time to compose the needed CSS code for it.

    Thanks.

     

     

     

  • Profile Image

    Answered by supportiveschools on March 03, 2016 at 08:41 AM

    Hi Johnathan,

    Thanks so much for your help. Option 1 would be the only one that would work for us as we need the peer leader's names to be attached to the rest of the information about them. If we change the width of the survey to 880px, is it still accessible via mobile? 

    Thanks! 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 03, 2016 at 10:22 AM

    The options to set the width to 880px will only display the widget properly on that resolution, if you load the form in a lowest resolution the widget will not be displayed properly, this is because it is loaded in a different manner than the normal fields (Text Boxes, Radio Buttons, Check Boxes). 

    If you want to display it properly on mobile devices, you will need to follow the second workaround, please test loading the forms that my colleague shared you, it will help you to see the result with accuracy. 

     

  • Profile Image

    Answered by supportiveschools on March 03, 2016 at 10:44 AM

    Hi Kevin,

    Unfortunately, the 2nd work around isn't an option for us. We need all of the information to be input at one time before loading the next "line" of the form. I've seen other forms where they were able to move questions to show up below other questions for the configurable list (See here: https://www.jotform.com/answers/632350-How-can-we-change-the-layout-of-our-configurable-list-to-have-it-all-fit-the-form-width). Is there a way to do this for our form? 

    Thank you!

    Alison 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 03, 2016 at 11:22 AM

    Yes, that is possible to do, basically you will need to split the widget and show it in different lines and the data still will be added as it would be only in one line, you will not have to add two widgets. 

    You only need to copy this CSS code and inject it in your form:

    td.col5 {

        display: block;

        position: relative;

        top: 20px !important;

        margin-left: -1px;

    }

    td.col6 {

        display: block;

        position: relative;

        top: -41px !important;

        margin-left: 190px;

    }

    td.col7 {

        display: block;

        position: relative;

        top: -100px !important;

        margin-left: 400px;

    }

    td.col8 {

        display: block;

        position: relative;

        top: -100px !important;

        margin-left: 0px;

    }

    th {

        display: none;

    }

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

        font-weight: bold;

        display: block;

    }

    td.col1:before {

        content:"First Name";

    }

    td.col2:before {

        content:"Last Name";

    }

    td.col3:before {

        content:"Email";

    }

    td.col4:before {

        content:"Phone Number";

    }

    td.col5:before {

        content:"Attended summer retreat";

    }

    td.col6:before {

        content:"Adhered to Code of Ethics";

    }

    td.col7:before {

        content:"Earned B or higher in class";

    }

    td.col8:before {

        content:"Completed 2 or more of the following";

    }

    .d {

    display:none;

    }

    th {

        display: none;

    }

    tr {

    display: block;

    }

    You do not need to change anything else, follow this guide to inject it: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Take a look on my cloned form: https://form.jotform.com/60624381988971

    Feel free to clone it.

    Hope this helps.

  • Profile Image

    Answered by supportiveschools on March 03, 2016 at 11:30 AM

    Works perfectly! Thanks so much for your help! 

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 03, 2016 at 11:47 AM

    Great, you're welcome. 

    Do let us know if you have more questions or need further assistance, we will be glad to help you.