How to cutomize background highlights and error descriptions

  • bellaverite
    Asked on May 31, 2017 at 5: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

     

    Jotform Thread 1159732 Screenshot
  • jonathan
    Replied on May 31, 2017 at 6:58 PM

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

    How to cutomize background highlights and error descriptions Image 1 Screenshot 60

     

    How to cutomize background highlights and error descriptions Image 2 Screenshot 71

     

    To change/remove the background highlight color :

    How to cutomize background highlights and error descriptions Image 3 Screenshot 82

     

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

    span.form-required {  

      color:black;

    }

    How to cutomize background highlights and error descriptions Image 4 Screenshot 93

     

    How to cutomize background highlights and error descriptions Image 5 Screenshot 104

     

    Let us know if you need further assistance.

     

     

  • bellaverite
    Replied 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]
    ...
  • bellaverite
    Replied 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]
    ...
  • jonathan
    Replied on June 1, 2017 at 1: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.

    How to cutomize background highlights and error descriptions Image 1 Screenshot 40

     

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

    .form-line-active {

        background: none !important;

    }

    How to cutomize background highlights and error descriptions Image 2 Screenshot 51

    How to cutomize background highlights and error descriptions Image 3 Screenshot 62

     

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

    Let us know how it goes.

    Thanks.

     

     

     

  • bellaverite
    Replied on June 1, 2017 at 2: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]
    ...
  • BJoanna
    Replied on June 1, 2017 at 3: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. 

  • BJoanna
    Replied on June 1, 2017 at 3:45 AM

    Do you want to remove this blue and yellow border? 

    How to cutomize background highlights and error descriptions Image 1 Screenshot 20

    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.