How can I change the font color of error messages?

  • Profile Image
    unruhfurniture
    Asked on April 25, 2017 at 03:56 PM
    Thanks so much! I think my browser just needed to reset for me to see it.
    Now could you tell me how to change the content and color of the red
    highlighted error text? I attached a screenshot of the text.
    I would like it to say, "Please enter a valid email address" and for that
    text to be in the color: CAB598
    Thanks so much!
  • Profile Image
    david
    Answered on April 25, 2017 at 03:57 PM

    To change the error message font color, add the following code:

    .form-error-message{

    color: #CAB598 !important;

    }

    To change the actual text that is displayed, here is how to do so:

    https://www.jotform.com/help/61-How-to-Change-Form-Warnings

  • Profile Image
    unruhfurniture
    Answered on April 25, 2017 at 04:43 PM
    Thanks for the help. I was able to change the text content, but it is still
    red after I injected the new CSS. Here's what the CSS looks like now and
    attached is a screenshot.
    .supernova, .jotform-form, .form-all {
    background-color : transparent !important;
    }
    #header_5 {
    margin-top : 0px;
    }
    .header-text.httal.htvam {
    background: transparent;
    }
    .form-error-message{
    color: #CAB598 !important;
    }
    .form-line-active {
    background-color: transparent !important;
    }
    .form-line-error {
    background: transparent;
    }
    .form-textbox, .form-textarea, .form-radio-other-input,
    .form-checkbox-other-input, .form-captcha input {
    box-shadow : 0px 0px 0px !important;
    }
    .supernova .form-all, .form-all {
    background-color : none !important;
    }
    .form-all {
    -webkit-border-radius : 10px;
    -moz-border-radius : 10px;
    border-radius : 10px;
    border : 0;
    -webkit-box-shadow : none;
    -moz-box-shadow : none;
    box-shadow : none;
    }
    .supernova .form-all {
    border : 0 !important;
    box-shadow : none !important;
    -moz-box-shadow : none !important;
    -webkit-box-shadow : none !important;
    }
    .form-submit-button {
    background : #CAB598 !important;
    color : #000000 !important;
    border-radius : 10px;
    border : 10;
    height : 54px;
    font-size : 25px !important;
    font-family : 'muli';
    }
    .form-label-top {
    display : none;
    }
    .form-textbox {
    padding-left : 10px;
    font-size : 20px;
    font-family : 'muli';
    border : 0;
    -webkit-border-radius : 12px;
    -moz-border-radius : 12px;
    border-radius : 10px;
    }
    .form-line {
    padding-top : 10;
    padding-bottom : 10;
    margin-top : 0;
    margin-bottom : 0;
    }
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    david
    Answered on April 25, 2017 at 06:05 PM

    The CSS I referenced should change the text color. 

    If you want to change the background color of the warning, add this following:

    .form-error-message{

    background-color: blue !important;

    }

    Change the color to your requirements.

    Here is how the form would look with both added:

    https://form.jotformpro.com/71145229552959

  • Profile Image
    unruhfurniture
    Answered on April 25, 2017 at 06:43 PM
    Thanks!
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...