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

    Configurable list -drop down menu: Make the various drop down selections different colors

    Asked by guineapigme on December 30, 2014 at 10:12 PM

    Is it possible in a a configurable list with a drop down menu, to make the various drop down selections different colors?

     

    That is, have the background for option 1 , red, option 2, green, etc ... ?

    configurable list list color
  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 31, 2014 at 06:09 AM

    Hello guineapigme,

    Yes it is possible to change the color of the option values of the configurable list drop down fields. Please add the following custom css code in your widget and that should solve your problem:

    option:nth-child(2) {

    color: red !important;

    }

    option:nth-child(3) {

    color: green;

    }

    option:nth-child(4) {

    color: blue;

    }

    The output of the above css code will be as displayed in the screenshot below:

     

    Please check the screenshot below on how to add custom css code in configurable list widget:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by guineapigme on December 31, 2014 at 05:25 PM

    Hi there,

     

    I have added this code to my widget but I don't see the change in either the preview or the live form (via an edit link).

     

    What am I doing wrong?

     

    Thanks,


    Deborah

  • Profile Image
    JotForm Support

    Answered by jonathan on December 31, 2014 at 07:49 PM

    Hi Deborah,

    I could already see it working on your jotform http://www.jotform.us/form/43600351273142

     

    clicking the selection list provides multi colored lists.

    Please try clearing your browser's cache also, perhaps old cache were causing the anomaly.

    Please let us know if you need further assistance.

    Thanks.

     

  • Profile Image

    Answered by guineapigme on January 03, 2015 at 02:14 AM

    I am a little worried about deleting the list and re-entering the data to see if this works  But shouldn't I see the colors also in the preview?   

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 03, 2015 at 05:19 AM

    Hello guineapigme,

    Well you do not have to delete the drop down options and add it again. The changes are already reflecting in your form. Please check the screenshot below:

    The changes are also being displayed in the editor as well. Please check the screenshot below:

     

    Have you embedded your form in your web page where it is not being displayed. Please share the web page URL and we will take a look.

    What my colleague meant is to clear the browser cache. You do not have to edit/delete the drop down options. Please go ahead and clear your browser cache and see if that solves your problem. The following guide should help you in clearing browser cache:  http://www.wikihow.com/Clear-Your-Browser's-Cache 

    Thank you!

  • Profile Image

    Answered by guineapigme on January 03, 2015 at 06:48 PM

    Firstly,

    I have cleared my browser cache and even the cache clearing button in account settings, but I certainly do not see any changes in Preview as you are seeing.   See below for screenshot in preview.

     

    Here is a link to my embedded form (if you need credentials for this you can login to the site with login: wixtest@gmail.com password: password

    Here s the link the edit-link version of the form - the one I keep for continual updates (I do not want this data destroyed).

     

    http://blacksav.wix.com/redthistlesubversion#!sandbox-2/c1tt6

     

    Here is the link from within the website to a blank version of the form.

    http://submit.jotform.us/form.php?formID=43600351273142&sid=295676165081767239&mode=edit

     

  • Profile Image
    JotForm Support

    Answered by jonathan on January 03, 2015 at 08:52 PM

    Hi Deborah,

    I can see the working version even on your live website page.

     

    using the edit link also shows the multi-colored list

    http://submit.jotform.us/form.php?formID=43600351273142&sid=295676165081767239&mode=edit

     

    is there any other browser or computer you can also use to just to check how it goes? 

    Perhaps your current browser has cache issue and was not showing recent version of web pages.

     

    Please continue updating us if issue persist.

    Thanks.

     

     

     

     

  • Profile Image

    Answered by guineapigme on January 03, 2015 at 09:08 PM

    Ok, I just tried looking at the live website page/form with Safari (I had been using Chrome).  And reviewing the form.   No change for me.   Always black and white

     

    I see all other changes I make to the form.   Just not this one.

    ======

    On my son's computer, on the website, when he touches the pull down menu, I see the colored choices.  However, when he releases the tab, the colors do not persist on the chosen menu item.   It reverts to black and white.

     

    The same thing happens in the preview version of the jotform.  He is in Chrome as well.

    When it is working, I would expect the colors to persist.

     

    These are very odd discrepancies.   

     

    Deborah

       

  • Profile Image
    JotForm Support

    Answered by jonathan on January 03, 2015 at 10:16 PM

     I see the colored choices.  However, when he releases the tab, the colors do not persist on the chosen menu item.   It reverts to black and white.

    There must be a misunderstanding on the requirements. It is correct that ONLY the pull-down menu is multi colored. The chosen selection will revert back to black color.

    It would require a different CSS code for the colored selection to persist.

    We will check what CSS code we can use to achieve that.

    We will update you about this as soon as we can.

     

    Thanks.

     

  • Profile Image

    Answered by guineapigme on January 04, 2015 at 02:23 AM

    Ok.  Well then, from what you say.  I believe things work as expected on another person's computer.  Just not mine.   This is very perturbing as I can't understand why the color will not show on my form.   

     

    I would like a persistent color for the choice, though.   Is there some way to debug why my color choices don't show for me under any browser?  What could be negating this such that I can't even see it in the preview and other people can.  I don't know what else to do.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 04, 2015 at 04:14 AM

    Hello guineapigme,

    This is very strange but I still believe the issue is related to cache. I would suggest you to perform the following steps:

    1. Logout from your JotForm account.

    2. Clear your browser cache.

    3. Restart your internet router.

    4. Click on the following URL and then sign in to your JotForm account:  http://www.jotform.com/?noCDN=true

    Hope this Helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by guineapigme on January 12, 2015 at 01:48 PM

    No further luck on seeing this work properly for me.  Can you at least tell me what CSS code I would need to have persistent color changes on the drop down categories?


    Thanks,

    Deborah

  • Profile Image
    JotForm Support

    Answered by jonathan on January 12, 2015 at 02:11 PM

    Hi Deborah,

    The CSS code used was mentioned at the beginning of this thread.

    This one

    option:nth-child(2) {

    color: red !important;

    }

    option:nth-child(3) {

    color: green;

    }

    option:nth-child(4) {

    color: blue;

    }

     

    Thanks.