How to achieve Two Column Form Layout

Also please share on how to achieve two column 2 column layout

I understand that you want to make your JotForm to display in two columns. You can enable Form Columns option from Form Designer and set the number of columns that you want to display.

Hope this information helps. If you are referring to something different, please let us know. We will be happy to help.

Hi,

 

I want to make a better looking configurable list from by exiting configurable list. can you please suggest me the best option.

 

Am not looking to split a jotform into two columns

 

Thanks,

Praveen N

Do you mean to say that you are looking for a different option other than Configurable list that can be displayed in 2 columns? As I check your JotForm, I see that your requirement is to have multiple fields with different input fields and the best bet is Configurable list widget. However, if you have fixed number of rows to be collected, you may need to have the fields manually added to your JotForm for each field on each row individually.

Let me see if I can find anything helpful in this regard and get back to you later. If I misunderstood your query, please let us know. We will be happy to assist you further. 

Thanks!

Since the headers are too big. I would like the questions split across so that it will be very clear for view.

 

I would need this in configurable list.

I am not sure if this is possible to achieve with configurable list. I will check with my colleague Kiran to see if he found solution for your issue. 

I will also check if I can find possible solution.

I have worked on your issue and I was able to change look of your configurable list to look more user friendly. This is how my new Configurable list looks like.

If you want that your Configurable list looks like this replace your Configurable list Custom CSS code with this code:

.checkbox, .radio {

margin: 3px 0;

min-width: 70px;

}

input[type="text"]

{

 width:300px;

}

.dateContainer

{

 width:300px;

}

#list > tbody > tr:first-child {

    display: none;

}

/*Label names*/

td.col1:before {

     content: "What substance are you abusing (alcohol or name of drug)";

     display: block;    

}

td.col2:before {

     content: "How often are you using this substance? (everyday, every other day, once per week, etc.)";

     display: block;

}

td.col3:before {

     content: "How long have you been using this substance for? (if this is a relapse, only state the current length of time during this relapse period-i.e. days, weeks, months, years, etc)";

width:600px;

     display: block;

}

td.col4:before {

     content: "What route do you use? (oral, IV, snorting, smoking, etc.)";

width:300px;

     display: block;

}

td.col5:before {

     content: "How much of the drug or alcohol were you using?";

     display: block;

}

td.col6:before {

     width:288px;

     content: "Date and time of last usage (if opiate please be as accurate as possible)*";

     display: block;

}

td.col8:before {

     content: "Is this your drug of choice*";

     display: block;

}

/*Positioning*/

td.col3 {

     float: left;

     left: -611px;

     position: relative;

     top: 55px;

}

td.col4 {

     float: left;

     left: -611px;

     position: relative;

     top: 55px;

}

td.col5 {

     float: left;

     left: -305px;

     position: relative;

     top: 16px;

}

td.col6 {

     float: left;

     left: -611px!important;

     position: relative;

     top: 25px;

}

td.col7 {

     float: left;

     left: -631px!important;

     position: relative;

     top: 25px;

     padding-top:30px;

}

td.col8 {

     float: left;

     left: -611px!important;

     position: relative;

     top: 25px;

     width: 100px;

}

button.remove {

    position: relative;

    z-index: 9;

    left: -586px;

}

tr {

     height: 270px;

}

Here is my demo form: https://form.jotform.com/53392454822963? 

Feel free to clone it.

Hope this will help. Let us know if you need further assistance.