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 to cutomize background highlights and error descriptions

    Asked by bellaverite on May 31, 2017 at 05:34 PM

    Hi,

     

    I have a few additional questions regarding the Jotform forms.

     

    1) How do I remove the yellow highlighting that appears when completing a section on a online form?

    2) How do you change the required fields * from red to black?

     

    Thank you,

    Jessica

     

    Page URL:
    https://bellaverite.com/pages/color-match-consultation

    Screenshot
  • Profile Image
    JotForm Support

    Answered by jonathan on May 31, 2017 at 06:58 PM

    You can use the Advance Designer to customize both style mentioned.

     

     

    To change/remove the background highlight color :

     

    To change *required field color to black inject this CSS codes

    span.form-required {  

      color:black;

    }

     

     

    Let us know if you need further assistance.

     

     

  • Profile Image

    Answered by bellaverite on May 31, 2017 at 11:43 PM
    Hi,
    Thank you so much for your reply.
    I have entered the CSS as instructed below, saved and the mandatory fields are still showing as red. Please attached screenshots.
    Trying to figure out what I am missing.
    Thank you,
    Jessica
    [cid:D55C592B-0D63-4669-AAA2-955DDA6A37A9@socal.rr.com][cid:585E73A5-9B84-49D4-98B8-08F11284DC13@socal.rr.com]
    ...
  • Profile Image

    Answered by bellaverite on May 31, 2017 at 11:43 PM
    I have also, selected the field to not be highlighted and it is still appearing with yellow block?
    [cid:A16E834E-E439-4221-853E-C15E5C78C236@socal.rr.com]
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on June 01, 2017 at 01:03 AM

    The thing about your form is, non of the fields were actually set as *required fields. So you will not be able to see the effect.

     

    I  have injected this CSS codes on your form to force the removal of highlight effect.

    .form-line-active {

        background: none !important;

    }

     

    I suggest you add a *required field also on your form and check again.

    Let us know how it goes.

    Thanks.

     

     

     

  • Profile Image

    Answered by bellaverite on June 01, 2017 at 02:43 AM
    Thank you again for your reply. Those issues seem to be fixed but now the fields are showing with a blue and yellow boarder.
    I read the discussion boards and it suggested to use the code shown in screen shots below but it did not work and only worsened the issue.
    Can you please provide the corrected code for no outline or a black boarder?
    Thank you again,
    Jessica
    [cid:67780950-FEED-4CFC-B1DD-63B92CEBBF9A@socal.rr.com]
    ...
  • Profile Image
    JotForm Support

    Answered by BJoanna on June 01, 2017 at 03:21 AM

    I have inspect your form, but I am not sure which border do you want to remove. 

    Your screenshot is not shown here on forum. Please note that images that are attached inside of email, will not be shown here on forum. You will need to open this thread and upload your screenshot.

    Looking forward to your reply. 

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 01, 2017 at 03:45 AM

    Do you want to remove this blue and yellow border? 

    If so add this CSS code to your form:

    .form-line-active input:focus{

    outline: none!important;

    border:1px solid #cccccc;

    }

    .form-line-active textarea:focus{

    outline: none!important;

    border:1px solid #cccccc;

    }

    Here is my demo form: https://form.jotformpro.com/71511169557964 

    Let us know if you need further assistance.