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

    Required field message style

    Asked by miryun 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!

    Screenshot
    required field style message
  • Profile Image

    Answered by miryun on April 02, 2013 at 05:12 PM

    Mainly, getting rid of the yellow attention mark, please

    Thanks in advance

  • Profile Image
    JotForm Support

    Answered by abajan 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

    Answered by miryun 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

    Answered by miryun 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
    JotForm Support

    Answered by abajan 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

    Answered by miryun 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
    JotForm Support

    Answered by abajan 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

    Answered by miryun on April 03, 2013 at 06:52 AM

    That worked perfectly. Thanks so much

    Have a great day

  • Profile Image
    JotForm Support

    Answered by abajan 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

    Answered by drvickie 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
    JotForm Support

    Answered by jonathan 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

    Answered by sen85ya on May 08, 2014 at 12:33 PM

    Thank You! It is very useful information.