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

    Changing the alignment and color of the required field errors and messages

    Asked by LBounce on August 06, 2016 at 08:27 AM

    Hello, 

    You can see here the faint error text. The problems are:

    1. Location of the error text does not look nice, should be center and under the submission button 

    2. Colour or error text

    3. The error text is there but my form is not highlighting the field with the error. I would like the field to highlight with the following colour: #007cba

     

    Please help. 

     

    Scott. 

    Screenshot
    required field error error messages
  • Profile Image
    JotForm Support

    Answered by Welvin on August 06, 2016 at 08:49 AM

    I've fixed it for you.

    For the bottom error message alignment/color, I have added the following custom CSS codes to your form:

    .form-pagebreak  > .form-button-error {

        display: inline-block !important;

    }

    .form-button-error {

        color: red !important;

    }

    For the shadow/border color of the required fields, I have injected the following custom CSS codes to your form:

    .form-line-error input:not(#coupon-input), .form-line-error textarea, .form-line-error .form-validation-error {

        border: 1px solid #007cba;

        -webkit-box-shadow: 0 0 3px #007cba;

        -moz-box-shadow: 0 0 3px #007cba;

        box-shadow: 0 0 3px #007cba;

    }

    .form-line-error input:not(#coupon-input), .form-line-error select, .form-line-error textarea, .form-validation-error {

        border: 1px solid #007cba !important;

        -moz-box-shadow: 0 0 2px red;

        -webkit-box-shadow: 0 0 2px #007cba;

        box-shadow: 0 0 2px #007cba;

    }

    Please check now and let us know if there are still issues.

  • Profile Image

    Answered by LBounce on August 06, 2016 at 09:13 AM

    Hello, 

    Thanks for your help however whatever you have done has just made my form go completely wrong - please help fix ASAP. 

    Thanks, Scott

  • Profile Image
    JotForm Support

    Answered by liyam on August 06, 2016 at 09:43 AM

    Hello Scott,

    It looks like you've been editing the form after this reply. Do you want us to revert your form from its previous state before reworking on it again? In any case you may also revert your form if you wish by following this guide: https://www.jotform.com/help/294-How-to-view-form-revision-history

    Thanks.