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 we align varios fields so that they form nice columns?

    Asked by laundrycare on July 31, 2015 at 08:57 AM

    I'm creating an inventory form and there are several fields that I need to line up. I believe I have to do something to the CSS coding but I know nothing about coding. Can someone help me with my inventory form: http://form.jotformpro.com/form/52097174034958

    Page URL:

  • Profile Image

    Answered by Boris on July 31, 2015 at 12:24 PM

    I have checked your form, and it looks like you do have it showing in each line for separate items.

    You can position fields the way that you did, by right-clicking on them in the Form Builder and using Shrink, with Merge to above line and Move to a new line. You can see more in our guides on How to Position Fields in JotForm, as well as Field Positioning.

    As I do see that your conditions might not have been set up correctly, I have cloned your form into my account and re-created them. You can see this form here:


    If that is how you wanted to set up your conditions, feel free to clone it back into your account by following our guide on How to Clone an Existing Form from a URL. Please let us know if you need any further assistance, and we will be happy to help.

  • Profile Image

    Answered by Danielle  on July 31, 2015 at 12:51 PM

    Thanks Boris - yes I found a work-around. 

    I changed the positioning of the Radio Button options and for whatever reason that lined up my "Quantity F" and "Quantity M" Text boxes. The only instance it didn't work is when I remove the "Male" radio button option from the field - then it doesn't line up again with the other lines - ugh!

  • Profile Image

    Answered by Ben on July 31, 2015 at 02:04 PM

    Great to hear that.

    Now in regards to that specific field, we can help you with that.

    If I understood you correctly, you do not want it on your form, but it is there because you need it for alignment?

    If so, you can leave it to take the space on the form, just not be visible, by adding this CSS code:

    .form-line span.form-checkbox-item:last-child {
        visibility: hidden;

    On the other hand, if you do not want it to take the space, you can add the following instead:

    .form-line span.form-checkbox-item:last-child {
        display: none;

    but this would be as if you had removed it manually.

    Now if you want only specific fields to be removed, do let us know and we can help you with the CSS code that.

    Oh and the CSS above, you can see how to use it on your jotform by following the steps here: Inject Custom CSS Codes just make sure to always add the given CSS code at the bottom - under all the other CSS code in that same field.

  • Profile Image

    Answered by Danielle on July 31, 2015 at 02:20 PM

    Thank you Ben - your support Team is amazing @ jot form! 

    The issue I have is for the line "Bras" - as you know, males don't wear bras so I don't need that radio option, or "Quantity M". I just need the Female radio option and "Quantity F". If I remove the Male option - the "Quantity F" is no longer aligned with the other "Quantity F" boxes. Does this makes sense? For lack of better term, it smushes the Quantity F box with the radio button. 

  • Profile Image
    JotForm Support

    Answered by Mike on July 31, 2015 at 03:42 PM

    On behalf of my colleagues, you are welcome :)

    The "Bras" field has the id_45, so we can use it in our CSS.

    Try adding the next CSS in order to hide the "Male" option.

    #id_45 span.form-checkbox-item:last-child {
    visibility: hidden;

    Thank you.