Form-Fehlermeldungen ohne Weiterleitung: So geht’s mit JavaScript und Turnstile

Standardmäßig zeigt WordPress Fehler beim Absenden eines Kommentars mit Captcha oft auf einer separaten Fehlerseite (z.B. wp-comments-post.php) an. Das ist nicht benutzerfreundlich, da Besucher den eingegebenen Kommentar verlieren können. Ich zeige dir, wie du mit JavaScript und Cloudflare Turnstile diesen Fehler direkt im Kommentarformular anzeigen kannst.

1. Problem verstehen

Ohne Anpassung:

• Besucher füllt das Kommentarformular aus, aber bestätigt das Turnstile Captcha nicht.
• Kommentar wird abgeschickt und der Benutzer wird zu einer Fehlerseite (wp-comments-post.php) weitergeleitet.
• Kommentartext geht verloren.

Besser:

• Besucher erhält die Fehlermeldung direkt über dem Kommentarformular.
• Kommentartext bleibt erhalten.

2. Lösung: JavaScript zur Validierung

Füge folgenden Code direkt vor dem schließenden </body>-Tag in die footer.php deines Themes oder über ein Custom-JS-Plugin hinzu:

<?php if ( ! is_user_logged_in() ) : ?>
    <!-- JS-Code wird hier eingefügt -->
<?php endif; ?>

JS Code Hier

document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('commentform');
    if (!form) return;

    form.addEventListener('submit', function(e) {
        var oldMsg = document.getElementById('turnstile-error');
        if (oldMsg) oldMsg.remove();

        var turnstile = document.querySelector('[name="cf-turnstile-response"]');
        if (!turnstile || !turnstile.value) {
            e.preventDefault();

            form.insertAdjacentHTML('beforebegin',
                '<p id="turnstile-error" style="color: #fff; background: #c0392b; padding: 10px; border-radius: 5px; margin-bottom:10px;">Bitte bestätige das Captcha, um deinen Kommentar abzusenden.</p>'
            );
        }
    });
});

3. Funktionsweise erklärt

• Der Code prüft zuerst, ob der Besucher eingeloggt ist. Wenn ja, überspringt er die Captcha-Kontrolle.
• Wenn nicht eingeloggt, überprüft der Code bei Klick auf „Kommentar absenden“, ob das Turnstile-Captcha ausgefüllt wurde.
• Wenn nicht, wird das Abschicken des Formulars verhindert und eine freundliche, rote Fehlermeldung direkt über dem Kommentarformular angezeigt.

4. Hinweise zu Zeichenproblemen (Umlaute)

Sollten Umlaute (ä, ö, ü, ß) falsch dargestellt werden, verwende HTML-Entities wie in unserem Beispiel:

• ä → ä
• ö → ö
• ü → ü
• ß → ß

Fazit

Mit dieser Methode bleibt der Besucher auf der gleichen Seite, verliert seinen eingegebenen Text nicht und erhält direktes Feedback zur Fehlerbehebung. Dadurch verbesserst du deutlich die Nutzererfahrung deiner Website!