How to create two column form

  • Profile Image
    kivanck
    Asked on November 08, 2014 at 06: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.

  • Profile Image
    Jan
    Answered on November 08, 2014 at 08: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

    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.

      

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

    #input_8 {

    float: right;

    position: absolute;

    height: 190px;

    }

     


    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.