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 to achieve Two Column Form Layout

    Asked by prav9884 on December 02, 2015 at 03:09 PM
    Also please share on how to achieve two column 2 column layout
    column two column form column column layout
  • Profile Image
    JotForm Support

    Answered by Kiran on December 02, 2015 at 04:24 PM

    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.

  • Profile Image

    Answered by prav9884 on December 03, 2015 at 12:22 PM

    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

  • Profile Image
    JotForm Support

    Answered by Kiran on December 03, 2015 at 01:09 PM

    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!

  • Profile Image

    Answered by prav9884 on December 03, 2015 at 01:16 PM

    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.

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 03, 2015 at 02:43 PM

    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.

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 06, 2015 at 06:27 AM

    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.