Ein Nutzer öffnet ein Formular, sieht eine Schaltfläche „Absenden", klickt darauf und erhält Validierungsfehler. Das Fenster markiert Felder rot: „Pflichtfeld." Kommt Ihnen das bekannt vor?

Contact Form 7, das beliebteste Formular-Plugin für WordPress, hat über 5 Millionen aktive Installationen. Direkt nach der Installation zeigt es jedoch immer die Absende-Schaltfläche an, selbst wenn die Felder leer sind. Für den Nutzer bedeutet das einen zusätzlichen Klick und Frustration. Für den Seitenbetreiber bedeutet es verlorene Leads: Ein Drittel der Besucher, die auf einen Formularfehler stoßen, verlässt die Seite einfach und kehrt nie zurück.

Sie können das mit drei Zeilen jQuery beheben. Oder Sie erledigen es ganz ohne Skripte, mit reinem CSS. In dieser Aufschlüsselung erhalten Sie beide Ansätze, plus ein fertiges Plugin für diejenigen, die keinen Code anfassen möchten.

💡 Kurzübersicht:

• jQuery-Überwachung: Die Schaltfläche ausblenden und nur dann einblenden, wenn die Textlänge in allen Feldern Ihre Grenzwerte erreicht
• Reines CSS: Ein Trick mit :valid, :has() und dem required-Attribut, ohne eine einzige Zeile JavaScript
• Conditional Fields für Contact Form 7 Plugin: Ein visueller Bedingungseditor für komplexe Logik ohne Code

Warum die Absende-Schaltfläche ausblenden

Ein Nutzer sollte nicht raten müssen, was schiefgelaufen ist. Wenn eine Schaltfläche sichtbar und klickbar ist, das Formular aber noch nicht bereit, erzeugt das kognitive Dissonanz. Die Person klickt, erhält einen Fehler, sucht nach markierten Feldern, korrigiert sie, klickt erneut. Jeder solche Zyklus senkt die Conversion.

Eine Schaltfläche, die ausgeblendet bleibt, bis alles bereit ist, löst drei Probleme:

• Eliminiert falsche Absendeversuche. Keine Schaltfläche, kein voreiliger Klick.
• Bietet visuelles Feedback. Das Erscheinen der Schaltfläche signalisiert, dass das Formular absendebereit ist.
• Reduziert Reibungsverluste. Der Nutzer füllt die Felder aus, die Schaltfläche erscheint, ein Klick, erledigt.

Contact Form 7 hat keinen eingebauten Mechanismus für dieses Verhalten. Aber es einzubauen dauert 10 Minuten Arbeit.

Methode 1: jQuery-Eingabeüberwachung

Der flexibelste Ansatz. Sie legen Ihre eigenen Regeln fest: wie viele Zeichen jedes Feld enthalten muss, bevor die Schaltfläche erscheint. Funktioniert mit jedem Feldtyp (Text, E-Mail, Textarea, Telefon).

Contact Form 7 Formularkörper

Nehmen Sie als Beispiel ein Standard-Kontaktformular mit drei Feldern, Google reCAPTCHA und einer Absende-Schaltfläche. Hier ist sein Markup im CF7-Editor:

1
[text text-776 id:bim-name class:bim-name placeholder "Name"]
2
[email email-498 id:bim-email class:bim-email placeholder "Email"]
3
[textarea textarea-697 id:bim-message class:bim-message placeholder "Message"]
4
 
5
<style>
6
.g-recaptcha > div {
7
    width: 100% !important;
8
}
9
.g-recaptcha iframe {
10
    width: 100% !important;
11
}
12
div#GoogleReCapchaFullWidth {
13
    width: 100% !important;
14
    padding-bottom: 6px;
15
}
16
</style>
17
 
18
[recaptcha id:GoogleReCapchaFullWidth]
19
 
20
[submit id:bim-button class:bim-button "Submit"]

