Error messages are hiding the fields

  • rtolmach
    Asked on December 17, 2017 at 4: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





    Jotform Thread 1325629 Screenshot
  • David JotForm Support Manager
    Replied on December 17, 2017 at 4:31 PM

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

  • rtolmach
    Replied on December 17, 2017 at 5: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


    ...
  • jonathan
    Replied on December 17, 2017 at 5: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 Screenshot 10


    We will wait for your updated response.

  • rtolmach
    Replied on December 29, 2017 at 1: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 Screenshot 10



    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 Screenshot 21



    #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 Screenshot 32



    #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 Screenshot 43



    #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 Screenshot 54



    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 Screenshot 65


    Thanks!

  • David JotForm Support Manager
    Replied on December 29, 2017 at 1: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;

    }