Error messages are hiding the fields

  • Profile Image
    rtolmach
    Asked on December 17, 2017 at 04:08 PM

    Hi

    A suggestion . . .

    Your advanced form builder lets us choose among several display options when a user puts in bad info (or no info). However, none is very good. 

    The options like I show in this screen grab hide the question--even when the person clicks in the field to provide the missing answer.

    The option with the yellow exclamation mark lets you see the question, but it looks really garish.

    Why not make one like the one I attached, but with the messages above each question--not hiding the questions.


    Thanks!
    Robert





  • Profile Image
    BDAVID
    Answered on December 17, 2017 at 04:31 PM

    Can you let us know what is the form where you are experiencing the issue?

  • Profile Image
    rtolmach
    Answered on December 17, 2017 at 05:43 PM
    Sure. https://www.jotform.com/build/73505129184153#preview
    I currently have it set for the garish version with the yellow exclamation mark. Looks bad, but at least the visitor can read the questions, unlike the style shown in the screen grab I sent.

    thanks

    Robert Tolmach
    Co-Founder
    ChangingThePresent.org
    rtolmach@ChangingThePresent.org


    ...
  • Profile Image
    jonathan
    Answered on December 17, 2017 at 05:58 PM

    Hi Robert,

    Is the problem only happens when using the embedded form on the website? Can you share to us the URL of your website where we can test the actual form used.

    I could not replicate the issue when using the direct URL of the form only.

    1513551469zzz 2017-12-18 06.55.51.png


    We will wait for your updated response.

  • Profile Image
    rtolmach
    Answered on December 29, 2017 at 01:02 PM


    Yes, this happens in a live site (embedded form), too. Also, this entire selector is a bit odd.

    I made a clone of a similar form, just to share this with you. It is:

    https://www.jotform.com/build/73625361784160 


    The selector in Advanced Design shows four Error Styles, but as you will see, from this image, it does not show them very clearly (where is the label, the cell, and the message? It is entirely unclear). In fact, only one of the four (#1) actually looks at all like any of these images.



    1514569519menu 2.JPG



    Here is what I see as the simulated error state for each of the four styles:


    #1 - I can read the label, but this looks garish. It is the only one of the four that looks like the corresponding style selector image on the right.

    1514569615error state - 1.JPG



    #2 - This is just a bizarre mishmash of darker read and some little white areas on the right edge, and no error message.  Also, it does not look at all like the style selector image on the right. Fail.

    1514569649error state - 2.JPG



    #3 - The error messages look better than #1, but they are on top of the labels, so the visitor cannot read what he is supposed to enter.  Also, it does not look at all like the style selector image on the right.

    1514569678error state - 3.JPG



    #4 - The error messages look similar to #3. They are also on top of the labels, so the visitor cannot read what he is supposed to enter.  Also, it does not look at all like the style selector image on the right.

    1514569708error state - 4.JPG



    The first of those choices with the exclamation mark in a yellow circle is the only one that does not hide the label (which makes it impossible for the person to know what to enter).


    The problem is the same in the embedded form as it is in the preview mode. For instance, see this image. I grabbed the URL for you to see, along with the form - https://fanatics-books.myshopify.com/pages/sandbox-jotform   That is style #4, and the error message covers the labels.  


    1514569947in live site.JPG


    Thanks!

  • Profile Image
    BDAVID
    Answered on December 29, 2017 at 01:44 PM

    Please apply style option #1, and inject this CSS code to make it look less garish: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-line-error {

      background-color: transparent !important;

    }