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 to create three columned form

    Asked by iconadmin 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

     

     

    Page URL:
    https://www.jotform.com/?formID=70084440579257

  • Profile Image
    JotForm Support

    Answered by BJoanna 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

    Answered by iconadmin 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
    JotForm Support

    Answered by EltonCris 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!