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

    To change the "This field is required" format

    Asked by NachoPH on September 22, 2011 at 11:25 AM

    Hi there.

    The actual appearance of the message remembering that you have not filled some of the requested fields is not too professional nor elegant. Pink box is too big.

    Is there any chance for changing it? For example, just remarking in red and with a small note also in red. This is my opinion, but I'm sure that other users would like to use a different style, so I believe that it would be great if we could customize that in oir own way.

    Could you please to implement this?

    Thanks in advance,
    Ignacio

  • Profile Image

    Answered by brx250 on September 22, 2011 at 10:14 PM

    Hi Ignacio,

    First of all, thank you for using JotForm.

    You can do that through the following steps:

    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;
    }
    .form-error-message {
    background:#FFA !important;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent #FFA;
    }
    .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;
    }

    To change the background color of the "This field is required" message, please add these: 

    div.form-input-wide div.form-error-message {
    background-color:lightgrey;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent lightgrey;
    }

    Replace lightgrey with any color you want. Be sure to use the same color for both, unless you want a different color for the small arrow-like triangle.

    And for the color of the asterisk, try adding this one below:

    .form-required {
    color:blue;
    }

    You can play around and test colors to suit your preference. Just replace the colors (text in bold) with any HTML Color Name or HTML Color Code you prefer.

    Hope this helps. If you have any other questions, you are more than welcome to contact us again.

    _____________________________________________    

    Albert  JotForm Support

  • Profile Image

    Answered by NachoPH on September 23, 2011 at 04:47 AM

    Thank you very much!

    As usual, your answers are really fast and useful.

    It is really great to work with you!

  • Profile Image

    Answered by brx250 on September 23, 2011 at 05:01 AM

    Hi,

    You are very much welcome!

    If you do have further issues and concerns, please feel free to let us know. Our team will be more than happy to assist you with the best that we can, as always!

    Again, thank you and enjoy using JotForm! :)

    _____________________________________________    

    Albert  JotForm Support

  • Profile Image

    Answered by SchneiderTree on January 03, 2013 at 11:21 AM

    I hav found that the arrow does not change colors unless you leave off the word "inner" at the end of the line

    .form-error-arrow-inner {

    border-color: transparent transparent lightgrey;
    }