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

    How to remove the red background and the box from the validation error message?

    Asked by paulsutt on September 24, 2014 at 03:49 AM

    Many thanks for support given  - Im not a coder but I do like how this form builder works. Ive injected css code as given to alter the requested info alerts - however im still not happy with the red..id like to get rid of the reb boxes and outlines so its just black text.

    So id basically like to ger rid of all the red..and just have the alert text in red (no boxes) if that makes sense?

    The code below is what i was given to inject into css which ive done.

    /* Use this selector to change or remove the soft red background */

    .form-line error {
        background-color: transparent;
    }

    /* Use this selector to style the error boxes */

    .form-error-message {
        background-color: green;
        color: white;
    }

    /* If you wish to remove the icon inside the error boxes */

    .form-error-message img {
        display:none;
    }

    /* To use your own custom error icon
    (make sure to remove the default first) */

    .form-error-message:before {
        content:url("http://image.link.here");
        margin-right:5px;
    }

     

    Screenshot
    Form Builder style message css code
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 24, 2014 at 09:53 AM

    Hello paulsutt,

    So id basically like to ger rid of all the red..and just have the alert text in red (no boxes) if that makes sense?

    Please inject the following custom css code in your form which will remove the red color boxes, arrow and the warning image from the error message:

    .form-line-error .form-error-message {

    background: transparent;

    color: red;

    padding: 0px;

    margin-bottom: 0px;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }.form-error-arrow {border: 0px solid transparent !important;

    border-bottom-color: transparent !important;

    border-bottom: none !important;

    }

    .form-error-message img {display:none;}

    The output of the above css will be something as displayed in the screenshot below:

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!