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 create two column form

    Asked by kivanck 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.

    Screenshot
    2 column form 2 column JotForm uploads shrink two columns absolute merge move
  • Profile Image
    JotForm Support

    Answered by Jan 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.