How can I create the following in JotForm?

  • Profile Image
    presenceacademy
    Asked on August 21, 2017 at 03:12 AM
  • Profile Image
    gizem
    Answered on August 21, 2017 at 05:06 AM

    I can suggest you 3 form elements for doing this:


    1. You can use single choice element and change it's column numbers from element properties option section.
    2. You can use scale rating element and change number of the rating choice's from element properties option section again. 
    3. Lastly, you can use input table element.

    If you have any further questions, please let us know.

  • Profile Image
    presenceacademy
    Answered on August 21, 2017 at 12:01 PM

    Hm. Hi, thanks for your reply. Is there any way I can add the color bar in between the question label and the options. Looking forward to learn some way. Thanks

  • Profile Image
    Jan
    Answered on August 21, 2017 at 01:25 PM

    I suggest you hide the form labels using CSS and then use the "Text" tool as a label.

    You can just move the bar image above the radio options and below the "Text" tool.

    You can hide the label using this CSS code:

    .form-label-top, .form-label-left, .form-label-right {
    display: none;
    }

    Here's a guide on https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.

  • Profile Image
    presenceacademy
    Answered on August 23, 2017 at 03:01 AM

    I have made the form. It is looking perfect on laptop. But it is not mobile responsive. This is how it looks on my mobile:

    What should I do?

  • Profile Image
    Chriistian
    Answered on August 23, 2017 at 03:40 AM

    Regarding the mobile responsive issue on your form, I have moved it to a separate thread. We will address your concern in this link: https://www.jotform.com/answers/1230332.