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 do I get the Configurable List to match the rest of the forms style and break the

    Asked by GTAUSTIN on April 19, 2017 at 01:20 PM

    I am trying to match the Configurable List widget style to the rest of the forms style (i.e. the box sizes, font size, color). Also, I am trying to get this form to break the lines apart like they would be if each of the inputs were separate. I am redoing this form, and I am just trying to get it to look nicer and have less.

     

    All the information is pertaining to page two of the document (student information).

     

    Basically what I have below.

     

    I do know that things like the phone number look different, but I am ok with that.

    Page URL:
    https://form.jotform.us/22005915237144

  • Profile Image

    Answered by GTAUSTIN on April 19, 2017 at 01:41 PM
  • Profile Image
    JotForm Support

    Answered by Nik_C on April 19, 2017 at 02:51 PM

    1) Do you want to have the configurable list widget's width match the below fields or 2) you want fields from the configurable list to be each in a new row? 

    The second one is a bit tricky but it is doable.

    Please let us know.

    Also, we didn't receive your second reply, if you can please resend it.

    Thank you!

  • Profile Image

    Answered by GTAUSTIN on April 19, 2017 at 03:56 PM

    The second one you mentioned is what I want it to look like.

     

     

     

    My second response was added to my original question, but I didnt know how to delete the initial second response, so I just left it blank.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 19, 2017 at 06:36 PM

    Could you please try injecting the following CSS code to your widget? 

    /* Custom injected CSS code*/

    th {

        display: none;

    }

     

    tr {

        display: block;

    }

     

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

     

        font-weight: bold;

     

        display: block;

     

    }

     

    /* Naming the fields*/

     

    td.col1:before {

        content:"Student Name";

    }

     

    td.col2:before {

        content:"Grade";

    }

     

    td.col3:before {

        content:"Birthday";

    }

     

    td.col4:before {

        content:"Student Phone #";

    }

     

    td.col5:before {

        content:"Student Email";

    }

     

     

    /* Positioning the fields in multiple columns*/

     

    td {

        display: block;

    }

    To inject the code to the widget you only need to click on the wizard icon and go to the Custom CSS tab: 

    Then you need to disable the fields label for the widget: 

    Here's a sample form about how this will work: https://form.jotformpro.com/71087092101952 

    Hope this helps.