How to get multiple choices to show inline with questions?

  • GLtenn2019
    Asked on August 25, 2019 at 6:10 PM

    How to get "yes" and "no" multiple choice to show inline with questions? is it possible to get it to look like this?

    Jotform Thread 1939611 Screenshot
  • GLtenn2019
    Replied on August 28, 2019 at 3:24 PM

    Hello Thanks for the response. I like the first option, however is there a way to get the yes and no closer together and not so far apart?

  • Welvin Support Team Lead
    Replied on August 28, 2019 at 4:47 PM

    You can do that with custom CSS Codes. We can help you get the custom CSS codes in the form. However, you seem to have changed the style of the form fields.

    Do you want it this way and just style it to be on the same line?

    Do you also want to apply this styling to all single/multiple choices fields? 

    Please clarify. 

  • Vanessa_T
    Replied on August 28, 2019 at 9:06 PM

    I've cloned your Working Organizer form and made the changes. I've used the following CSS to change the layout for the radio buttons with Yes/No option.

    #label_74 {

      float: left;

    }

    #cid_74 {

      float: left;

      width: min-content;

    }

    #cid_74 .form-single-column {

      width: 200px;

    }

    #cid_74 .form-radio-item {

      clear: none !important;

      width: 100px;

      margin: 0px;

    }

    Since the questions with Yes/No option are just ordinary Single Choice fields, in order to apply the changes to all "Yes/No" questions, please find the field's corresponding IDs then add it to the CSS.

    How-to-Find-Field-IDs-and-Names

    Sample, if you want to add "Can dependent be claimed by someone else?", look for it's unique ID number, which is 59, then add to the CSS above in the format like below.

    1567040448The Easiest Online Form Builde Screenshot 10

    #label_74, #label_59 {

      float: left;

    }

    #cid_74, #cid_59 {

      float: left;

      width: min-content;

    }

    #cid_74 .form-single-column

    , #cid_59 .form-single-column {

      width: 200px;

    }

    #cid_74 .form-radio-item

    , #cid_59 .form-radio-item {

      clear: none !important;

      width: 100px;

      margin: 0px;

    }

    Please repeat the steps for all the "Yes/No" questions. Don't forget the comma everytime you add a new field.

    Cloned Form: https://form.jotform.com/92397577015971

    1567040724A Screenshot 21