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 bring text to a new line on checkboxes?

    Asked by fieryfoods on May 11, 2015 at 03:29 PM

    Hi, my form has a number of checkboxes with very long descriptions (see screenshot). I'd like break up the text into separate lines so that each selection stays within 1 or 2 columns. For instance, instead of:

    Pickled Product (pickled peppers, olives, pickles, etc.)

    I want it to look like this:

    Pickled Product (pickled peppers,
    olives, pickles, etc.)

     

    Can you help?

     

    Page URL:
    https://secure.jotform.us/fieryfoods/2016-Scovie-Awards-Entry-Form

    checkboxes JotForm uploads product custom CSS
  • Profile Image
    JotForm Support

    Answered by Boris on May 11, 2015 at 03:59 PM

    Hello.

    Please try injecting the following custom CSS to your form:

    .form-line-column > .form-input-wide {
        max-width: 20em;
        white-space: normal;
    }

    You can also add this code by editing your form and going to the Designer:

    And in the designer, please paste it into the textbox under the CSS tab:

    Your form should now display like this:

    Please try it out and let us know how it goes. We'd love to help you get your form looking just the way you want it to, and we will be glad to assist.

  • Profile Image

    Answered by fieryfoods on May 11, 2015 at 04:32 PM

    Excellent that worked perfectly thank you!

    Now I'm wondering if columns can made to be flexible? For instance, can I move Fresh Salsa directly under the last option (Non-Alcoholic) of Beverages-Hot & Spicy and Hot Sauce under the last option (White Cheese)?

  • Profile Image
    JotForm Support

    Answered by Boris on May 11, 2015 at 04:53 PM

    I'm afraid that it isn't possible at the moment with JotForm forms. It is not something that can be done by custom CSS styling either.

    However, you can achieve this by getting the full source code of your form, and manually adding a JQuery scripting library to the form's code, together with some custom JavaScript code.

    This technical thread might be useful to read if you'd like to implement it yourself: http://stackoverflow.com/questions/11434756/css-float-elements-with-unequal-heights-left-and-up-in-grid

    Please note that if you are using source code of your form, you will have to re-export the form's source every time after making any changes in our Form Builder.

    Please let us know if you need any help, and we will be glad to assist you.

  • Profile Image

    Answered by fieryfoods on May 11, 2015 at 04:57 PM

    Thanks for the tips! Your support forum is always quick and helpful.