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" data pop-up color changes

    Asked by TonerCarAOLcom on July 11, 2014 at 06:39 PM

    I have successfully injected CSS code to change the background color of the "required" pop-up textboxes when data is not imputed or imputed correctly. However, I want to change the color of the offending text box outline and I want to change the color of the triangular arrow. How do I this?

    css code Injected CSS arrow textboxes
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on July 11, 2014 at 08:12 PM

    By offending textbox outline, you mean the red color of the border of the boxes?

    For the arrow, please inject a custom CSS such as this one:

    .form-error-arrow{
    border-bottom-color:#3B5998 !important;
    }

    You can choose the color accordingly , see this color picker to choose your code.

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on July 11, 2014 at 08:17 PM

    If you refer to the highlight effect (yellow) , you can disable by following this screen:

  • Profile Image

    Answered by TonerCarAOLcom on July 11, 2014 at 08:35 PM

    Hi Jeanette,

     

    Thanks for your prompt reply. I'm actually starting to get the hang of this CSS injection a little bit. The injection for the arrow color change you recommended worked perfectly! I am referring to the red border outline of the boxes. How do I change this color?

    Thanks for all your excellent help

     

    Peter

     

  • Profile Image
    JotForm Support

    Answered by Welvin on July 12, 2014 at 02:34 AM

    Hi Peter,

    Use the following custom CSS codes for the border and shadow effect for field errors:

    .form-line-error {

    border: 1px solid #006600 !important;

    -moz-box-shadow: 0 0 3px #006600 !important;

    -webkit-box-shadow: 0 0 3px #006600 !important;

    box-shadow: 0 0 3px #006600 !important;

    }

    Change "#006600" to any color you want. Same guide for injecting the codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Let us know if you need any further assistance.

    Thanks

  • Profile Image

    Answered by TonerCarAOLcom on July 12, 2014 at 09:03 AM

    Hi Welvin,

    Thanks for your help, your prescribed CSS injection works perfectly! You guys really know what you are doing! I need one last bit of help. I need to change the border around the "first name" field box, "last name" field box and "e-mail field box" from red to #006600 green. Can you please prescribe the CSS injection for doing that.

     

    Thanks,

     

    Peter

  • Profile Image

    Answered by Carina on July 12, 2014 at 09:56 AM

    Please inject the following css code:

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

        border-bottom-color:  #006600;

        border-left-color-value:  #006600;

        border-right-color-value:  #006600;

        border-top-color:  #006600;

        box-shadow: 0 0 3px  #006600;

    }

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

    {

    border-left-color-value: none;

    border-right-color-value: none;

    }

    Let us know if further support is needed.

  • Profile Image

    Answered by TonerCarAOLcom on July 12, 2014 at 10:31 AM

    Hi Carina,

    Thanks for your patience with a neophyte. I cut and pasted your CSS code injection recommendation but it had no effect at all that I can observe. Anything I may have missed?

    Thanks again for all your help

     

    Peter

  • Profile Image
    JotForm Support

    Answered by ashwin_d on July 12, 2014 at 02:29 PM

    Hello Peter,

    The custom css code shared by my colleague does not have any issue.

    I did check the injected custom css code in your form and found that there was a syntax error. I have updated the injected css code and it seems to be working fine.

    I would suggest you to please test your form and see if it works as expected.

    Thank you!

  • Profile Image

    Answered by TonerCarAOLcom on July 12, 2014 at 02:34 PM

    Ashwin, 

    Thanks to you and Carina! I checked it and it works great! I really appreciate all your help. Apologize for overlooking the syntax error, thought I had found all of them.

     

    Thanks again,

     

    Peter

  • Profile Image
    JotForm Support

    Answered by Welvin on July 12, 2014 at 05:23 PM

    Hi Peter,

    It's our pleasure to help you. Please let us know if you need any further assistance.

    Thanks