CSS: How to change the color of a short text field

I need to create a graphic (see below). I already have text boxes that provide "score range", "rating", "risk level". I just need to associate a color with it.

Green=Excellent

Light green=Good

Yellow=Fair

Red=Catastrophic

Example:

Hi Jonathan,

Thanks for reaching out to Jotform Support. Let me help you with that:

To add a color-associated field in PDF Editor based on your score range, rating, and risk level, you can use the Text Field element and customize the text color manually to match your color scheme (Green=Excellent, Light green=Good, Yellow=Fair, Red=Catastrophic).

Here’s how to do it:

1. Open your form’s PDF document in PDF Editor.
2. Add a Text element where you want to display the rating or risk level.
3. Insert the form fields (score range, rating, risk level) using the Form Fields option in the Text editor.
4. Manually format the text color in the Text element to correspond with your color scheme for each rating or risk level.
5. Save your changes and preview the PDF to ensure the colors display correctly.

Unfortunately, automatic color changes based on field values are not supported directly in PDF Editor, so manual color formatting per text element is the way to go.

Give it a try and let us know how it goes.

Best regards,
Jotform Support

No that's not it Podo, its dynamic based on selection.

Hi Jonathan,

For dynamic color changes in PDF Editor based on selections like rating or risk level, this feature isn't natively supported in PDF Editor. You can use conditional logic and custom CSS in the Form Builder to change colors dynamically on the form itself, but PDF Editor does not support dynamic color changes in generated PDFs.

If you want the PDF to reflect colors dynamically, you might need to explore generating PDFs outside Jotform with custom scripts or tools that support conditional formatting.

Let me know if you want guidance on using conditional logic or custom CSS in the form.

Best regards,
Jotform Support

Hi Jonathan,

 You can do this by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/*Changes the background color of a short text field - 30369881*/

[data-css-selector="id_714"] input.form-textbox {

    background-color : #4d995b;

}

[data-css-selector="id_715"] input.form-textbox {

    background-color : #93b865;

}

[data-css-selector="id_717"] input.form-textbox, [data-css-selector="id_721"] input.form-textbox {

    background-color : red;

}

[data-css-selector="id_716"] input.form-textbox {

    background-color : #fbe848;

}

/*Code ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Checkout the screenshot below to see my results:

If that’s not quite what you’re looking for, can you share a bit more info so I can help you better?

Give it a try and let us know how it goes.

if filled, how do i copy the field with the color and data in it?

Hi Jonathan,

When you copy a field’s value using conditions, only the text data is transferred. The CSS styling, like background color, is not included. That’s why you see the value in the new field, but not the color. Can you confirm if that’s what you’re trying to achieve?

If you’d like the color to appear in other places, you’ll need to apply the same CSS rules to the target field. At the moment, there isn’t an option to copy both the value and the color together, so each field will need its own styling.

We’re here if you need anything else along the way.

Damn, ok, its just like photos

Hi Jonathan,

I can see that the corresponding CSS styles have already been applied to your other target field. If you have any other concerns, feel free to reply to this thread.

Let us know if you have any other questions.