How can I place multiple fields in the same row

  • Sopiva
    Asked on October 16, 2014 at 7:12 AM

    Hello!

    I have a problem. I need to do a form with a lot of different kinds of information (see image attached). I was wondering is it possible to add two or three different questions on the same row, as is on the excel on the image attached.

    I tried to find out but with no success. This is crucial as we need to be able to print the form on one A4 paper.

    Thanks!

     

    -Erkki

    Jotform Thread 444153 Screenshot
  • Ben
    Replied on October 16, 2014 at 11:16 AM

    Hi Erkki,

    Yes that is possible to do. Now depending on the exact approach that you would like to take, there are several ways to place the fields in multiple columns.

    The top part of the screenshot seems to be set as text and field.

    You can do this by shrinking the textbox widget.

    How can I place multiple fields in the same row Image 1 Screenshot 20

    I had already shrunk the first field and am about to do this for the second one as well (just click the gear wheel or right click on the widget and select "Shrink").

    Now For that middle part we would need to use some CSS to help us.

    First please take a look here what I have done as a demonstration: http://form.jotformpro.com/form/42884284018965

    You can of course clone it and inspect or use it if you'd like.

    Now the CSS that formats the checkboxes as on the screenshot which we inject into the jotform:

    li[data-type="control_checkbox"] > label.form-label.form-label-left {
        width: 100px !important;
    }
    li[data-type="control_checkbox"]
    {
        padding-left:5px;
        padding-right:5px;
    }
    .form-single-column > span.clearfix {
        display: none;
    }
    .form-single-column > span.form-checkbox-item {
        clear: none !important;
        float: left;
        margin-right: 10px;
    }
    .form-single-column > span.form-checkbox-item > label {
        left: -20px;
        position: relative;
        top: -20px;
    }

    It will style all new checkboxes in the same manner (but we can turn it off for others if needed).

    Now at the end, I have added a very powerful widget called Configurable List and you can see here how to use it.

    Now there are many other ways that we can manipulate fields in the jotform using the CSS and the options available in the JotForm Builder so please feel free to add what you would like to have on your jotform and try to make it as close as possible to what you want and just let us know if you need any assistance along the way.

    I do hope that you will like the sample and that you will be able to use it and do let us know if you have any further questions.

    Best Regards,
    Ben