Der CSS-Block innerhalb des Formulars ist ein Workaround, um reCAPTCHA auf die volle Containerbreite zu strecken; das ist nützlich, wenn das Formular in einer schmalen Spalte sitzt.

JQuery-Skript

Kopieren Sie diesen Code in die custom.js-Datei Ihres Themes oder in das Feld „Zusätzliche Skripte" des Code Snippets Plugins:

1
jQuery(document).ready(function ($) {
2
 
3
    // Initially the button is hidden
4
    $('#bim-button').css('display', 'none');
5
 
6
    // Listen for input on all three fields
7
    $('#bim-name, input#bim-email, #bim-message').on('input', function () {
8
        var nameVal = $('#bim-name').val().trim();
9
        var emailVal = $('#bim-email').val().trim();
10
        var messageVal = $('#bim-message').val().trim();
11
 
12
        // Conditions: name > 4 characters, email > 6, message > 20
13
        if (nameVal.length > 4 && emailVal.length > 6 && messageVal.length > 20) {
14
            $('#bim-button').fadeIn(200);
15
        } else {
16
            $('#bim-button').fadeOut(200);
17
        }
18
    });
19
 
20
});

Was hier passiert:

• Zeile 4: Die Schaltfläche wird sofort beim Laden der Seite ausgeblendet (display: none).
• Zeile 7: Die Methode .on('input', ...) lauscht auf jede Textänderung in den drei Feldern (Tippen durch den Nutzer, Einfügen aus der Zwischenablage, Löschen von Zeichen). Früher wurde .keyup() verwendet, aber input ist zuverlässiger: Es feuert auch bei Maus-Einfügen.
• Zeilen 8-10: Wir lesen die aktuellen Werte und entfernen Leerzeichen an den Rändern mit .trim().
• Zeile 13: Bedingungsprüfung. Sie können die Zahlen nach Bedarf ändern: Beispielsweise kann > 1 für ein Namensfeld ausreichen, > 10 für eine Nachricht.
• Zeilen 14 und 16: fadeIn und fadeOut sorgen für ein sanftes Erscheinen und Verschwinden der Schaltfläche über 200 Millisekunden. Das sieht ordentlicher aus als ein abruptes show()/hide().

Physisch befindet sich das Schaltflächenelement immer im DOM-Baum der Seite; die Sichtbarkeit wird über die CSS-Eigenschaft display gesteuert. Das ist sicher: Selbst wenn das Skript nicht geladen werden kann (Netzwerkproblem, Werbeblocker), bleibt die Schaltfläche einfach sichtbar und der Nutzer verliert nicht die Möglichkeit, das Formular abzusenden.

So passen Sie es für Ihr Formular an

Ändern Sie drei Dinge:

• Feld-IDs: Ersetzen Sie im CF7-Markup bim-name, bim-email und bim-message durch Ihre eigenen Bezeichner.
• Zeichenlimits: Fügen Sie in der if-Bedingung die benötigten Zahlen ein. Für ein Telefonfeld können Sie .replace(/\D/g, '').length > 9 prüfen (nur Ziffern, mindestens 10).
• Feldliste: Wenn Sie 5 Felder haben, fügen Sie diese zum Selektor $('#id1, #id2, ...') und zur if-Bedingung hinzu.

Für die Feldtypen [checkbox], [select] oder [radio] funktioniert die Textlänge nicht; prüfen Sie die Auswahl selbst:

1
var agreeChecked = $('#bim-agree').is(':checked');

Methode 2: Reines CSS ohne Skripte

Für einfache Formulare mit ein oder zwei Feldern können Sie vollständig auf JavaScript verzichten. Die Idee: Moderne Browser können die Feldgültigkeit über die Pseudoklasse :valid prüfen, und der CSS-Kombinator :has() (seit 2023 in allen Browsern unterstützt) erlaubt den Blick „in" ein Elternelement hinein.

Es funktioniert so:

1
form.wpcf7-form .wpcf7-submit {
2
    display: none;
3
}
4
 
