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

    Styling field validation and error highlighting.

    Asked by LionelB1 on May 24, 2016 at 07:12 PM

    Change color of red outline of email field box when error exists. And also change blue highlight of active field.

    Hello friends,

    I desire to change two colors:

    1.) The red outline of email field box when an error exists

    2.) The default blue highlight of each active field

     

    I have tried to inject the following CSS code, however without success. Can you please tell me what I am doing incorrectly?

    1.)

    .form-validation-error {

    border: 1px solid #950f04 !important;

    -moz-box-shadow:none !important;

    -webkit-box-shadow:none !important;

    box-shadow:none !important;

    }

     

    2.)

    .form-textbox:focus {

    border-color:#926138 !important;

    }

    Page URL:
    http://www.pucaraspanishschool.ec/index.php/make-a-reservation

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 24, 2016 at 10:40 PM

    Please inject the custom css below to change the color of the red outline and the blue highlight of each active field.

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

        border: 1px solid #950f04!important;

    }

    .form-textbox:focus, .form-textarea:focus {

        border: 1px solid #926138 !important;
        outline: none;

    }

    Here's a demo form so you can see it in action: https://form.jotform.com/61448196001956 

    If you need further assistance, please let us know.

  • Profile Image

    Answered by LionelB1 on May 25, 2016 at 04:57 PM

    Thank you very much for this help!

    However, now another problem exists: When the 'Home Country' field in the second row is selected, the layout changes. Can you please see this strange issue and advise me on what to do?

     

    http://www.pucaraspanishschool.ec/index.php/make-a-reservation

  • Profile Image
    JotForm Support

    Answered by Mike on May 25, 2016 at 08:00 PM

    To fix the layout change issue, please use the next CSS:

    http://pastebin.com/raw/hVbfT2FS

    Form example:

    https://form.jotform.com/61457487828976

    Thank you.

  • Profile Image

    Answered by LionelB1 on May 25, 2016 at 10:29 PM

    Hi, I have injected the CSS you provided, however the layout problem still exists when the cursor is placed inside the "Home Country" field, and also now there is an unwanted highlight occurring around the field with an error. Please see:

     

    http://www.pucaraspanishschool.ec/index.php/make-a-reservation

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 25, 2016 at 11:41 PM

    I checked your form and it appears that the css provided by my colleague was not applied to your form. That is why the issue still persists. I have now injected the necessary css to your form so the issue should be resolved. Please check on your end to confirm. If you need further assistance, please let us know.

  • Profile Image

    Answered by LionelB1 on May 26, 2016 at 08:29 AM

    Thank you so much, the form is now as desired! 

    However, I DID inject the custom CSS provided by your colleague....am I not following the correct procedure? I go to From Preferences, Form Styles, and then insert CSS into the bottom box 'Inject Custom CSS.' I see also, that CSS can be injected using the Designer application...which method is correct?

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 26, 2016 at 09:25 AM

    Whichever method that is easy for you. They should both work.

    Just make sure to paste the CSS code into the bottom section if you have existing CSS codes in your form.

    Cheers!