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

    Format error message "There are incomplete required fields. Please complete them."

    Asked by oxinst on April 11, 2013 at 09:15 AM

    Hi, what CSS do I need to change the formatting of the error messsage "There are incomplete required fields. Please complete them.".  If I would like to make the test blue, and align left, what is the CSS need?


    Thanks

    message format thanks align left
  • Profile Image

    Answered by sidharth_kch on April 11, 2013 at 09:33 AM

    @oxinst

    Please refer this thread for your requirement: http://www.jotform.com/answers/35144-CAN-I-CHANGE-THE-COLOR-OF-THE-WARNING-AND-ERRORS 

    This helps you! Let us know if you need further assistance.

    Thanks,

    Sidharth

  • Profile Image

    Answered by oxinst on April 11, 2013 at 10:27 AM

    Thanks for the quick response, got the format fix now.

    is it possible to move this error text to above the submit button, rather than below it?

  • Profile Image

    Answered by sidharth_kch on April 11, 2013 at 10:38 AM

    @oxinst

    I dont think that will be possible but i am forwarding your request to colleague to see if thats possible.

    Thanks,

    Sidharth

  • Profile Image

    Answered by sidharth_kch on April 11, 2013 at 10:46 AM

    @oxinst

    Can you please try to inject this css for your form "22972876980370" and see if this is what you want?

    .form-button-error {

    position: absolute;

    top: -20px;

    left:8px;

    }

    Let us know if this helps you.

    Thanks,

    Sidharth

  • Profile Image

    Answered by oxinst on April 11, 2013 at 11:19 AM

    Thanks.  That works and moved the text, however, the text then wrapped over the button, because it was over two lines.  I guess it can't be done.

    Thanks

  • Profile Image

    Answered by jefreylandicho on April 11, 2013 at 11:37 AM

    Please try adding the CSS code below in your form styles and see if it works.

    .form-button-error p { position:absolute;top:-25px; } /* You can change the top value */

  • Profile Image

    Answered by oxinst on April 12, 2013 at 06:53 AM

    @jefreylandicho

    Thanks for your help.  Unfortunatly, still get the same problem.


    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on April 12, 2013 at 08:59 AM

    Hi,

    Is this what you mean?

    If yes, then please inject this custom CSS codes to your form:

     

    .form-button-error { color: rgb(0, 61, 255) !important; text-align: left !important; }

    Guide: How to Inject Custom CSS Codes 

    Thanks

     

  • Profile Image

    Answered by oxinst on April 15, 2013 at 04:59 AM

    @Welvin


    Thanks for your reply.  See the image for what I am looking to achieve.


    Also you can see the form here http://form.jotformeu.com/form/30992160585358

    Thanks

  • Profile Image

    Answered by sidharth_kch on April 15, 2013 at 05:59 AM

    @oxinst

    Please check this form and let me know if this is what you are looking for.

    http://www.jotform.com/form/31042049537954?

    Thanks,

    Sidharth

  • Profile Image

    Answered by oxinst on April 15, 2013 at 07:09 AM

    @sidharth_kch,

    that is fine when your browser is full width, but if you make your browser narrow (eg for a mobile device), the text then scrolls over the submit button.

    See the image below

    Thanks


  • Profile Image
    JotForm Support

    Answered by abajan on April 15, 2013 at 07:18 AM

    It's likely the absolutely positioning that's causing this because elements which are so positioned are removed from the document, as explained here. I think some sort of relative positioning might be a better choice. We'll see if we can find a solution for you.

  • Profile Image
    JotForm Support

    Answered by abajan on April 15, 2013 at 08:29 AM

    @oxinst

    After some experimentation, I realized that this would likely require a JavaScript solution due the error message being a dynamically generated element. This can be seen in Chrome if the submit button is right-clicked and then "Inspect Element" clicked:


    Now, look at the bottom panel containing the hierarchy of the form's structure and notice what happens when the form's fields are left blank and the submit button clicked. An extra HTML element containing the error message is generated:


    This would require embedding a copy of the form's source into a web page and adding a script of some sort. Would this be a viable option for you?

  • Profile Image

    Answered by oxinst on April 15, 2013 at 11:23 AM

    @abajan, thanks for the support, I'll give this a go

     

    Thanks


  • Profile Image
    JotForm Support

    Answered by abajan on April 15, 2013 at 02:56 PM

    @oxinst

    Hopefully, I should have a solution for this sometime later today (Barbados time).

  • Profile Image
    JotForm Support

    Answered by abajan on April 15, 2013 at 06:49 PM

    Hi again

    Please test this demo. If the error message is correctly positioned, here's how to apply the workaround to your own form:

    1. Add the following rules to its current injected CSS:

    .form-button-error {
    display: none;
    }

    .form-button-error2 {
    color: #C00;
    font-weight: 600;
    }

    .form-button-error2 p {
    margin-top: 0;
    }

    2. Copy the form's full source (see this guide) and embed it into the body of a web page of your choice

    3. Copy this code and paste it anywhere after the form's code, preferably at the bottom of the web page

    That should do it. Should you run into any difficulties, please let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on April 15, 2013 at 07:01 PM

    Oops! I forgot something ...

    Search my demo's source for this block of code and note where it's positioned. You'll need to insert that same block into the same position of your form's code after embedding it into the web page.