Contact form 7, how is the error location determined?

Question

Text analysis

Why in different forms everything is different for me, somewhere an error about an empty form is displayed below in the form container, somewhere it goes beyond this form, somewhere there is an error "The field is not filled", somewhere not. What does it depend on and how to manage it?

Answer 1

It's pretty simple...
When you send a contact form request via ajax, you get a response from the server.
Here is the screen:

And then the script handler, according to the response from Ajax, inserts the necessary span with messages.
Here is the screenshot:

<span role="alert" class="wpcf7-not-valid-tip">Поле обязательно.</span>

For styling, use this class wpcf7-not-valid-tip
. And here is another block that shows a message from the server:

Style the class -wpcf7-response-output

<div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert">Одно или несколько полей содержат ошибочные данные. Пожалуйста проверьте их и попробуйте ещё раз.</div>

somewhere an error about an empty form is displayed below in the form container, somewhere it goes beyond the limits of this form, somewhere there is an error "The field is not filled", somewhere not

It is possible that the styles for the span tag are simply overwritten and, accordingly, all the difference is manifested in this