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 position radio buttons horizontally next to the label instead of vertically?

    Asked by Gill2008 on December 24, 2013 at 02:55 AM

    How can I position radio buttons horizontally next to the question instead of vertically?



    This is a re-post of a comment on Quick overview of form fields

    radio buttons labels next to horizontal alignment spread columns
  • Profile Image
    JotForm Support

    Answered by abajan on December 24, 2013 at 05:37 AM

    Thanks for asking. Please do the following:

    Click the radio button field and then click Spread Columns and select the number of columns desired:


    If you selected three (3) columns, after clicking OK, the result should be as above.

  • Profile Image
    JotForm Support

    Answered by abajan on December 24, 2013 at 06:42 AM

    My apologies, you said "... next to the question [label] instead of vertically".

    Well, once the label alignment is set to Left
     


    and the label width for all of the form's fields is narrow enough

    and the form as a whole is wide enough,


    and the field is not in a shrunken state

    the label will be displayed to the left of the first row of radio buttons. However, it's possible to use injected CSS to override the settings made via the buttons in the form builder toolbar. For instance, a rule similar to the following would shrink the width of the main label and the radio button labels of all radio groups in the form:

    .form-label-left,
    .form-radio-item {
    width: 100px !important;
    }

    But due to the contextual nature of CSS we would need to know the specific radio group to which the rule is to be applied.

    If you need clarification on anything above or would like assistance with the injected CSS, we'd be happy to help.