WordPress: Contact Form 7 und das fehlende .screen-reader-response

Seit einigen Versionen gibt es in Contact Form 7 das Problem, dass in manchen Browsern die Fehlermeldung gezeigt wird, dass .screen-reader-response [role="status"] nicht zu finden ist und das Formular deshalb nicht korrekt abgesendet werden kann. Hier findest du einen Workaround, ohne Programmierkenntnisse, da dieser direkt in das Formular eingetragen wird.

Contact Form 7 hat es nicht so mit dem Support, weshalb ich das Plugin auch nicht mehr empfehle. Bessere Alternativen (die womöglich etwas überladen sind) sind WPForms und Gravity Forms.

In Contact Form 7 gibt es seit einigen Versionen grundsätzlich zwei Baustellen: Google reCAPTCHA funktioniert nicht und die Browserkonsole spuckt Fehlermeldungen u.a. in Edge und Firefox aus. Chrome scheint bei den meisten zu funktionieren, auch Edge Chromium.

Heute geht es um die Fehlermeldungen und einen Workaround, der diesen Fehler fürs Erste beseitigt. Die Fehlermeldung kommt zustand, da das JavaScript von Contact Form 7 nach der CSS-Klasse .screen-reader-response sucht, die aber komischerweise nicht immer zu finden ist. Das sorgt dafür, dass das Formular nicht korrekt versendet wird. Das lässt sich gut beobachten, wenn das Formular nach dem Absenden die Seite neulädt.

Ein schneller Fix:

<div class="screen-reader-response">
    <div role="status"></div>
</div>Code-Sprache: HTML, XML (xml)

Diesen Schnipsel musst du lediglich im Formular platzieren. Das geht direkt im wp-admin unter Formulare. Dort wo du auch die anderen Felder findest. Da der Editor HTML unterstützt, sorgst du mit diesem Schnipsel dafür, dass die CSS-Klasse .screen-reader-response immer existiert und das Formular wie gewohnt abgesendet wird.