colors for different fields

  • Profile Image
    formazioneasllecce
    Asked on May 20, 2013 at 03:46 PM

    I can use different colors for different fields in the same form?

  • Profile Image
    Morian
    Answered on May 20, 2013 at 03:50 PM

    Are you referring to the labels for each field? If you are, then yes you could.

    Each label has its own unique ID so you would simply need to inject custom CSS code to specify the color you want for each.

     

  • Profile Image
    Morian
    Answered on May 20, 2013 at 03:55 PM

    For example, if I inject the ff css code

    For Label

    #label_3{color:#2FE01B;}

    #label_5{color:#221BE0;}

     

    For the actual text box

    #first_3{background-color:#2FE01B;}

    #last_3{background-color:#221BE0;}

     

    This will be the result

     

  • Profile Image
    formazioneasllecce
    Answered on May 20, 2013 at 04:02 PM

    OK. from where I access to change the color codes?

  • Profile Image
    Morian
    Answered on May 20, 2013 at 04:05 PM

    Are you able to provide me with the link to your form?

    That way I can help you identify the ID for each label and then I'll walk you through the process of injecting custom CSS code.

  • Profile Image
    rlombardo
    Answered on May 20, 2013 at 04:09 PM
  • Profile Image
    Morian
    Answered on May 20, 2013 at 04:11 PM

    Thank you for the link. May I ask which part of that specifically would you like to change the color?

  • Profile Image
    formazioneasllecce
    Answered on May 20, 2013 at 04:23 PM
     
    test any field
  • Profile Image
    Morian
    Answered on May 20, 2013 at 04:29 PM

    Alright. I cloned your form and edited the color of "Referral Source". Its ID is label_40, so this is the CSS code I injected: 

    #label_40 {color:#4EA8F2;}

     

    and this is the result

     

  • Profile Image
    Morian
    Answered on May 20, 2013 at 04:46 PM

    To identify the ID of each element of the form, whether it be the label or the textbox or button, etc simply right-click and then click on View Source.

    This is how I found out that the ID for "Referral Source" in the sample above is label_40

     

    If you'd like to know how to inject custom CSS code, this is a very helpful tutorial

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image
    formazioneasllecce
    Answered on May 20, 2013 at 05:01 PM

    thanks