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 color pink of warning boxes?

    Asked by sdenterprisescorp on June 27, 2011 at 08:43 PM

    Hello,

     

    The color pink just doesn't fit my site. I would like to change this is there a option to do-so?

     

    Thanks

    Page URL:
    Underconstruction

  • Profile Image
    JotForm Support

    Answered by abajan on June 27, 2011 at 09:18 PM

    Hi sdenterprisescorp

    Thanks for asking. You can change it to a color of your choice or remove it altogether.

    Here's how:

    1. Load the form into the form builder

    2. While on the Setup & Embed tab, click Preferences > Form Styles

    3. Copy the following code and paste it into the Inject Custom CSS section (where it states "Click to edit"):

    .form-line-error {
    background:none repeat scroll 0 0;
    }

    4. Click Close  Settings and save the form

    This will get rid of the background altogether. To change the pink to another color, replace none in the code with the color code that will render the color of your choice. For example chaging the code to this:

    .form-line-error {
    background:#99FF99 repeat scroll 0 0;
    }

    will cause the error highlighting to be a light green.

    Should you require additional assistance with this or any aspect of our product, please feel free to ask.


    ~ Wayne

  • Profile Image

    Answered by sdenterprisescorp on June 27, 2011 at 09:24 PM

    Thank you perfect! Now how do I change the red border around box and pink background on the "this field is required" text?

  • Profile Image
    JotForm Support

    Answered by abajan on June 28, 2011 at 06:03 AM

    Hi again

    Here is the full rundown of CSS rules related to error highlighting, beginning with the one you already know:

    /* removes pink background of entire field.
    Replace "none" with a color code to change color */
    .form-line-error {
    background:none repeat scroll 0 0;
    }

    .form-validation-error {
    /* changes the border color of input to green */
    border:1px solid green;
    /* the shadow (fading) effect on the border color of inputs */
    -moz-box-shadow:0 0 2px green;
    /* the shadow (fading) effect on the border color of inputs */
    -webkit-box-shadow: 0 0 2px green;
    /* the shadow (fading) effect on the border color of inputs */
    box-shadow: 0 0 2px green;
    }

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

    /* color of arrow pointing to the unfilled required field */
    .form-error-arrow-inner {
    border-color: transparent transparent #FFA !important;
    }

    /* changes the background color of the input to light green */
    .form-validation-error {
    background-color:#CFC;
    }


    Some Explanation About The Above CSS Rules

    The entire block of code can be copied as is and pasted into the Inject Custom CSS section of your form's Preferences. Each instance of text wrapped with /* and */ is a note for your benefit. The opening /* and closing  */ lets browsers know that whatever lies between them is just a comment and as such, should be ignored and not interpreted as part the CSS code.

    By convention, each comment refers to the line or lines below it - not above. You can shorten or remove the comments altogether if you wish. If removing a comment, be sure to do so completely, including both the opening /* and the closing */. Otherwise, you run the risk of having major portions of the CSS being mistaken for comments by the browser.


    In the second rule (affecting the borders of inputs), it may seem redundant to include three declarations to control the fading effect when just one would have sufficed. However, in order to accommodate all types of browsers capable of interpreting CSS, it is necessary to include all three of the declarations. Also, for consistent rendering across all browsers, whatever color is used in one of the said declarations, must be used in the other two.

    You may have noticed that two of the rules have the same selector
    (.form-validation-error) and wondered if they could not have been somehow combined. Yes, they most certainly could have been. It is perfectly legal to combine those rules as follows:

    .form-validation-error {
    background-color:#CFC;
    border:1px solid green;
    -moz-box-shadow:0 0 2px green;
    -webkit-box-shadow: 0 0 2px green;
    box-shadow: 0 0 2px green;
    }

    Last but by no means least, the dot (.) before each selector may be small but it's very important. Don't omit it! It signifies to browsers that the selector is a class.

    Incidentally, the "This field is required." message can be removed completely by replacing the third and fourth rules above with the following: 

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

    Be sure to visit MaxDesign for more information. (The Selectutorial link explains what "declaration", "selector" and "class" mean.) CSS is a vast topic but that site provides a sound foundation upon which to build one's knowledge on the subject.

    Firebug is a great tool to discover which selectors should be used to effect the required changes.

    Hopefully you found this post useful. If you need additional assistance with CSS or any other aspect of our product, please feel free to post your query and our support team will gladly come to your rescue! :)

    Cheers


    ~ Wayne