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

    Align radio button or checkbox labels to left and next to each other when wrapped

    Asked by Benflips on July 08, 2016 at 10:51 PM

    With radio buttons (or checkboxes for that matter), if the text of the option goes beyond a given length it wraps to a new line.

    Can this new line be 'in line' with the text above it, or must is always wrap underneath the actual radio button itself? 

    I have a large number of these options and it doesn't look very 'clean'

    radio buttons checkboxes length
  • Profile Image
    JotForm Support

    Answered by Welvin on July 09, 2016 at 07:45 AM

    Yes, simply inject the following custom CSS codes to your form:

    .form-radio-item label, .form-checkbox-item label {

    white-space: normal;

    display: block;

    left: 14px;

    top: -14px;

    position: relative;

    }

    Please follow the steps from this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by Benflips on July 11, 2016 at 02:16 AM

    This is mostly great, thank you.

    I applied the css, and it has definitely resulted in the effect I was after, however it also appears to put some extra space (padding maybe? - not sure) between the lines of the radio buttons or checkboxes.

    It also appears to have affected a number of the button checkbox widgets I had set up with multiple buttons in multiple columns - one or two of these columns have now wrapped to a second line...

    Any advice you can give would be appreciated.

  • Profile Image
    JotForm Support

    Answered by Welvin on July 11, 2016 at 05:39 AM

    Some of the radio button/checkbox fields don't have a label so it appears to have a space between them. You can adjust the spacing by adding the following custom CSS codes to your form:

    .form-radio-item, .form-checkbox-item {

    margin-bottom: -10px;

    }

    You can adjust the value until you'll get the desired space between each item.

    The Button Checkboxes widget is not using the same class selector so the custom CSS codes shouldn't affect them. The columns are working as far as I could see it: