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

    What is the best way to make a two column form?

    Asked by sydneybeal on December 18, 2015 at 10:50 AM

    Hi there,

     

    I would like to create a form that has two columns with identical options for two different passengers to fill out their information. I don't want the labels duplicated on each column. I've tried shrinking the text box entries to half the width so I can fit two side by side, but it leaves a rather wide block for the label and takes up a lot of the space. The label then, even when left blank, takes up a very wide portion of the screen. Since Jotform doesn't allow users to change the width of the label, or even use blank spaces "   " as a placeholder, I tried to remove it altogether but all I could do was align it to be on top. Then it shifted the selection about 6 pixels down, misaligning the columns. Both of these issues are apparent in the attached screenshot. I would like to attach a screenshot of the form that I am trying to recreate, so I will embed it into the bottom of this text box because I can't attach more than one image.

     

    Is there a better way to do two columns with Jotform?

     

    Thanks,

    Sydney Beal

     

    Screenshot
    two column two column form Make
  • Profile Image
    JotForm Support

    Answered by Charlie on December 18, 2015 at 12:41 PM

    This is possible by positioning the fields then using custom CSS code to hide the labels and change the widths. Here's an example based from the form you have: https://form.jotform.com/53515359930964 

    Here's a quick demo on how I did mine:

    1. First, I position the fields side by side, I shrink the fields on their left. I also set labels on them so that when you receive them in your submission, they are properly labeled. Here's a guide on how to position the fields: http://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm 

    2. In the Form Designer Tool, I checked "Enable Form Columns" under the "Form Layout" section.

     

    3. I will then look for the field IDs of the form fields positioned at the left, I want to hide the labels and changed their width. Here's a guide on how to get the field IDs: http://www.jotform.com/help/146-How-to-find-Field-IDs-Names. However, for labels, you might need to use the inspect function in your browser. You can follow the screenshot below on how I got mine.

    3.1 View the form in live preview in a new tab. Right click on the label and choose "Inspect". A developer console at the bottom will be displayed. Noticed that you can see the ID of the element there. Example below, the ID is label_9.

    3.2 You can get the direct CSS selector by right clicking on the label element > Copy > Copy Selector. This will give you the exact CSS selector that you needed for the custom CSS code.

     

    4. Now we will use the field IDs or the CSS selectors for the form field labels. This is the custom CSS code that I have:

    #label_9, #label_10 {

        visibility: hidden !important;

        width: 20% !important;

    }

    The custom CSS code above tells the browser that the labels that have IDs "label_9" and "label_10" should be hidden and their width should only be 20% of its original. You can paste the CSS code under the CSS tab in your Form Designer Tool.

     

    5. You can re-use the code that I have, but you'll need to make sure that the CSS selectors for your labels are correct.

     

    The Form Designer Tool can also help you on making the changes in your form, you can follow the guides mentioned here: http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms- 

    For CSS codes, this old guide might still be helpful: http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes 

     

    I hope that helps. Should you need more assistance in your form, please do not hesitate to contact us.

  • Profile Image

    Answered by sydneybeal on December 18, 2015 at 02:50 PM

    Great, looks like something I can handle with your instructions! Thank you so much for your time, Charlie.

  • Profile Image

    Answered by sydneybeal on December 18, 2015 at 04:05 PM

    Charlie, can you see why the entry boxes are touching between "surname" and "given name", "nationality" and "date of birth" and also between "weight" and "physical assistance required"? The spacing isn't consistent.

     

    Also, for "Dietary requirements/restrictions/allergies", how can I get the entry box to line up with the colon of the label?

     

    Thanks,

    Sydney

     

    https://form.jotform.com/53505612516147

  • Profile Image
    JotForm Support

    Answered by jonathan on December 18, 2015 at 05:27 PM

    Hi Sydney,

    I see what you meant on your jotform https://form.jotform.com/53505612516147

     

    those fields that touch each other was due to the top field not having sub-label on it. The display option must have been set to 'none'. Iniitially, I think setting the sub-label to just visibility = 'hidden' should fix it.

    The align of the input box to the label colon can be done using CSS code. Adjusting the top-margin of the input box should make it be positioned bit downard so that it will be aligned to the colon of the label.

    I'll try apply this on a test form. We'll get back to you shortly.

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on December 18, 2015 at 05:47 PM

    Pleaes check my test form   https://form.jotform.com/53516825908968 

    I added this CSS codes

     

    #id_23,#id_28,#id_43,#id_55 {

        padding-top : 10px;

    }

    #input_34,#input_49 {

        margin-top : 10px;

    }

     

    For the Surname... I can also just use paddint-top:10px for the Firstname to add gap in-between them, but I choose to just add sub-label 'Last' for more uniformity. 

    This is optional suggestion. If you do not like it this way, you can then use the CSS code as well.

    Let us know if you need further assistance.

  • Profile Image

    Answered by sydneybeal on December 21, 2015 at 03:26 PM

    Great! I think I have everything lined up how we want it.

    https://form.jotform.com/53505612516147

    Now, when converting to PDF, the font of the labels change and the sublabels are no longer visible (first, middle, etc.), but we'd like them to be visible
    .
    Also, can we change the margins of the PDF so there is not so much white space above the header?
    Finally, is there a way to make the drop down arrows visible on the PDF besides when they are clicked on?

     

    Thanks,

    Sydney

     

  • Profile Image
    JotForm Support

    Answered by jonathan on December 21, 2015 at 04:41 PM

    Hi Sydney,

    Thank you for the confirmation that the original question on this thread is now resolve on your jotform https://form.jotform.com/53505612516147

    For your next questions, we will address them each separately on another thread here

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

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

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

     

    Thanks.