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

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

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.

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

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

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.

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.

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

https://form.jotform.com/53505612516147

Thanks,

Sydney

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.