Required Field Warning Covers Fields

  • Profile Image
    FHCA
    Asked on August 15, 2019 at 12:59 AM

    Hi there,

    I created a form and designated several fields as 'required' data in order to submit the whole form.

    My problem is that when the user clicks in a required data field and then clicks into a different field, immediately a red warning message bar appears overlaying the required field with the message 'This field is required'.

    That's all well and good but there seems to be no way to make the red message bar go away. Because it is covering over the field, the user cannot click back into the field.

    The only way to seem to overcome this is to reload the page and that's majorly inconvenient when it's happening near the end of the form and lots of data has been properly input - only to have it erased when reset.

    SO - the question is - how do I as the designer prevent this from happening in this manner (without removing the required field status) OR is there some trick the user can do to make the error message go away.

    Just as a suggestion, it would be better if the error message appeared NEXT to the field and pointed at the culprit, rather than covering it in a big slab of red.

    I have attached an example image with the actual form's url above for your reference. You can see several red bars where I clicked on the field and then clicked out, triggering the message.

    This has frustrated MANY of my form's applicants.

    What can be done?

    Screenshot
  • Profile Image
    BJoanna
    Answered on August 15, 2019 at 05:45 AM

    Sorry for the inconvenience this may have caused you. I suspect that the issue is related to the custom CSS of the Theme that you are using. 

    Please add the following CSS code to your form to resolve the issue:

    .form-line-error .form-error-message {

        position: relative!important;

    }

    How to Inject Custom CSS Codes

    After you add the CSS code the error will be shown like this. 

    1565862234error.PNG

  • Profile Image
    FHCA
    Answered on August 15, 2019 at 11:44 AM

    Mucho thanks!

    That resolved the funky field overlay nicely.

    Tom