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 can I remove the pink highlighting when you move off a required field?

    Asked by joomdesign on September 19, 2011 at 05:45 PM

    I was able to turn off the light yellow highlighting that appears to show you which field you're currently filling in, but I can't find where to turn off the bright pink highlighting that appears when you've clicked into a required field but then click out of it without completing it. 

     

    Screenshot
  • Profile Image

    Answered by brx250 on September 20, 2011 at 01:01 AM

    Hi joomdesign,

    You can change that through the following steps:

    1. Load the form into the form builder

    2. While on the Setup & Embed tab, click Preferences > Form Styles

    3. Copy the following code and paste it into the Inject Custom CSS section (where it states "Click to edit"):

    .form-line-error {
    background:none repeat scroll 0 0;
    }

    4. Click Close  Settings and save the form

    This will get rid of the background altogether. To change the pink to another color, replace none in the code with the color code that will render the color of your choice. For example chaging the code to this:

    .form-line-error {
    background:#99FF99 repeat scroll 0 0;
    }

    will cause the error highlighting to be a light green.

    If you have further issues and concerns, please feel free to contact us again.

    _____________________________________________    

    Albert  JotForm Support  

  • Profile Image

    Answered by joomdesign on September 20, 2011 at 02:46 AM
    Thanks Albert, that’s a great help!



    The only problem is that implementing this caused something unexpected to happen. I removed the highlighting entirely with the code as directed, but when I try it out live what happens when I move off a required field is that the question text changes colour. See in the screenshot below or try it out for yourself at http://amanziblue.withtank.com/our-team/join-our-team/ - the #66CCFF blue text goes to a dark grey and I’m not sure where it’s getting that from.



    Also, I really hate to be a giant pain but is there any way to change the pink speech bubble/hint background where it gives the form warning? And what about the red of the ‘required’ asterisk?







    Thanks again

    Megan









  • Profile Image

    Answered by brx250 on September 20, 2011 at 03:52 AM

    Hi Megan,

    You are very much welcome!

    For your follow up questions, try injecting the following CSS codes below:

    .form-line-error {
    background:none repeat scroll 0 0;
    }
    .form-error-message {
    background:#FFA !important;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent #FFA;
    }
    .form-validation-error {
    background-color:#CFC;
    border:1px solid green;
    -moz-box-shadow:0 0 2px green;
    -webkit-box-shadow: 0 0 2px green;
    box-shadow: 0 0 2px green;
    }

    To change the background color of the "This field is required" message, please add these:

    div.form-input-wide div.form-error-message {
    background-color:lightgrey;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent lightgrey;
    }

    Replace lightgrey with any color you want. Be sure to use the same color for both, unless you want a different color for the small arrow-like triangle.

    And for the color of the asterisk, try adding this one below:

    .form-required {
    color:blue;
    }

    You can play around and test colors to suit your preference. Just replace the colors (text in bold) with any HTML Color Name or HTML Color Code you prefer.

    Hope this helps. If you have any other questions, you are more than welcome to contact us again.

    _____________________________________________    

    Albert  JotForm Support

      

  • Profile Image

    Answered by joomdesign on September 20, 2011 at 04:21 AM
    Albert, you’re a HERO! Thanks for that :) Will give it a whirl.



  • Profile Image
    JotForm Support

    Answered by abajan on September 20, 2011 at 04:24 AM

    Hi Megan

    Thanks for asking (and you're NOT being a pain!).To stop the color of the font from changing, add color:#66CCFF; to the rule Albert provided. In other words, change the rule to the following:

    .form-line-error {
    background:none repeat scroll 0 0;
    color:#66CCFF
    }

    This thread shows how to change all aspects of the error highlighting.

    As far as changing the color of the asterisks goes, inject the following code and change the color to suit your tastes:

    .form-required {
    color: green !important;
    }

    You can find all of the named colors and their equivalent hex codes here. (A handy tool to choose colors is Color Cop which you can get from from Download.com)

    MaxDesign is a good site to learn the basics of CSS (be sure to view the three presentations near the bottom of that page). Also, Firebug is an excellent tool to determine which selectors should be used for the injected CSS rules.

    Hopefully you've found the above helpful. If you need additional help with this or any other aspect of our product, do let us know. Our team is always ready to help clients get the most out of their forms.

    Cheers :)


    ~ Wayne

  • Profile Image

    Answered by brx250 on September 20, 2011 at 04:25 AM

    Hi there,

    We are always glad to help! Be sure to let us know if you need further assistance with anything.

    Thank you and enjoy using JotForm! Cheers :)

    _____________________________________________    

    Albert  JotForm Support

  • Profile Image
    JotForm Support

    Answered by abajan on September 20, 2011 at 04:26 AM

    Oops! Looks like Albert was quicker on the trigger than I! LOL

    ~ Wayne

  • Profile Image

    Answered by joomdesign on September 20, 2011 at 04:36 AM
    Getting hit by helpful support from all sides! Awesome :)



    Have a great day Wayne

    Megan



  • Profile Image
    JotForm Support

    Answered by abajan on September 20, 2011 at 04:38 AM

    Thanks Megan :)

    You have a great day too!


    ~ Wayne