Change the warning design.

  • Profile Image
    Marc
    Asked 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. 

  • Profile Image
    liyam
    Answered 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
    abajan
    Answered 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
    Adforum
    Answered on August 28, 2011 at 04:00 AM

    Than you Liyam and Wayne! :)

    Regards,

    Marc

     

  • Profile Image
    abajan
    Answered 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
    stevenyilin
    Answered 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
    stevenyilin
    Answered 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
    idarktech
    Answered 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
    AlbertLEROI
    Answered 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
    abajan
    Answered 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.