### [Bedingtes Anzeigen des Sende-Buttons](https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/) **Veröffentlicht:** 17. Februar 2021 **Autor:** Umair Majeed **Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie den Sende-Button basierend auf den Antworten auf Ihre Formularfragen bedingt anzeigen. **Inhalt:** Möchten Sie den Sende-Button automatisch basierend auf den Antworten im Formularfeld ein- oder ausblenden? Mit einem einfachen Code-Snippet können Sie die Sichtbarkeit des Sende-Buttons Ihres Formulars mithilfe bedingter Logik steuern. Diese Anleitung zeigt, wie Sie ein Code-Snippet hinzufügen und eine bedingte Logik einrichten, um die Sichtbarkeit Ihres Sende-Buttons zu steuern. ## Einrichten des Formulars Öffnen Sie zunächst den Formular-Builder, indem Sie [ein neues Formular erstellen](https://wpforms.com/docs/creating-first-form/) oder Ihr bestehendes bearbeiten. Für dieses Beispiel erstellen wir ein Spendenformular mit einem Feld für Mehrfachauswahl, das Ja/Nein-Optionen anzeigt. Alle anderen zusätzlichen Felder im Formular werden nur angezeigt, wenn **Ja** ausgewählt ist, mithilfe bedingter Logik. Der Sende-Button erscheint nur, wenn **Ja** ausgewählt ist, und Benutzer werden zu einer Dankesseite weitergeleitet, wenn **Nein** ausgewählt ist. **Hinweis:** Notieren Sie sich die ID Ihres Formulars, da Sie diese beim Hinzufügen des Code-Snippets benötigen. Wenn Sie Hilfe beim Auffinden dieser IDs benötigen, lesen Sie unsere Anleitung [wie Sie Formular- und Feld-IDs finden](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). ### Einrichten der bedingten Logik Bevor wir den Code für den Sende-Button hinzufügen, müssen wir die bedingte Logik für die anderen Felder in Ihrem Formular einrichten. Diese Felder sollten ausgeblendet bleiben, bis der Benutzer „Ja“ aus dem Feld für Mehrfachauswahl auswählt. Um dies zu erreichen, öffnen Sie die Einstellungen jedes Feldes und konfigurieren Sie die bedingte Logik so, dass das Feld angezeigt wird, wenn Ihr Feld für Mehrfachauswahl gleich **Ja** ist. Dies stellt sicher, dass diese Felder standardmäßig ausgeblendet bleiben und nur bei Bedarf angezeigt werden. **Hinweis:** Wenn Sie Hilfe beim Verständnis der Funktionsweise bedingter Logik in WPForms benötigen, lesen Sie bitte unsere detaillierte [Anleitung zur bedingten Logik](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/). ## Erstellen der Dankesseite Da unser Formular den Benutzern eine Ja/Nein-Auswahl bietet, möchten wir auch bei Auswahl von „Nein“ eine gute Benutzererfahrung bieten. Anstatt nur den Sende-Button auszublenden, leiten wir die Benutzer zu einer speziellen Dankesseite weiter. Erstellen Sie dazu eine neue Seite in WordPress und nennen Sie sie **Danke** (oder einen anderen Namen Ihrer Wahl). Hierhin werden Benutzer, die „Nein“ auswählen, automatisch weitergeleitet. Notieren Sie sich den URL-Pfad der Seite, da Sie diesen für die Weiterleitung in unserem Code-Snippet benötigen. ## Hinzufügen des Code-Snippets Das folgende Code-Snippet steuert die Sichtbarkeit Ihres Sende-Buttons basierend auf den Formularantworten: Dieses Snippet verwendet zunächst CSS, um den Sende-Button beim anfänglichen Laden der Seite auszublenden. Dann richtet es einen JavaScript-Ereignis-Listener ein, der Änderungen an den Optionen des Mehrfachauswahlfeldes Ihres Formulars überwacht. Wenn ein Benutzer „Ja“ auswählt, fügt das Skript eine CSS-Klasse hinzu, die den Sende-Button sichtbar macht. Wenn er „Nein“ auswählt, leitet das Skript ihn automatisch zu Ihrer Dankesseite weiter. **Hinweis:** Wenn Sie Hilfe beim Hinzufügen von Code-Snippets zu Ihrer Website benötigen, lesen Sie bitte unser Tutorial [Hinzufügen von Code-Snippets](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/) sicher. ## Anpassen des Codes Sie müssen mehrere wichtige Werte im Code-Snippet für Ihr spezifisches Formular anpassen: - Suchen Sie in **Zeile 12** und **Zeile 16** den CSS-Selektor `#wpforms-form-1000` und ersetzen Sie `1000` durch Ihre tatsächliche Formular-ID. - Suchen Sie in **Zeile 30** im jQuery-Selektor `form#wpforms-form-1000` und ersetzen Sie `1000` erneut durch Ihre Formular-ID. - In **Zeile 33** finden Sie den Weiterleitungs-URL-Pfad `/thank-you`. Aktualisieren Sie diesen, um dem tatsächlichen URL-Pfad Ihrer Dankesseite zu entsprechen. - Wenn Sie Ihre Seite beispielsweise „Danke“ genannt haben, würden Sie sie in `/danke` ändern. ## Testen Ihrer Implementierung Nachdem Sie das Code-Snippet hinzugefügt und angepasst haben, ist es wichtig, die Funktionalität gründlich zu testen: - Laden Sie zunächst Ihr Formular neu und überprüfen Sie, ob der **Sende**-Button standardmäßig ausgeblendet ist. - Wählen Sie als Nächstes **Nein** in Ihrem Formular aus und bestätigen Sie, dass Sie sofort zu Ihrer Dankesseite weitergeleitet werden. - Testen Sie dann den „Ja“-Pfad – wählen Sie **Ja** und überprüfen Sie, ob nicht nur der Sende-Button erscheint, sondern auch alle Ihre bedingt ausgeblendeten Felder sichtbar werden. - Füllen Sie schließlich das Formular aus und senden Sie es mit ausgewählter **Ja**-Option ab, um sicherzustellen, dass der gesamte Prozess wie erwartet funktioniert. - ## Häufig gestellte Fragen #### F: Kann dies für ein Feld für einzelne Textzeilen verwendet werden? A: Absolut! Hier ist ein Code-Snippet, das mit einem Feld für einzelne Textzeilen funktioniert. ``` /** * Bedingt den Sende-Button anzeigen * * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/ */ add_action( 'wp_head', function () { ?> **Kategorien:** Erweitern **Schlagwörter:** Javascript, JS, PHP ---