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 Field Error Message location and format

    Asked by AA_C on September 15, 2014 at 04:50 AM

    Is there a way to relocate the form fields error message;

    There are errors on the form. Please fix them before continuing.

    To another location on my forms, also font color and size.

    I want the message to appear at the top or perhaps in the middle of the forms.

    Page URL:
    http://www.aac.ca/en/forms/inc/dogid.html

    Screenshot
    message My Forms error message field warning
  • Profile Image
    JotForm Designer

    Answered by egeg on September 15, 2014 at 08:44 AM

    Hi there,

    You can do this by using the Inject CSS functionality. (More info on how to use Inject CSS)

    For the font color and size you can use the example css below:

    .form-button-error {
        color:red;
        font-size:12px;
    }

    Having them appear at top or middle is a bit more tricky, but if you can tell us how you want it to be in more detail, we can come up with the relevant css for you.

    Hope this helps. Please let us know if there's anything else we can help you with.

    Edit: I misunderstood which error message you wanted to change in the first go. Answer updated to correct one. 

  • Profile Image

    Answered by AA_C on September 15, 2014 at 09:38 AM
  • Profile Image

    Answered by Carina on September 15, 2014 at 11:47 AM

    Please try adding this css code:

     

    .form-button-error

    {

    position:absolute;

    top:-350px;

    }

    You can test and clone the demo form:

    http://form.jotformpro.com/form/42574192318962? 

    You can adjust the values so that the error message is displayed in the place where you wish.

    Let us know if we can assist you further.
    Thank you

  • Profile Image

    Answered by AA_C on September 15, 2014 at 12:43 PM
  • Profile Image

    Answered by AA_C on September 15, 2014 at 01:52 PM
  • Profile Image

    Answered by AA_C on September 15, 2014 at 02:36 PM

    I'm Sorry this script did work..

     .form-button-error{

                position:absolute;  

                top:-409px;left:190px;font-size:11pt;color:#FE006F;

             }

     

    Thank you very much

  • Profile Image

    Answered by AA_C on September 15, 2014 at 03:40 PM

    I'm Sorry this script did work..

     .form-button-error{

                position:absolute; top:-409px;left:190px;font-size:11pt;color:#FE006F;

             }

    although using this worked a better for centering the text and I did not require the left syntax;

    .form-button-error{

                position:relative; top:-460px; font-size:11pt; color:#FE006F; 

             }

     

    Thank you very much