How to get multiple choices to show inline with questions?

  • Profile Image
    GLtenn2019
    Asked on August 25, 2019 at 06: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?

    Screenshot
  • Profile Image
    GLtenn2019
    Answered on August 28, 2019 at 03: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?

  • Profile Image
    Welvin
    Answered on August 28, 2019 at 04: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. 

  • Profile Image
    Vanessa_T
    Answered on August 28, 2019 at 09: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

    #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.gif