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 do I change the alignmeng, font name and font color in form warnings?

    Asked by alvincosio on June 21, 2013 at 01:27 PM

    Hi,

     

    please help me to change alignment warning, font name and font color background in form warning .

    i found example of what my form will look at (see this link  

    http://imageshack.us/photo/my-images/837/zx4m.jpg/)

     

    when there a problem in the form the main warnings will go to the upper portion of the form

     

    thanks in advance

    Alvin'

     

    http://sit.moonfruit.com/contact/4577056164

    name font color font form warnings
  • Profile Image

    Answered by EliezerN on June 21, 2013 at 02:44 PM

    Hello, 

     This possible by applying Custom CSS Code.

    Please insert the next code to your form:

    .form-input .form-error-message,

    form-input-wide .form-error-message 

    {

    background: none repeat scroll 0 0 #0000FF;

    font-family:georgia;

    }

    .form-error-arrow

    {

    border-bottom-color:#0000FF;

    }

    .form-line-error

    {

    background: none repeat scroll 0% 0% transparent;

    }

    Explanation:

    This will change the background color and the Font family:

    background: none repeat scroll 0 0 #0000FF;

    font-family:georgia;

    In my example the background color is blue, you can can choose more from colors HERE or you can set it up to transparent if you prefer. The font family is Georgia.

    I cloned  your form and did the changes, here it is: http://www.jotform.com/form/31715395164961

    I hope this helps you. Let us know if need further assistance.

    Thanks!

     

  • Profile Image

    Answered by alvincosio on June 21, 2013 at 03:07 PM

    sorry for my english.  does not what i mean, i want the same alignment of warning same exactly in the picture i attached.

     

    here is the link of what i mean, i want something exactly like that.

    http://imageshack.us/photo/my-images/837/zx4m.jpg/

     

    Thank you in advance :D

  • Profile Image

    Answered by pinoytech on June 21, 2013 at 03:47 PM

    Hi,

    I've cloned your form and made some workaround on it. Can you please take a look at this form if this is what you want to achieved? http://www.jotformpro.com/form/31716000458951

    Thank you!

  • Profile Image

    Answered by alvincosio on June 21, 2013 at 04:05 PM

    somehow that is good, but i need the main warning on the top with borders on it. is that possible?

     

    see this link so you can see what i mean

     

    http://imageshack.us/photo/my-images/856/bqjp.jpg/

     

    thanks in advance

  • Profile Image

    Answered by pinoytech on June 21, 2013 at 04:21 PM

    Hi,

    I've updated the form. Can you please take a look at it again? http://www.jotformpro.com/form/31716000458951

    Thank you!

  • Profile Image

    Answered by alvincosio on June 21, 2013 at 04:29 PM

    wow you rock.

    one more favor, can you give a spacing between the main warning and the form

    something like this

    http://imageshack.us/photo/my-images/708/mphl.jpg/

     

    thanks in advance :D

  • Profile Image

    Answered by pinoytech on June 21, 2013 at 04:32 PM

    Hi,

    As per requested, I've updated the form again. http://www.jotformpro.com/form/31716000458951

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by alvincosio on June 21, 2013 at 04:39 PM

    thank you for your help you really help me a lot.

    sir, where can i find the code to inject to css? 

    thanks man! :D

  • Profile Image

    Answered by alvincosio on June 21, 2013 at 04:40 PM

    opps wait where can i find the code to inject to css? hehe

  • Profile Image

    Answered by pinoytech on June 21, 2013 at 05:01 PM

    My apologies. Here's the codes:

    .form-all {

    padding-top: 50px !important;

    }

    .form-button-error {

    border: 1px solid #FAA;

    -webkit-border-radius: 10px !important;

    width: 690px;

    position: absolute;

    margin-top: -327px !important;

    font-weight: bolder;

    font-size: 13px;

    }

    .form-error-message {

    display: none;

    }

    If you need our assistance again, please don't hesistate to contact us at anytime.

    Have a nice day!

  • Profile Image

    Answered by alvincosio on June 21, 2013 at 05:20 PM

    thanks for that.

     

    but when i test it thru ie the border in main warning is broken and the radius is not there is just simple ractangle only, but in safari, chrome, firefox the border seems ok.

     

    see this link

    http://imageshack.us/photo/my-images/18/gckc.jpg/

  • Profile Image
    JotForm Support

    Answered by Welvin on June 21, 2013 at 05:54 PM

    Hi,

    That is basically how IE Works, but there's a workaround. We'll get back to your later today.

     

    Thanks

  • Profile Image

    Answered by alvincosio on June 21, 2013 at 06:02 PM

    THANK YOU, I JUST WAIT FOR YOUR REPLY. :D

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 21, 2013 at 09:53 PM

    @alvincosio

    IE9+ supports border radius though it was missing on the CSS code that's why its not affecting IE9 browser. Anyway, to continue my colleagues work, try this CSS:

    .form-all {

    margin-top: 30px !important;

    }

    .form-button-error p {

    border: 1px solid #FAA;

    -webkit-border-radius: 10px !important;

    -moz-border-radius: 10px !important;

    border-radius: 10px !important;

    width: 597px;

    position: relative;

    z-index:11111;

    top: -325px;

    left:0;

    font-weight: bolder;

    font-size: 13px;

    padding:10px 0;

    }

    :root .form-button-error p { top: -310px \0/IE9; } 

     

    .form-button-error{

    height:0 !important;

    display:block !important;

    position:absolute;

    }

    .form-error-message {

    display: none;

    }

    Result in IE9:

    Hope this helps. Thank you!

  • Profile Image

    Answered by alvincosio on June 24, 2013 at 10:27 AM

    it works, but can you create a spacing between the border to the main fields?

     

    see this link

    http://imageshack.us/photo/my-images/832/iuxc.jpg/

     

    Thanks in advance

  • Profile Image

    Answered by jefreylandicho on June 24, 2013 at 10:38 AM

    Please add the CSS code below and it should provide a space in the top. 

    .form-all { margin-top: 30px; }  

  • Profile Image

    Answered by alvincosio on June 24, 2013 at 10:42 AM

    not working sir. still there is no space between the border and the fields.. :(

  • Profile Image

    Answered by pinoytech on June 24, 2013 at 10:57 AM

    Hi,

    I have now fixed the issue of your form. Can you please take a look at it now if I did it correctly or not? Here's how it looks like on my end using IE browser.

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by alvincosio on June 24, 2013 at 11:04 AM

    yeah works in ie, but it other browser the border and the field is just a little space between them, need more space please. thanks

  • Profile Image

    Answered by pinoytech on June 24, 2013 at 11:50 AM

    Hi,

    I've updated your custom css again, can you please take a look at it now if looks fine on your end?

    Thank you!

  • Profile Image

    Answered by alvincosio on June 24, 2013 at 12:01 PM

    wow. it is okay now. it works in all browser. thank you very much sir, have a nice day! :D

  • Profile Image

    Answered by pinoytech on June 24, 2013 at 01:59 PM

    It's my pleasure Alvin! Glad to hear that. If you need our assistance again, feel free to contact us at anytime.

    Have a nice day!