How can I create the following in JotForm?

  • presenceacademy
    Asked on August 21, 2017 at 3:12 AM
    Jotform Thread 1228274 Screenshot
  • gizem
    Replied on August 21, 2017 at 5: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.

    How can I create the following in JotForm? Image 1 Screenshot 20

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

  • presenceacademy
    Replied 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

  • Jan
    Replied on August 21, 2017 at 1:25 PM

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

    How can I create the following in JotForm? Image 1 Screenshot 30

    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:

    How can I create the following in JotForm? Image 2 Screenshot 41

    Hope that helps. Thank you.

  • presenceacademy
    Replied on August 23, 2017 at 3: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:

    How can I create the following in JotForm? Image 1 Screenshot 20

    What should I do?

  • Chriistian Jotform Support
    Replied on August 23, 2017 at 3: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.