Required field message style

  • Profile Image
    miryun
    Asked on April 02, 2013 at 04:55 PM

    Hi,

    Is there any way to style the required field message, or any alternative designs to the one by default?

    Thank you!

  • Profile Image
    miryun
    Answered on April 02, 2013 at 05:12 PM

    Mainly, getting rid of the yellow attention mark, please

    Thanks in advance

  • Profile Image
    abajan
    Answered on April 02, 2013 at 07:03 PM

    Thanks for asking. Yes, using injected CSS, it's quite feasible to change the appearance of the error message. The CSS below is an example (I have included the comments as a guide):

    /* Remove exclamation mark image */
    .form-error-message img {
    display: none;
    }

    /* Background of entire field. If necessary, add a "color" declaration
    which matches that in the .form-all rule. */
    .form-line-error {
    background: none repeat scroll 0 0;
    }

    /* Change background color of "This field is required."
    and make message bold */
    .form-error-message {
    background: #090 !important;
    font-weight: bold;
    }

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

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

    Adding the above rules to your CSS will make the error message look like this:

    If you would like further help with this, we'd be happy to assist.

  • Profile Image
    miryun
    Answered on April 03, 2013 at 05:20 AM

    Thank you so much for such a detailed answer - I will try it, but I am sure that it will help a lot!

  • Profile Image
    miryun
    Answered on April 03, 2013 at 05:30 AM

    Hi abajan,

    Three more questions:

    1. Could you please tell me if there is a setting to get rid of the ''There are incomplete required fields. Please complete them'' message in red that appears below the submit button?...or at least a way to change its color?

    2. Is it also possible to change the color or the red asterisks indicating that a field is required?

    3. Since my site is in two languages (English and French), I was wondering if there is any way that I can change the text for the Frech version (''This field is required'' and ''There are incomplete required fields. Please complete them'')

    Thank you!

  • Profile Image
    abajan
    Answered on April 03, 2013 at 05:46 AM

    Hi again

    The following rule will do that:

    .form-button-error {
    color: #090;
    }

    (#090 is shorthand code for #009900. Of course, you may substitute the color of your choice. Here's a handy color picker.)

    Do let us know how everything works out.

  • Profile Image
    miryun
    Answered on April 03, 2013 at 05:59 AM

    Hi abajan

    Sorry for the inconveniences, but I think I edited my question as you were answering it because I realized that I had further questions. Would you mind going over it one last time, please?

    Question #1 is solved, by the way!

    Thanks a lot

  • Profile Image
    abajan
    Answered on April 03, 2013 at 06:09 AM

    Yes, I realized that's what happened after I posted my reply. It's no problem.

    The following rule will change the color of the asterisks:

    .form-required {
    color: #090;
    }

    Changing both the "This field is required" and "There are incomplete required fields" messages is possible. Please see this guide. (The screenshots in the guide are a bit outdated but the functionality is the same. I'll update the screenshots shortly.)

    If you have further questions, we'd be happy to help.

  • Profile Image
    miryun
    Answered on April 03, 2013 at 06:52 AM

    That worked perfectly. Thanks so much

    Have a great day

  • Profile Image
    abajan
    Answered on April 03, 2013 at 07:21 AM

    Glad I could help. I've updated the screenshots in the guide, by the way.

    You have a great day too :)

  • Profile Image
    drvickie
    Answered on February 11, 2014 at 04:01 PM

    this is awesome - thanks for such complete information.... 

    is there an easy way to just get rid of the asterisks entirely, and just use css to indicate required??

  • Profile Image
    jonathan
    Answered on February 11, 2014 at 05:13 PM

    @ drvickie

    Hi,

    You can try the CSS code like this

    .form-required {

    display: none;

    }

    will hide that asterisk required on the lable name.

    Hope this help. Inform us if it does not work.

    Thanks.

  • Profile Image
    sen85ya
    Answered on May 08, 2014 at 12:33 PM

    Thank You! It is very useful information.