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

    Change the warning design.

    Asked by Marc on August 27, 2011 at 08:20 AM

    Hi,

    Could you change this ugly warning area to something more stylish, pleas? 

    The users aren’t stupid nowadays, we don't have to banging in their mistakes with a hammer. 

    Screenshot
  • Profile Image
    JotForm Support

    Answered by liyam on August 27, 2011 at 08:57 AM

    Hello,

    You can style the error warnings using CSS.  You can read more information on what HTML IDs, and Classes are being used for the form errors on this page.

    Here is how to inject customized CSS into your form:

    1. Go to My Forms and open the form that you wish edit.
    2. Click the Setup & Embed tab, click Preferences > Form Styles > Inject Custom CSS
    3. Click where it states Click to edit
    4. Type the code at the prompt
    5. When finished entering the code, click Close Settings
    6. Save the form

    Warm regards,

    Liyam

  • Profile Image
    JotForm Support

    Answered by abajan on August 27, 2011 at 09:02 AM

    Hi Marc

    To achieve the specific look in your screenshot, inject the following rules and save the form:

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

    If you require additional help with this or any other aspect of our product, be sure to let us know.

    Thanks.


    ~ Wayne

  • Profile Image

    Answered by Adforum on August 28, 2011 at 04:00 AM

    Than you Liyam and Wayne! :)

    Regards,

    Marc

     

  • Profile Image
    JotForm Support

    Answered by abajan on August 28, 2011 at 04:21 AM

    We're always glad to help our users get the most out of their forms, Marc :)

    Incidentally, I too feel that our default warning is a bit "over the top". Especially the big pink background.

    Cheers


    ~ Wayne

  • Profile Image

    Answered by stevenyilin on December 13, 2011 at 11:53 AM

    you guys are FULL AWESOMENESS!!!

    ...now we just need google adwords analytics synched with our form ;)

  • Profile Image

    Answered by stevenyilin on December 13, 2011 at 12:04 PM

    hi wayne,

    what css line do i use to change the default yellow color of the highlighted area to different color?

    thanks

    steve

  • Profile Image
    JotForm Support

    Answered by idarktech on December 13, 2011 at 06:03 PM

    Hi Steve,

    Thanks for asking. It is possible to change the background color for an active form field by injecting this custom css:

     

    .form-line-active {

    background-color: #FFFFFF;

    }

     

    To learn how to inject custom css on your form, please click here.

     

    #FFFFFF is equal to the color white, so this code will basically 'remove' the background color. To change it to something else, replace it with an HTML Color Code or a Color Name.

    Hope you find this useful. Thank you for using JotForm!

  • Profile Image

    Answered by AlbertLEROI on May 07, 2012 at 05:11 PM

    Hello

    I injected the css code proposed by Wayne to remove these ugly warning boxes

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

    .form-error-message {
    display:none
    }

    --------------------------

    It does the job but also affects the labels in my form

     http://form.jotformeu.com/form/21266518816356?

    Secondly, I'm a bit disapointed by the Clear Form button !!
    Only data fiels are cleared but not the warnings and error boxes ...

    Is thère a way to improve ?

    Thanks for your great job !

     




  • Profile Image
    JotForm Support

    Answered by abajan on May 07, 2012 at 09:16 PM

    @AlbertLEROI

    To prevent the labels of the required fields in your particular form from changing their color when error highlighting is triggered, your first rule must contain the following additional declarations (highlighted in red) :

    .form-line-error {
    background: none repeat scroll 0 0;
    color: #000;
    text-shadow: 0 1px 0 #EEE;
    }

    If you need further assistance with this, please let us know.

    Getting the "Clear Form" button to remove the error highlighting as well as the entries is a good idea and as such, I will submit a ticket requesting the feature. Until it's implemented (assuming it will be at some point) perhaps my colleagues may be able to provide a solution involving JavaScript to have the button remove the highlighting.