How to create three columned form

  • Profile Image
    iconadmin
    Asked on January 09, 2017 at 01:28 PM

    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

     

     

  • Profile Image
    BJoanna
    Answered on January 09, 2017 at 04:13 PM

    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.

  • Profile Image
    iconadmin
    Answered on January 11, 2017 at 05:04 PM

    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

  • Profile Image
    EltonCris
    Answered on January 11, 2017 at 10:23 PM

    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!