How do I get the Configurable List to match the rest of the forms style and break the

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.

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!

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.

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.