CF7 aller Felder müssen ausgefüllt sein

Um sicherzustellen, dass bei einem Contact Form 7 (CF7) Formular alle Felder ausgefüllt werden müssen und nicht leer abgesendet werden können, kannst du die integrierte Validierung von CF7 nutzen. Das ist der einfachste Weg, um sicherzustellen, dass alle Felder ausgefüllt sind, bevor das Formular abgeschickt wird.

Hier ist, wie du das umsetzen kannst:

Schritt 1: Erstellen oder Anpassen deines CF7-Formulars

Du musst sicherstellen, dass alle Felder als Pflichtfelder (required) definiert sind. Dies kannst du durch ein einfaches Hinzufügen des Sternchens * neben jedem Feldtypen erreichen.

Schritt 2: Erweiterte Validierung mit JavaScript (Optional)

Falls du zusätzliche Sicherheit oder spezielle Anforderungen benötigst, kannst du benutzerdefiniertes JavaScript hinzufügen, das sicherstellt, dass alle Felder ausgefüllt sind, bevor das Formular abgeschickt wird.

Füge das folgende JavaScript in dein Theme ein (z.B. in der footer.php, in der functions.php oder über ein Plugin wie „Insert Headers and Footers“):

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.wpcf7 form');
    const submitButton = form.querySelector('input[type="submit"]');

    submitButton.addEventListener('click', function(event) {
        let allFieldsFilled = true;

        form.querySelectorAll('input[type="text"], input[type="email"], textarea').forEach(function(field) {
            if (field.value.trim() === '') {
                allFieldsFilled = false;
                field.style.borderColor = 'red'; // Markiere das leere Feld
            } else {
                field.style.borderColor = ''; // Entferne Markierung, falls Feld gefüllt ist
            }
        });

        if (!allFieldsFilled) {
            event.preventDefault(); // Verhindert das Absenden des Formulars
            alert('Bitte füllen Sie alle Felder aus.'); // Zeigt eine Benachrichtigung an
        }
    });
});

Schritt 3: Testen und Anpassen

• Testen: Gehe auf die Seite mit deinem Formular und versuche, es ohne ausgefüllte Felder abzusenden. Du solltest eine Fehlermeldung erhalten und die leeren Felder sollten markiert sein.
• Anpassen: Du kannst die Fehlermeldung und die visuelle Darstellung der Fehler entsprechend deinen Anforderungen anpassen.

Zusammenfassung

Durch die Kombination von CF7’s integrierter Validierung und optionalem JavaScript stellst du sicher, dass alle Felder in deinem Formular ausgefüllt sind, bevor es abgesendet wird. Dies hilft, die Datenintegrität zu gewährleisten und unvollständige Formulareinreichungen zu vermeiden.