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 can I place multiple fields in the same row

    Asked by Sopiva on October 16, 2014 at 07: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

    Screenshot
    same row same problem excel different print
  • Profile Image

    Answered by Ben 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.

    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