Custom form validation error locations


#1

Hi there, I am trying to make a form that displays inline where the email shows to the left of the submit button.

The issue is I can't figure out how to properly display the error messages so that they don't obstruct the form (issue image: 05%20PM). The error messages seem to just push the other form elements down and thus overlap other elements on the page.

I am trying to find a way to do one of the following:

A) position the error messages above the entire form or after the entire form.
OR . . .
B) find a custom js event with the error messages so that I can display them myself within the HTML in a different way


#3

Hi @winemiller43, happy to help here -- would you mind sending over the page this form lives on so I can take a closer look?


#4

Site is https://topfunnel.co

Happens in the header and footer form. I have put a temporary fix but using absolute positioning but that is not a great solution. If possible, being able to dynamically show the error messages (i.e. custom JS) would be much better to generate the correct user experience.

  • Ryan

#5

Hi @winemiller43, absolute positioning is the way I would go. JavaScript would be unnecessary in this situation. If you do use absolute positioning on the inline messaging, make sure the containing div is positioned relatively, so that you won't have to worry about positioning the inline message just right. If the containing div is set to position: relative; then all you'll need to do is set a top value on your absolutely positioned inline message and you should be set.