5
form.wpcf7-form:has(input[required]:invalid) .wpcf7-submit {
6
    display: none;
7
}
8
 
9
form.wpcf7-form:not(:has(input[required]:invalid)) .wpcf7-submit {
10
    display: block;
11
}

Aber es gibt eine Nuance: CF7 fügt Feldern das required-Attribut nicht automatisch hinzu. Sie müssen es manuell im Formular-Markup ergänzen; ein Sternchen * neben dem Feldnamen im CF7-Editor genügt:

1
[text* text-776 id:bim-name placeholder "Name"]
2
[email* email-498 id:bim-email placeholder "Email"]

Das Sternchen nach dem Feldtyp (text*, email*) aktiviert den Pflichtstatus. CF7 selbst fügt das HTML-Attribut required in den <input>-Tag ein, und der CSS-Selektor funktioniert.

Der Vorteil der CSS-Methode: null Skripte, sie geht bei jQuery-Konflikten nicht kaputt und funktioniert selbst bei deaktiviertem JavaScript. Der Nachteil: Die Logik ist einfacher („alle Pflichtfelder sind ausgefüllt" gegenüber „das Namensfeld ist länger als 4 Zeichen"). Für die meisten Kontaktformulare ist das ausreichend.

Methode 3: Conditional Fields für Contact Form 7 Plugin

Wenn die Logik komplexer wird (zum Beispiel: Schaltfläche nur anzeigen, wenn ein bestimmter Eintrag in [select] gewählt und die E-Mail ausgefüllt ist), wächst der jQuery-Code. Hier kommt das kostenlose Plugin Conditional Fields for Contact Form 7 zur Rettung (über 100.000 aktive Installationen, 5-Sterne-Bewertung).

Das Plugin fügt einen visuellen Bedingungseditor direkt in die CF7-Oberfläche ein. Sie legen Regeln mit wenigen Klicks fest:

• „Schaltfläche anzeigen, wenn das Feld 'Name' nicht leer ist UND das Feld 'Email' nicht leer ist UND das Feld 'Nachricht' mehr als 20 Zeichen enthält."
• Oder: „Feld 'Lieferadresse' anzeigen, wenn der Radio-Button 'Kurierlieferung' ausgewählt ist."

Kein Code erforderlich. Bedingungen können auf jedes Feld oder jede Feldgruppe angewendet werden, einschließlich der Absende-Schaltfläche selbst. Das Plugin wird aktiv gepflegt und regelmäßig aktualisiert; mit Stand Juni 2026 ist es mit der aktuellen WordPress-Version kompatibel.

Welche Lösung Sie wählen sollten

Drei Ansätze decken drei verschiedene Szenarien ab:

