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 can i create form with two columns?

    Asked by saurabh   on February 08, 2014 at 01:26 PM

    Can you please help me to create form like this, I need to have multiple fields on one side and a big text area on another side to insert html stuff..

    i searched a lot but could not find solution

    Thank you !

    create form create two columns height jpg multiple fields
  • Profile Image

    Answered by pinoytech on February 08, 2014 at 03:38 PM

    Hi,

    What you want to achieve in your form is possible using our Shrink feature. Please take a look at this article for more detailed information: http://www.jotform.com/help/90-Form-Field-Positioning

    If you need further assistance, please let us know.

  • Profile Image

    Answered by saurabh  on February 09, 2014 at 01:29 AM

    Thank you very much, I had seen that earlier but it didn't help.

    When I use shrink feature, the next field moves down in new line, for example, here DROP DOWN MENU and TEXT AREA (RIGHT SIDE) remains in line and TEXT AREA (LEFT SIDE) moves in a new line after both the field ends.

     

    I have tried to show what i need in this form - http://form.jotform.me/form/40390493008451

    thank you once again for quick reply

  • Profile Image
    JotForm Support

    Answered by TitusN on February 09, 2014 at 06:05 AM

    Hmmm - You may be right there - that's all depending on where you want to display your form (the HTML element container may be to narrow for the shrinked fields).

    I would suggest the following:

    Option 1

    1. Download your form's source code using this linked guide

    2. Divide the fields you want on the left with the ones you want on the right by using a Div element - or giving them similar HTML classes/Id's - A div element is better - cause you can give it a unique ID. 

    3. Then using either the 'position' rule or 'margin' rules, you can position the Div element or class where you want them to be located.

    I know this is a lot to take in (or might not make sense), so if you have a test form, we can whip up demostration for this.

    Option 2

    You can inject the CSS rules directly onto your form and position each of the fields exactly where you want them by working with the 'margin' rule.

    Again, if you have a test form (cause my ideas may not make sense), we would be glad to assist with this.

    Let us know.

  • Profile Image

    Answered by saurabh  on February 09, 2014 at 06:50 AM

    Thanks a lot, I am sorry but i do not have much knowledge of HTML.

    here is the test form that i've just created, can you please help me with it ?

     

    http://form.jotform.me/form/40392508645457

     

    Thank you !

  • Profile Image
    JotForm Support

    Answered by TitusN on February 09, 2014 at 07:31 AM

    Thank you for the feedback.

    Its Ok, we are here to help with most of the technical stuff.

    I will demostrate using the second Option - Using the 'margin' rule

    To place the fields you created where you indicated, do the following:

    1. Use this guide to learn how to inject CSS rules into your form

    2. Use the following highlighted rules and inject them into your form to move the fields in the left column:

    #id_3,

    #id_5,

    #id_4 { margin-left: 220px; }

    I hope this helps.

    A lot more can be achieved with CSS rules.

    Why not build your form live using our form builder? Let us know when you do, then we will advice on what you can do to create two columns as shown above.

  • Profile Image

    Answered by sausharma11 on February 09, 2014 at 08:01 AM

    Thank you very much Sir!!

    As you have said I have created a form and injected the code.

    here is the form - http://form.jotform.me/form/40392878913465

    I would make all the changes that you suggest in this form

  • Profile Image
    JotForm Support

    Answered by TitusN on February 09, 2014 at 08:12 AM

    You are welcome - let us know when you are done - and how you would like it to look, and we will assist as much as possible. 

  • Profile Image

    Answered by pftfeedback on February 09, 2014 at 08:19 AM

    I have done what you told me to do..

    form is ready over here - http://form.jotform.me/form/40392878913465

  • Profile Image
    JotForm Support

    Answered by TitusN on February 09, 2014 at 08:28 AM

    Go ahead and insert the following CSS rule as shown in my previous responses:

    #id_6 {
    margin-left: 220px;
    }

    After inserting the rule, is this how you want the form to look?

    If not,  You can take a screenshot and upload it, showing us how you would like the form to look using this linked guide.

    Let us know.

  • Profile Image

    Answered by pftfeedback on February 09, 2014 at 08:40 AM
  • Profile Image
    JotForm Support

    Answered by TitusN on February 09, 2014 at 08:49 AM

    Thank you for your response.

    Please delete the previous CSS rules we injected in your form earlier, and use the following instead:

    #id_5 {
    margin-right: 70%;
    }

    #id_2 {
    position: absolute;
    margin-left: 10px;
    }

    #id_5 {
    margin-right: 70%;
    }

    Did that help?

  • Profile Image

    Answered by pftfeedback on February 09, 2014 at 09:07 AM

    That is exactly how i wanted... thank you very very much!!

    one last question.. can you please tell me how can i identify the #id number ?

    i cannot see that in properties of text area

  • Profile Image
    JotForm Support

    Answered by TitusN on February 09, 2014 at 09:26 AM

    No problem!

    Use this linked guide to get your field ID numbers.

    Whatever you see in the properties field, just change it as follows:

    #input_1 becomes #id_1

    Some of the fields (HTML-Text) do not show ID's in the properties field, so you may need to use some tools to identify them, for instance, Using Chrome Dev Tools

    That could be fairly technical, but we are here to assist if you need help identifying any of the fields.

     

  • Profile Image

    Answered by sausharma11 on February 09, 2014 at 10:27 AM

    Thats so nice of you, thank you very much for your help.

     

    Have a Good day !

  • Profile Image

    Answered by sausharma11 on February 09, 2014 at 03:01 PM

    Hello, this is with reference to the same form - http://form.jotform.me/form/40392878913465

    I wanted to have fields as shown in figure below, and i thought i would be able to manage it after learning for 1 field, but i am not able to do it..

    can you please explain me the concept ?

    I would have to add fields as shown in image as and when required. I am able to identify id of HTML - Text and all other fields.

  • Profile Image
    JotForm Support

    Answered by TitusN on February 09, 2014 at 03:22 PM

    It's Kind of hard to explain it in one sitting, but I would start off like this:

    1. CSS (Custom Style Sheets) is used to move and position (and style - colors - shadows and some animation) HTML elements on your browser window.

    2. The two CSS properties that primarily move things around your browser window are

     a. Margin - which is how much you want to push the item in the direction you want. Here's a great place to test this out: http://www.w3schools.com/cSS/css_margin.asp

     b. Position: This is basically what the name says - used to position the HTML element relative to the browser window, Again, you can test it yourself here: http://www.w3schools.com/cssref/pr_class_position.asp

    Now, distances from the right, left, top or bottom are calculated in pixels - for instance 250px

    So the following rule tells your browser to move #id_5  250 pixels to the left, leaving a 250px margin on its right side:

    #id_5 {

    margin-right: 250px;

    }

    You can add rules that move #id_5 away from the top, left or bottom by changing the word 'right' in the CSS rule above.

    The links I gave are a great reasource for learning this - use them.

    Does this help?

    To reduce the turnaround time for your form (and to learn faster :-) ), Just go ahead and build the forms you had in mind without worrying about columns and positioning, then open a new thread here  and ask us for assistance - we are always willing to help.

  • Profile Image

    Answered by sausharma11 on February 10, 2014 at 11:30 AM

    Thanks a lot for your help..
    thank you very very much 

  • Profile Image

    Answered by dominologic on May 21, 2014 at 08:40 PM

    I am wanting to do the exact same thing.  Divide my form in two but I am a bit confused.

    Here is the link to my form:  http://coretechspro.wix.com/coretechproject

     

    what do you reccomend?

     

    I just want all of the same info but the form split evenly into two columns.

     

    Thanks so much!

  • Profile Image
    JotForm Support

    Answered by jonathan on May 21, 2014 at 11:42 PM

    @dominologic

    Hi, I have created a new separate post about your question here

    http://www.jotform.com/answers/381297

    Let us use the new thread for any follow-up questions you might have.

    Thanks.