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

    Using Configurable List widget; need to separate data into separate lines

    Asked by karenhassell on May 27, 2017 at 07:09 PM

    I am using the configurable list to add multiple presenters to a conference proposal form.  

     

    As you can see, the list extends beyond the edge of the form and looks silly.

     

    What I would like:  title, first name and last name on one line.  Name of Institution on a second line.  Role on a third line.  Email on a fourth line.

     

    Is this possible?

     

    Thanks in advance for your help.

    Page URL:
    https://www.jotform.com/build/71428737392161/widget/add/533946093c1ad0<br/>c45d000070

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 27, 2017 at 07:29 PM

    Yes, it is possible to display the widget in multiple lines, but some CSS code is required. Please, allow me some time to work on the needed CSS code, I will get back to you as soon as possible. 

  • Profile Image

    Answered by karenhassell on May 27, 2017 at 08:43 PM
    thank you so much!
    KH
    Karen Hassell, Ed.D.
    Educational Consultant
    karen.hassell@icloud.com
    254-722-7550
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 27, 2017 at 09:00 PM

    Please, inject this code to your widget, that will display the widget fields like you want: 

    th {

        display: none;

    }

     

    tr {

        display: block;

    }

     

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

     

        font-weight: bold;

     

        display: block;

     

    }

     

    /* Naming the fields*/

     

    td.col1:before {

        content:"Title";

    }

     

    td.col2:before {

        content:"First Name";

    }

     

    td.col3:before {

        content:"Last Name";

    }

     

    td.col4:before {

        content:"Institution";

    }

     

    td.col5:before {

        content:"Role";

    }

     

    td.col6:before {

        content:"Email";

    }

     

    td.col7:before {

        content:"Confirm email";

    }

     

     

    /* Positioning the fields in multiple columns*/

     

     

    td.col4 {

        display: block;

        position: relative;

        top: 3px !important;

        margin-left: 0px;

    }

     

     

     

    td.col5 {

        display: block;

        position: relative;

        top: 3px !important;

        margin-left: 0px;

    }

     

    td.col6 {

        display: block;

        position: relative;

        top: 2px !important;

        margin-left: 0px;

    }

     

    td.col7 {

        display: block;

        position: relative;

        top: -38px !important;

        margin-left: 127px;

    }

     

    td.col8 {

        display: block;

        position: relative;

        top: -62px !important;

        margin-left: 255px;

    }

     

    button.add {

        position: relative;

        margin-top: -45px;

        display: block;

    }

    To add the code to the widget, simply click on the field, wizard icon and paste the code under the Custom CSS tab: 

    Here's my cloned form of yours where you can see how the code will work: https://form.jotformpro.com/71467501018956 

    Hope this helps. 

  • Profile Image

    Answered by karenhassell on May 27, 2017 at 10:43 PM
    This is EXACTLY what I wanted. Thank so very much!
    Please pass along my thanks!
    KH
    Karen Hassell, Ed.D.
    Educational Consultant
    karen.hassell@icloud.com
    254-722-7550
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 27, 2017 at 11:13 PM

    You're most welcome Karen. 

    I'm glad to know it worked as you wanted.

    Please, if there is anything else that we can assist you, do let us know, we will be happy to help.