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

    The form wizard is great and it works.

    Asked by Jodie on June 02, 2011 at 08:23 PM
    The form wizard is great and it works...don't like the message presentation though, can that be custamized?

    This is a re-post of a comment on JotForm Proudly Launches New Embed Form Wizard

  • Profile Image
    JotForm Support

    Answered by abajan on June 02, 2011 at 08:45 PM

    Hi Jodie

    Thanks for asking. If you mean the error messages, yes their text can be edited via the "Advanced Settings" tab of the Preferences (Setup & Embed > Preferences > Advanced Settings > Edit Form Warnings)


    Additionally, their presentation can be customized via the "Inject Custom CSS" section ("Form Styles" tab of the Preferences). For instance, if you were to inject the following code, the "This field is required." warning would look quite different. Give it a try:

    /* background of entire field */
    .form-line-error {
    background:none repeat scroll 0 0;
    }

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

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

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

    That was an extreme makeover but if you are going for subtlety how about changing the message "There are incomplete required fields. Please complete them" to just "Please complete the highlighted fields." and replacing the above code with just the following?

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

    Those are but a couple of ways to customize one of the messages. If there is any particular error message with which you require assistance in customizing, please let us know and we will be glad to help.


    ~ Wayne