What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    CAN I CHANGE THE COLOR OF THE WARNING AND ERRORS?

    Asked by stcreacionesweb on July 21, 2011 at 02:27 PM

    PLEASE. I NEED CHANGE THE COLOR OF WARNINGS...CAN I DO THAT..

  • Profile Image

    Answered by DanielGriffin on July 21, 2011 at 02:34 PM

    Hi there,

    It is possible to modify the error message somewhat by injecting your own CSS.  The affected classes will depend on the type of input that the error is for.  So for example a basic form with an input box would have the following error classes

    form-text validate[required] form-validation-error
    form-error-message
    form-error-arrow
    form-line form-line-error

    If you need others, I recommend installing firebug and then going to your form to cause errors.  Check the source with firebug and you will see all of the currently active classes.  Then just start injecting your own CSS in the form builder to override these.

    Here is some information on injecting CSS:

    http://www.jotform.com/answers/tag/Inject%20Custom%20CSS

    Here is a link to firebug:

    http://getfirebug.com/

    If you need help with any specific error please let me know and I'll do my best to walk you through it.

    Thanks,

    Daniel

  • Profile Image
    JotForm Support

    Answered by abajan on July 21, 2011 at 03:31 PM

    Hi stcreacionesweb

    Below is the full rundown of injected CSS (at least that I know of) related to all of the elements associated with errors and warnings:

    (Just copy the code below - including the comments - and inject it into your form. From there you can experiment with the colors until you find what suits the color scheme of the form)

    /* background of entire field */
    .form-line-error {
    background:none repeat scroll 0 0;
    }

    /* background of "This field is required." message */
    .form-error-message {
    background:#FFA !important;
    }

    /* color of arrow attached to the above message which points to the unfilled field */
    .form-error-arrow-inner {
    border-color: transparent transparent #FFA;
    }

    /* the actual input */
    .form-validation-error {
    background-color:#CFC; /* the background */
    border:1px solid green; /* the border */
    -moz-box-shadow:0 0 2px green; /* the shadow effect on the border */
    -webkit-box-shadow: 0 0 2px green; /* the shadow effect on the border */
    box-shadow: 0 0 2px green; /* the shadow effect on the border */
    }


    Alternatively, you can remove all indications that a field is required:

    /* If input, textarea and select all have a background other than white, the
    border declaration is necessary for consistent style. Borders of inputs (textboxes)
    automatically take on these values but not textareas and selects.
    Both the first rule, and first declaration in the ".form-validation-error" rule are
    unnecessary if the background of inputs is white. The various colors in the rules
    will need to be changed to suit the color scheme. */

    input,textarea,select {
    background-color: #F9FFB9;
    border:2px inset #EEE;
    }
    .form-required {
    color: transparent;
    }
    .form-line-error {
    background:none repeat scroll 0 0;
    }
    .form-error-message {
    display: none !important;
    }
    .form-validation-error {
    border:2px inset #EEE;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    }

    If you need clarification on this or would like to know something else about our product, please feel free to enquire on the forum. Our support team would be glad to offer assistance where we can.

    Thanks.


    ~ Wayne