How to Change colors within fields/widgets

  • Profile Image
    JPro22
    Asked on November 03, 2021 at 03:32 PM

    Hello Jotform, I have a form where I need to edit some colors of fields that I can't figure out how to do. I have all the hex codes I need for the colors, I would just need to know where to input it/if it requires a CSS code to change. I have included a link to a PDF (because I couldn't attach a PDF or multiple files) with detailed questions about each specific screenshot of the form: https://drive.google.com/file/d/1ih6dFqxQpF3hlC4RlpjgF2jVtYWfvKws/view?usp=sharing

    Let me know if you need any more clarification!

  • Profile Image
    Saeed_K
    Answered on November 03, 2021 at 05:25 PM

    Hi there,

    Thank for contacting support!

    Please paste the following code under Inject Custom CSS option:

    .form-address-table {

     background-color: orange;

    }

    .form-checkbox+ :before{

    background-color: orange !important;

    }

    1635974481_6182fd5195b74_

    Paste the following code under Custom CSS option given in widget:

    label.checkbox {

      background-color: white;

      color: blue;

    }

    1635974582_6182fdb680138_

    Below are useful guides for injecting custom css code:

    https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    https://www.jotform.com/help/428-how-to-inject-css-codes-to-widgets/#:~:text=Open%20the%20Widget%20Settings%20by,button%20to%20save%20your%20changes.

    I hope that explains it. Please contact us again if we can help in any way.

  • Profile Image
    JPro22
    Answered on November 04, 2021 at 11:51 AM

    Thank you very much! I really appreciate it. I've decided that the grey highlight looks better than the orange for the personal information field so I left that as is. But now I know the code to change it!

    Two more small things: The single selection (circular) options are still grey, can I have the code to change the circles to orange? On Page 6 the terms and conditions acceptance text is grey and not very visible. Can I have the code to change the text to white?

  • Profile Image
    Saeed_K
    Answered on November 04, 2021 at 12:52 PM

    Hi there,

    Thank you for coming back to us!

    Please paste the following code under Inject Custom CSS feature.

    .form-radio+span div:after {

     background-color: orange;

    }


    1636043214_618409ceea4bf_

    Paste the following code under Custom CSS option given in widget:

    #_label {

     color: white !important;

    }

    1636044644_61840f64b8c2e_1636044534_61840ef62f3b1_

    I hope that explains it. Please contact us again if we can help in any way.

  • Profile Image
    JPro22
    Answered on November 04, 2021 at 01:13 PM

    Thank you again. You have been incredibly helpful. I am still noticing a small issue with the single choice options though. While they look orange in the builder, they are grey in preview and publish mode. (I think the grey selection highlight might be overriding the orange.) Is there any way to fix that? If not, I'm sure we'll be ok, as the form still looks cohesive with the grey.

  • Profile Image
    Saeed_K
    Answered on November 04, 2021 at 02:34 PM

    Happy to help you!

    Please give it a try under  Inject Custom CSS option:

    .form-radio+span div:after {

     background-color: orange !important;

    }

    I await your response.

  • Profile Image
    JPro22
    Answered on November 04, 2021 at 02:44 PM

    Thank you. I tried that but it is not working. The image below is how it looks while making the selection and then after the selection is made.1636051450_618429fa597c9_Picture1.png

  • Profile Image
    Saeed_K
    Answered on November 04, 2021 at 03:18 PM

    Please paste the code given below under Inject Custom CSS:

    .form-line-active {

    background-color: orange !important;

    }

    When the field is checked it will appear with orange background.

    1636053362_61843172b6aa9_

  • Profile Image
    JPro22
    Answered on November 04, 2021 at 03:39 PM

    Ok, I really like the orange highlight. It's great. Not to bother you even more, but for the single choice questions (not the checkbox ones) with an "other" option where registrants can write their own text, the highlight doesn't show. Should I put the same CSS code into those widgets or is it a new code I need? Screenshot below for context.

    1636054781_618436fd71303_Screenshot 2021

  • Profile Image
    Saeed_K
    Answered on November 04, 2021 at 04:00 PM

    Hi,

    You can paste the following code:

    .form-radio+label:before {

     background-color: orange !important;

    }

    1636056004_61843bc41777a_

    Please let us know if there is anything else we can help you with, we are always here to provide support

  • Profile Image
    JPro22
    Answered on November 04, 2021 at 04:25 PM

    Thanks a million! I am going to review the form with my supervisor. I will keep the thread open just in case we need to make other changes.

    You have made this process incredibly smooth and I appreciate all your help.