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 do I increase the spacing between check boxes/radio buttons so that when they are inline I can fit longer labels

    Asked by RosscoNZ on November 30, 2013 at 06:45 PM

    if I have labels that are longer than approximately 16 characters, they return to the next line and I would like them to not do that and be on the one line. Is this possible.

    eg: (check box) Vehicle Service Center   (check box) Diesel Injection Center

    Screenshot
    checkbox spacing horizontal spacing radio buttons
  • Profile Image
    JotForm Support

    Answered by abajan on November 30, 2013 at 07:28 PM

    Thanks for asking. Yes, it's possible. Injecting the following CSS will target the specific field shown in your screenshot:

    #id_17 .form-checkbox-item {
    width: 200px;
    }

    To apply the same width to all of the form's checkbox items, change the rule to just

    .form-checkbox-item {
    width: 200px;
    }

    Please see this guide on how to find the ID of a field.

    Here's a useful resource for learning CSS but let us know if you need further assistance with this.

  • Profile Image

    Answered by RosscoNZ on November 30, 2013 at 07:40 PM

    Awesome, that fixed it.

    Thank you very much for the prompt reply, you guys rock!

    Cheers, Ross.

  • Profile Image
    JotForm Support

    Answered by abajan on November 30, 2013 at 07:45 PM

    We appreciate your compliment, Ross.

    Incidentally, a slight correction to my reply: To apply the 200 pixel width to all checkbox items, inject the following

    .form-checkbox-item {
    width: 200px !important;
    }

    The !important keyword is necessary in the more general rule because classes don't carry as much weight as IDs. CSS can be tricky! lol


    Cheers back at you :)