How to create two column form

  • kivanck
    Asked on November 8, 2014 at 6:16 AM

    Hi !

     

    I want to create an easy form with 2 columns. First column will have 3 textboxes and the second column will be only a text area. 

    You can see the form I want to create below. 

    How can I do that ? I tried to shrink the textxboxes but still couldnt manage to put the text area next to them.

    Jotform Thread 456197 Screenshot
  • Jan
    Replied on November 8, 2014 at 8:38 AM

    Hi,

    As of right now, there is no way to create 2 columns on the form editor itself (without using custom css) if I based it on the screenshot you posted. I can see that you did a research on how to create 2 columns in JotForm which leads you in trying the shrink method. 

    There is a work around but I would like to inform you that it might not be stable or you cannot customize the form properly once you use this method. 

    Sample Form: http://www.jotformpro.com/form/43112658360955

    How to create two column form Image 1 Screenshot 50

    Please refer to these guides for shrinking and moving a field to a new line. Form Field Positioning (http://www.jotform.com/help/90-Form-Field-Positioning)

     

    Steps:

    1. Create a Blank Form.

    2. Insert "Text Box (Name)" then shrink it.

    3. Insert "Text Area (Message)" then shrink it then merge it to above line.

    4. Insert "Text Box (Email)" then shrink it and then move to a new line.

    5. Insert "Text Box (Phone)" then shrink it and move to a new line.

    6. Now you need to inject custom css in order for the fields to align. First, you need to get the ID of the Text Area field. Click the "Properties" icon and select "Show Properties". At the bottom part, you will field details ID.

     How to create two column form Image 2 Screenshot 61 How to create two column form Image 3 Screenshot 72

    7. After getting the ID, you then inject the custom CSS code targeting that specific element.

    #input_8 {

    float: right;

    position: absolute;

    height: 190px;

    }

     

    How to create two column form Image 4 Screenshot 83
    Take note that you can adjust the height depending on the alignment of the other column.

     

    Based on the screenshot you posted, you can achieve that by applying this method together with hiding labels and putting hint text (placeholder).

     

    I hope this helps regarding your two column issue. Thank you.