How to create three columned form

Hello there,

How do I get this form to form three columns?

it looks okay when im working on it but when I view it the boxes aren't all lined up.

I would like guest name, phone number and email all on one line.  I guess there is some sort of code to arrange columns but I don't know it.

Best,

Jennifer

I have cloned your form and I noticed that mentioned fields are shown in same line inside of Form Builder, but that on live form additional filed are also placed in same line.

Easiest way to resolve this issue is to reduce width of your form. Currently width is set to 750px. If you reduce the width of the form to 700px your issue should be resolved. You can change the width of the form inside of Form Designer.

Here is my demo form: https://form.jotform.com/70086434868970 

Feel free to clone it.

Hope this will help. Let us know if you need further assistance.

Hello.

this form is looking pretty good now, but there is one view where it is pretty awful:

https://www.jotform.com/?formID=70084440579257#design

Is there any way to lock it so it shrinks according to the device? I would like it to always have all three (guest name/phone/email address) in one row.

Best,

Jennifer

That's possible. If you want the 3 columns to retain on mobile view, inject this CSS codes to your form.

@media screen and (max-width:480px){

.form-col-1,

.form-col-2,

.form-col-3 {

    width: 33.3% !important;

    padding:10px 4px;

}

.form-label{font-weight:normal;}

[data-type='control_dropdown'] .form-input-wide {width: 100%;}

li#id_67 {width: 100% !important;}

li#id_20, li#id_21 {width: 50% !important;}

}

Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

This is how your form would look like on mobile afterwards:

Hope this helps!