How to style custom error message

  • huizenijmegen
    Asked on January 25, 2016 at 1:57 PM
    Hi,
    another question regarding my form.
    I’ve implemented your suggestion on the dates: excellent.
    It works.
    However, the error message does not look the same as the standard error messages.
    The standard error messages are in red.
    How can I realize that my own error message look the same.
    best,
    Carolus
  • BJoanna
    Replied on January 25, 2016 at 2:21 PM

    Considering that it is not possible to show JotForm error message, I would suggest you to use regular Text Field and then to style it with Custom CSS. 

    How to style custom error message Image 1 Screenshot 30

    Inside of cloned form I applied this CSS code to my text field:

    #text_30 span {

        color : #ffffff;

        background-color : #ff3200!important;

        padding : 5px!important;

        margin-left : 150px!important;

        border-radius : 5px!important;

    }

    Inside of this guide you can find how to inject custom CSS codes:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    And inside of this guide how to find Field IDs & Names:

    http://www.jotform.com/help/146-How-to-find-Field-IDs-Names 

    Warning message of my demo form looks like this. 

    How to style custom error message Image 2 Screenshot 41

    Here is my demo form: https://form.jotform.com/60245969765975 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance.