Change form warning colors

  • Alster
    Asked on March 26, 2024 at 7:33 AM

    How can I edit the warning colors?

    Jotform Thread 13276981 Screenshot
  • Sonnyfer JotForm Support
    Replied on March 26, 2024 at 8:25 AM

    Hi Golan,

    Thanks for reaching out to JotForm Support. I'm sorry you're having trouble with your form's warning colors. I checked your last form but it seems to be deleted already. Anyhow, you can inject the below CSS Code to your other forms to change the Warning Message's background and text color:

    /* Change form warning message background and text color -#13276981 */
    .form-error-message {
      background-color: blue ! important;
    }
    span.error-navigation-message {
      color: black ! important;
    }
    /* Code ends here */

    It's really easy to do, let me show you how:

    1. In Form Builder, click on the paint roller icon.A screenshot of Form Builder with an arrow pointing to the paint roller icon    to open Form Designer Screenshot 20 Screenshot 20
    2. Select the Styles tab.A screenshot of Form Builder with an arrow pointing to the Styles tab in the Form Designer pane Screenshot 31 Screenshot 31
    3. Scroll down through Inject Custom CSS and enter your CSS code.The Inject Custom CSS field in Jotform Form Builder Screenshot 42 Screenshot 42


    That's it. Here's what it should look like afterward:

    Change form warning colors Image 1 Screenshot 53

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


  • Alster
    Replied on March 26, 2024 at 8:58 AM

    tnx! how can I change the big red color thats sorrounds the whole question?

  • Afzal JotForm Support
    Replied on March 26, 2024 at 9:09 AM

    Hi Golan,

    Thanks for getting back to us. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same problem. This can be fixed by adding custom CSS to your form. Check out the steps below to see how it's done:

    • Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
    • Under the Styles tab, paste the code below into the Inject Custom CSS area.
    /*To change error bg color - 13276981*/
    .form-line-error {
        background-color: white !important;
    }

    I have set the color to white however you can change it to your preferred color by changing the name of the color in the above code. This code will work on any of your form. Here's what the result will look like:

    Change form warning colors Image 1 Screenshot 20

    Here's the cloned version of the form that you can test.

    Please give it a try and let us know how it goes. 

  • Alster
    Replied on March 26, 2024 at 10:27 AM

    its working now, thank you!