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

    How does one remove error messages and pink background highlighting, leaving just the red borders?

    Asked by adharamoveis on January 17, 2014 at 04:36 PM

    http://upamais.com/images/78158334934832845166.png

     

    How i do to remove the background red error and the message when no field is populated and click send?

     

    Tks

    error messages red border only no error messages only red broder no pink background pastel theme pastel form pastel
  • Profile Image
    JotForm Support

    Answered by abajan on January 17, 2014 at 06:55 PM

    Hello,

    Injecting the following CSS should accomplish that:

    .form-line-error {
    background: transparent;
    }

    .form-error-message {
    display: none;
    }

    If you wish to hide the message by the submit button too, change the second rule to:

    .form-error-message,
    .form-button-error {
    display: none;
    }

    If you need furthter assistance with this, please let us know.


    Thanks

  • Profile Image

    Answered by adharamoveis on January 18, 2014 at 02:36 AM

    Hi, thanks for your help!!

     

    Just one more thing. How can i change the color of the instruction text? It's possible?

  • Profile Image
    JotForm Support

    Answered by abajan on January 18, 2014 at 05:05 AM

    Hi again,

    Had I checked your account before posting my last reply I would have seen that it was a Pastel themed form to which you were referring. (One of my colleagues [Jonathan] alerted me to this.) To achieve the same result, such forms require two additional rules and an extra declaration in the first rule. Please replace what I earlier provided with the following:

    .form-line-error {
    background: transparent;
    text-shadow: none;
    }

    .form-line-error .form-sub-label {
    color: #777;
    text-shadow: 0 1px 0 #EEE;
    }

    .form-line-error .form-label-right {
    color: #524B3A;
    text-shadow: 0 1px 0 #EEE;
    }

    .form-error-message {
    display: none;
    }

    (The extra declaration and rules are highlighted)

    The result should be like this clone.

    If the form were to have left-aligned and top-aligned field labels as well as the right-aligned ones, you would need to amend the third rule to target those too:

    .form-line-error .form-label-right,
    .form-line-error .form-label-left,
    .form-line-error .form-label-top {
    color: #524B3A;
    text-shadow: 0 1px 0 #EEE;
    }


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on January 18, 2014 at 05:38 AM

    Actually, it appears that you already found a solution which is better than mine because less CSS is required.

    Nice! :)