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 can I change a required field from displaying an error message to highlighting it in red?

    Asked by Got2Join on September 15, 2015 at 12:56 PM

    When a user fails to enter a required field on my form it's displaying the error message which is blowing out my page. How do I change this to highlight the required filed in red if not entered instead on displaying the error message?

    Page URL:
    http://2playnwin.com/promotions/en/

    Screenshot
    required field message displaying in
  • Profile Image
    JotForm Support

    Answered by KadeJM on September 15, 2015 at 02:45 PM

    To my understanding it appears you are having issues with your required field being forced off your page if not filled in.

    I see that you seem to be using a Mac and unfortunately I can't seem to replicate this problem since I am on Win 10 even though I did try this on a Mac Emulator.

    Could you please let us know what Mac OSX and Browser|Browser Version you are experiencing this issue in?

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 15, 2015 at 03:28 PM

    Update -

    I had our iOS Dev test this for me since has a Mac with which he was able to replicate the issue to confirm it for me.

    Please try injecting this extra line of css code into your form to hide the form error message to see if this will possibly help to correct the issue. The error message is appearing and that seems to shift it upwards so doing this should allow the field to be required but stay in the same spot.

     

    Code:

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

     

    Result: