Form Field Error Message location and format

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

  • Profile Image
    egeg
    Answered 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
    AA_C
    Answered on September 15, 2014 at 09:38 AM
  • Profile Image
    Carina
    Answered 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
    AA_C
    Answered on September 15, 2014 at 12:43 PM
  • Profile Image
    AA_C
    Answered on September 15, 2014 at 01:52 PM
  • Profile Image
    AA_C
    Answered 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
    AA_C
    Answered 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