Change Certain Text Font Color

  • ChewyHR
    Asked on September 20, 2018 at 3:05 PM

    I only want to change the font color for certain text in my form, but it's changing for the entire form. How do I accomplish this? I tried looking up forum questions, but this functionality seems to be broken on your support site.

  • Adrian
    Replied on September 20, 2018 at 3:54 PM

    You can change the color for a certain text on your form by injecting Custom CSS to your form.

    How-to-Inject-Custom-CSS-Codes

    This requires basic HTML and CSS knowledge but we can help you out.

    Let us know what part of the text you want to change and we will provide the CSS that you will need to add.

  • ChewyHR
    Replied on September 20, 2018 at 4:00 PM

    Thanks - I managed to change it to red. Now I need to just bold the FIRST sublabel in the header of my form "Clone of FC Hourly - PAW Form (HRIS)". How do I do this?

  • Adrian
    Replied on September 20, 2018 at 4:17 PM

    If you want to bold the red text in your form, add the following CSS.

    .form-subHeader {
      font-weight: bold !important;
    }

    You can also target a single form element by its ID.

    Related Help Article: How-to-Find-Field-IDs-and-Names


  • ChewyHR
    Replied on September 21, 2018 at 9:47 AM

    Thank you Adrian. How do I restrict the bold and red font to ONLY the first sub header?


  • Richie JotForm Support
    Replied on September 21, 2018 at 11:14 AM

    You may target that sub-header directly by getting the unique ID.

    Guide:https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    You can also use your browser's dev tool to check for the correct field id.

    Guide:https://support.airtable.com/hc/en-us/articles/232313848-How-to-open-the-developer-console

    Here is  a sample screen cast for Firefox.

    Change Certain Text Font Color Image 1 Screenshot 30

    Now you can view the proper ID to be used to edit the CSS.

    Change Certain Text Font Color Image 2 Screenshot 41

    From the screenshot, the proper CSS ID to target the specific html field would be #header_3{}

    Hope this information helps.

    Thank you.

  • ChewyHR
    Replied on September 22, 2018 at 9:06 AM

    No that did not help. I can't find which subheader ID it is. Also, I want the header above the one you selected.

  • Adrian
    Replied on September 22, 2018 at 12:03 PM

    The ID of the first subheader is subHeader_1.

    1537632117s1 Screenshot 10

    So, I have changed the CSS for the subheaders in your form to:

    #subHeader_1 {
      color:#FF0000;
      font-weight: bold;
    }

    Now, only the first subheader is red and bold.

  • ChewyHR
    Replied on September 24, 2018 at 12:45 PM

    Perfect - thank you so much Adrian!