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

    Visual Multi Select: Add background colors on selected options

    Asked by zugfrig78 on September 02, 2015 at 10:30 AM
    *3*  Finally, assuming the above is doable, can i color code the choices in the right colum similar to how it has been done in this widget (but only fo rthe choice on the right once chose) 
  • Profile Image
    JotForm Support

    Answered by EltonCris on September 02, 2015 at 10:51 AM

    You can implement color coding by injecting the following CSS codes on the multi select widget settings under CSS tab.

    li.ms-elem-selection:nth-child(-n+18) {

        background: #008000 !important;

        color: #FFF;

    }

    li.ms-elem-selection:nth-child(n+19) {

        background: #FF0 !important;

    }

     

    Here's how:

    Result:

  • Profile Image

    Answered by zugfrig78 on September 02, 2015 at 09:20 PM

    Hello, 

     

     

    i have found a  problem with this .....

     

     

     

    this works perfectly if i choose the names in order from top to bottom from the list on the left, however, if the user picks them in a different order (which they will) then they show up as scatterered colours because the rule seems to allocated the colour to a name on the left side before it moves and displays that colour on the right....

     

     

    what i was hoping to achieve is that the first 18 names chosen (any name from the list of 42 names on the left) should show up on the right as being GREEN until the full 18 are chosen, 

     

    then the next 6 names (19-24) should show up as YELLOW

     

    and any names chosen after that should be RED

     

     

    the reason for this is to show a user when they have achieved the first 18, then showing them that they have the chosen their 6 back ups (yellow) and finally showing any names after that (in RED) indicating they have chosen too many (more than 24)....

     

     

    take that last name on the list (ZAC SMITH) for example.. if i click his name he shows on the right as RED, when is should be green as he is one of the first 18 chosen

     

     

     

     

     

     

    secondly, 

     

    when i submit it i get this

     

    Answer

    Adam Trealor, Andrew Embley, Aaron Sandilands, Patrick Dangerfield,  Andrew Swallow, Angus Monfries, Ben Hudson, Brent Reilly, Brett Goodes, Callan Ward, Clinton Jones, Courtney Dempsey, Craig Bird, Dale Thomas, Daniel Cross, Daniel Jackson, Danny Stanley, David Rodan, Dennis Armfield, Dyson Heppell, Garrick Ibbotson, Harry O'Brien, Ian Callinan, Jack Steven, Jake Neade, James Podsiadly, Jimmy Toumpas

     

    Is there anyway to make it send back a vertical list like this

     

     

    Answer

     

    Adam Trealor

    Andrew Embley

    Aaron Sandilands

    Patrick Dangerfield

    Andrew Swallow

    Angus Monfries

    Ben Hudson

    Brent Reilly

    Brett Goodes

    Callan Ward

    Clinton Jones

    Courtney Dempsey

    Craig Bird

    Dale Thomas

    Daniel Cross

    Daniel Jackson

    Danny Stanley

    David Rodan

    Dennis Armfield

    Dyson Heppell

    Garrick Ibbotson

    Harry O'Brien

    Ian Callinan

    Jack Steven

    Jake Neade

    James Podsiadly

    Jimmy Toumpas

     

     

     

  • Profile Image
    JotForm Support

    Answered by Kiran on September 03, 2015 at 01:20 AM

    Unfortunately, it seems to be not possible since the list is being displayed in the order they are placed on the right side as well. However, I see that there is a feature request already sent by our colleague to our backend from your original thread on the selection order and list on separated lines in the email result.

    We cannot provide you any ETA at the moment on the implementation of the feature. Once we have any update on this feature, you'll be notified through the thread.

    Thank you!!