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 fields notifications: Required info alerts still not quite right

    Asked by paulsutt on September 25, 2014 at 02:01 PM

    Hi

     

    Ive inserted the code below - however im still getting red boxes - i dont want red boxes or red outlines on boxes. The only red I want is the alert text , nothing else.

     

    Please can you help

     

    Thanks

     

    .form-line-error .form-error-message {

    background: transparent;

    color: red;

    padding: 0px;

    margin-bottom: 0px;

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }.form-error-arrow {border: 0px solid transparent !important;

    border-bottom-color: transparent !important;

    border-bottom: none !important;

    }

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

    Screenshot
    style message required fields required red alert notifications
  • Profile Image

    Answered by Mark on September 25, 2014 at 03:51 PM

    Hi,

    Can you please take a look at this clone form if this is what you want to achieve?

    http://form.jotformpro.com/form/42676525309965?

    If yes, please replace your current custom css code to this.

    .form-line-error {

    background: transparent;

    }

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

    /* border: 1px solid #ccc !important; */

    -moz-box-shadow: none !important;

    /* -webkit-box-shadow: none !important; */

    /* box-shadow: none !important; */

    }

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

    border: 1px solid #ccc !important;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    }

    If you need further assistance, please do let us know.

  • Profile Image

    Answered by Ben on September 25, 2014 at 03:55 PM

    Hi,

    Please take a look at this form here: http://form.jotformpro.com/form/42675920103955

    If that is what you would like to have it looking you can simply clone it to your account by following these steps:

    How to Clone an Existing Form from a URL

    If you would like to do it yourself then I would suggest removing all of your CSS and then injecting this CSS instead:

    .form-line.form-line-error
    {
     background:none;
    }
    .form-line.form-line-error input
    {
        border: 1px solid #ccc !important;
        box-shadow: 0 1px 2px #eee inset !important;
    }

    You can see here how to Inject Custom CSS Codes

    Do let me know if this is what you wanted to achieve :)

    Best Regards,
    Ben