• Reines CSS: Ideal für eine Landingpage mit einem einfachen 2-3-Felder-Formular. Minimale bewegliche Teile, nichts, was kaputtgehen kann.
• jQuery-Skript: Ihre Wahl, wenn Sie fein abgestimmte Grenzwerte benötigen („Name länger als 4 Zeichen, Nachricht länger als 20"). Volle Kontrolle über die Bedingungen.
• Conditional Fields: Verwenden Sie es, wenn die Logik verzweigt (unterschiedliche Feldsätze für verschiedene Auswahlen, verschachtelte Bedingungen, Ein-/Ausblenden ganzer Formularabschnitte). Der visuelle Builder spart Stunden an Fehlersuche.

Für die meisten WordPress-Seiten ist die Kombination „jQuery + gesunder Menschenverstand" ausreichend. Das obige Skript (20 Zeilen) wird einmal eingefügt und funktioniert jahrelang ohne Updates.

Video: Schritt-für-Schritt-Einrichtung

Dieses 8-minütige Tutorial führt durch den gesamten Prozess, vom Erstellen eines Formulars in CF7 bis zum fertigen Skript zum Ausblenden der Schaltfläche, das prüft, ob alle Felder ausgefüllt sind:

⁉️🤔 Häufig gestellte Fragen

Funktioniert das Skript mit Caching-Plugins?

Ja, vorausgesetzt, der korrekte Wrapper jQuery(document).ready(...) wird verwendet. Wenn die Seite aggressive Minifizierung einsetzt (Autoptimize, WP Rocket mit Skript-Zusammenführung), schließen Sie die Skriptdatei vom Zusammenführen aus oder verwenden Sie das Code Snippets Plugin: Es fügt Code als separaten Block in den Seitenfooter ein, den Minifizierer nicht anfassen.

Was ist, wenn ein Nutzer JavaScript deaktiviert hat?

Bei deaktiviertem JavaScript bleibt die Schaltfläche sichtbar; das Skript blendet sie einfach nicht aus. Das ist graceful degradation: CF7 führt die serverseitige Validierung durch und zeigt Fehler auf dem Standardweg an. Bei der CSS-Methode mit :has() ist die Situation dieselbe: Ohne JS-Validierung prüft CF7 die Felder beim Absenden trotzdem serverseitig.

Kann ich die Schaltfläche für ein bestimmtes Formular ausblenden, wenn mehrere auf der Seite sind?

Der einfachste Weg ist, der Schaltfläche im CF7-Editor eine eindeutige id zu geben und diese ID dann als Selektor im Skript zu verwenden. Wenn es mehrere Formulare gibt, duplizieren Sie den Codeblock für jede Schaltfläche mit ihrer eigenen ID oder finden Sie die Schaltfläche dynamisch innerhalb des aktuellen Formulars über $(this).closest('form').find('.wpcf7-submit').

Warum nicht einfach required bei Feldern verwenden und sich auf die Browser-Validierung verlassen?

Weil required die Schaltfläche nicht ausblendet; es blockiert nur das Absenden des Formulars und zeigt einen browser-eigenen Tooltip. Unser Ziel ist es, die Möglichkeit eines fehlerhaften Klicks von vornherein zu entfernen. Zudem prüft die Standard-Browser-Validierung nicht die Textlänge, sondern nur das Ausgefülltsein, und für eine 2 Zeichen lange Nachricht ist das ein schwacher Schutz.

Muss ich Felder trotzdem serverseitig validieren?

Ja, unbedingt. Die clientseitige Logik zum Ausblenden der Schaltfläche ersetzt nicht die serverseitige CF7-Validierung. Konfigurieren Sie Pflichtfelder immer im Formular-Editor (das * im Markup) und überprüfen Sie, ob E-Mails zugestellt werden. Zwei Schutzebenen: Frontend für die Benutzerfreundlichkeit, Backend für die Sicherheit.

Versteckte Schaltfläche, saubere Leads: Was Sie auf Ihrer Seite einsetzen sollten

Der Ansatz, die Absende-Schaltfläche auszublenden, ist eine jener Mikroverbesserungen, die für das Auge unsichtbar, aber für die Hände spürbar sind. Ein Nutzer wird nicht sagen: „Toll, die Schaltfläche erschien genau im richtigen Moment." Aber er wird das Formular abschließen und nicht nach dem ersten Klick ins Leere abspringen.

Für ein einfaches Kontaktformular verwenden Sie die CSS-Methode mit :has(): 5 Zeilen Code, null Abhängigkeiten. Für benutzerdefinierte Längenlimits bei Feldern nutzen Sie das jQuery-Skript aus Methode 1 (kopieren und in Code Snippets einfügen). Für komplexe Formulare mit verzweigter Logik verwenden Sie Conditional Fields.

Probieren Sie es gleich aus: Öffnen Sie Ihren Kontaktformular-Editor in CF7, fügen Sie id: zu Feldern und Schaltfläche hinzu, fügen Sie das Skript ein und prüfen Sie, wie die Schaltfläche nur dann erscheint, wenn alle Felder sinnvoll und nicht willkürlich ausgefüllt sind.