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

    Form Warnings not showed

    Asked by frankieionit on February 27, 2013 at 03:45 PM

    Hi there, I'm having a little trouble with the form warnings. I tried few form templates and in some of them the form warning are showed (for example if I insert a wrong email address) but in the template that I've chosen to use it it shows only a red border and not the warning message.

    The template i'm using is Mosi (https://www.jotform.com/form-templates/mosi) and the Custom Injected CSS is the following:

     

    /*--move button--*/

    #id_8{

    margin-left:26px !important;

    margin-top:18px !important;

    padding:0px !important;

    }

    /*--fix name, email,website margin left--*/

    #id_1, #id_3,#id_6{

    margin-left:15px;

    }/*--border bottom--*/

    #id_7{

    padding:0px !important;

    }

    .form-html{

    padding:0px !important;}

    p.borderbottom{

    background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6156_form_bottom.gif) no-repeat 0 100%;

    padding: 0 29px 20px 25px;

    margin: 0;

    width:600px;

    }

    /*--position textarea---*/

    #id_5{

    position: absolute;

    top: 0px;

    left: 290px;

    }/*---rounded corners---*/

    .form-all input,.form-all select,.form-all textarea {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    -moz-box-shadow: 0px 0px 4px #C0C0C0 !important;

    -webkit-box-shadow: 0px 0px 4px #C0C0C0 !important;

    box-shadow: 0px 0px 4px #C0C0C0 !important;

    }

    /*--form all styles--*/

    .form-all{

    background:url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6154_form_top.gif) no-repeat 0 0;

    float:left;

    }

    /*---remove error message---*/

    .form-error-message {display: none !important;}

    .form-line-error {

    background:none repeat scroll 0 0;

    }

    /*---button error move down---*/

    .form-button-error {

    display: block !important;

    }

    .form-all textarea{

    height: 195px !important;

    max-height: 195px !important;

    min-height: 195px !important;

    }

    .form-all input:focus, .form-all textarea:focus{

    outline:none;

    }/*--add red border on error--*/

    .form-validation-error {

    border: 1px solid red !important;

    }

     

     

    I tried to deleted the part highlighted in yellow first, keeping the highlighted green one but nothing changed. Done the opposite, same result.

     

    Could you please try to do the same or tell me the solution for this little issue. Would be much appreciated. Thanks a lot.

     

     

    Page URL:
    http://francescotonello.tumblr.com/bio

  • Profile Image
    JotForm Support

    Answered by jonathan on February 27, 2013 at 07:02 PM

    Hi,

    If I understand correctly, what you wanted to do is to re-enable the form warning on the required fields.

    Test this form http://www.jotformpro.com/form/30577643640961 .Is this how you wanted it? 

    I did this by removing a few lines on the injected CSS code on the form (a clone of your form). 

    This are the codes I removed:

     

    /*---remove error message

    .form-error-message {display: none !important;}

    .form-line-error {

    background:none repeat scroll 0 0;

    }---*/

     

    *---button error move down .form-button-error { display: block !important; }---*/

    /*--add red border on error

    .form-validation-error {

    border: 1px solid red !important;

    }--*/

     

    You can also just copy the whole CSS codes from here and paste it to your form by overriding the existing css codes.

    Hope this help. Inform us if you need further assistance.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on February 27, 2013 at 07:04 PM

    Sorry, I missed the css codes. You can get it from here instead

    Thanks

  • Profile Image

    Answered by frankieionit on February 27, 2013 at 07:46 PM

    Thanks for your reply.

    That is exactly what I want, without the red highlight big stripe if possible (but that's a minor problem for now, let's focus on the main one) 

    I tried to do how you said deleting those lines code but it does not work, both with Safari and Firefox. I even try to empty the cache, close the browsers and reopen the website (if that would help, don't really know...)

    Please check if it works for you, if it shows the form warning. To me it does not, still red border only.

    The form is here: http://francescotonello.tumblr.com/contact

    Also, as you can see, my body in my website is 520px, and the form does not fix that dimension.

    Tried already to change form dimension in pref - form style - form width with value 500 (rather than the default 600).

    On the css I changed the width to 500 in .form-html. but seems not to work, the rounded corners on the left (both top and bottom) are not showed.

    Is it possible to get the rounded corner fitting my page dimension?

     

    Here a picture of how I see at the moment my form: http://s3.postimage.org/z5g51g39f/Picture_1.png

    Here my new css as it is at the moment:

    /*--move button--*/

    #id_8{

    margin-left:26px !important;

    margin-top:18px !important;

    padding:0px !important;

    }

    /*--fix name, email,website margin left--*/

    #id_1, #id_3,#id_6{

    margin-left:15px;

    }/*--border bottom--*/

    #id_7{

    padding:0px !important;

    }

    .form-html{

    padding:0px !important;}

    p.borderbottom{

    background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6156_form_bottom.gif) no-repeat 0 100%;

    padding: 0 29px 20px 25px;

    margin: 0;

    width:500px;

    }

    /*--position textarea---*/

    #id_5{

    position: absolute;

    top: 0px;

    left: 290px;

    }/*---rounded corners---*/

    .form-all input,.form-all select,.form-all textarea {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    -moz-box-shadow: 0px 0px 4px #C0C0C0 !important;

    -webkit-box-shadow: 0px 0px 4px #C0C0C0 !important;

    box-shadow: 0px 0px 4px #C0C0C0 !important;

    }

    /*--form all styles--*/

    .form-all{

    background:url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6154_form_top.gif) no-repeat 0 0;

    float:left;

    }

    .form-all textarea{

    height: 195px !important;

    max-height: 195px !important;

    min-height: 195px !important;

    }

    .form-all input:focus, .form-all textarea:focus{

    outline:none;

    }

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on February 28, 2013 at 12:13 AM

    Hi,

    Inject this codes to your form:

    .form-line-error {

    background: transparent !important;

    }

    .form-error-message {

    width: 200px !important;

    }

    .form-all {

    background-size: 499px !important;

    }

    #input_5 {

    width: 245px !important;

    }

    Guide: How to Inject Custom CSS Codes

    Next, on the injected custom CSS codes, find:

    #id_5 {

    position: absolute;

    top: 0px;

    left: 290px;

    Adjust the Left from 290px to 220px

    Result:

    Let us if this not address the looks you want into your form.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on February 28, 2013 at 12:17 AM

    Hi,

    The changes should now be visible on your end, I have cleared your forms cache. 

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on February 28, 2013 at 12:36 AM

    Hi,

    I read up again your message and it was clear to me that the bottom is not yet fixed. Please kindly clone this form and use it instead:

    http://www.jotformpro.com/form/30580836181959

    Guide: How to Clone a Form from a Web Page

    This is the whole view of the form:

    Thanks

  • Profile Image

    Answered by frankieionit on February 28, 2013 at 05:01 AM

    hi, thanks a lot now is working! I understood the changes for the form warnings, thanks!

    How did you clear the form cache? Can I do it as weel? (what is need for?).

    Another thing, how did you fix the bottom part? Did you change something in the css?

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 28, 2013 at 07:12 AM

    How did you clear the form cache? Can I do it as weel? (what is need for?).

    It can only be done on our side. It's probably an update delay issue and the best way to fix it if you are experiencing it on your end is to replace "form" to "www" on the form URL. Example:

    http://www.jotformpro.com/form/30580836181959

    Another thing, how did you fix the bottom part? Did you change something in the css?

    While my colleague who fixed this for you isn't yet around, I couldn't answer you exactly about the this but to my guess it's something to do with this CSS.

     

    #id_13 {

    background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6156_form_bottom.gif) no-repeat 0 100%;

    background-size: 499px !important;

    }

    This is the ID of the html field found on the bottom part of your form.

    Thanks!