### [Hinzufügen einer Schaltfläche zum Löschen aller Formularfelder in Ihrem Formular](https://wpforms.com/developers/adding-a-clear-button-to-reset-all-fields-in-your-form/) **Veröffentlicht:** 3. Juni 2025 **Autor:** Umair Majeed **Inhalt:** Standardmäßig enthält WPForms keine integrierte Zurücksetzen-Schaltfläche. Wenn Sie Ihren Benutzern eine Möglichkeit bieten möchten, alle Eingabefelder auf einmal zu löschen, anstatt jedes Feld manuell zurückzusetzen, können Sie mit JavaScript und CSS eine benutzerdefinierte „Löschen“-Schaltfläche hinzufügen. In diesem Tutorial zeigen wir Ihnen, wie Sie eine formularweite Zurücksetzen-Schaltfläche implementieren, die mit allen Feldtypen, einschließlich Kontrollkästchen und Optionsfeldern, funktioniert. **Hinweis**: Dieses Tutorial beinhaltet das Hinzufügen von PHP und JavaScript. Wenn Sie Hilfe beim Hinzufügen von Codeausschnitten zu Ihrer Website benötigen, lesen Sie bitte diese [Anleitung zum Hinzufügen von benutzerdefiniertem Code für WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). Nachdem Sie Ihr Formular erstellt und die erforderlichen Felder hinzugefügt haben, fügen Sie den folgenden Codeausschnitt hinzu. Dieser Codeausschnitt fügt eine „Löschen“-Schaltfläche unter Ihrem Formular hinzu. Wenn Sie darauf klicken, werden alle Eingaben in ihren Standardzustand zurückversetzt. ### Styling der Löschen-Schaltfläche Sie können die folgende CSS anwenden, um die Schaltfläche zu gestalten, damit sie mit Ihrem Theme übereinstimmt. ``` #wpforms-form-10 .custom-clear-button { background-color: #4CAF50; /* Grüne Hintergrundfarbe */ color: #ffffff; /* Weißer Text */ padding: 10px 20px; /* Innenabstand */ border: none; /* Kein Rahmen */ border-radius: 3px; /* Abgerundete Ecken */ cursor: pointer; /* Zeiger-Cursor beim Überfahren */ font-size: 16px; /* Schriftgröße */ font-weight: bold; /* Fettschrift */ text-transform: uppercase; /* Großbuchstaben */ transition: background-color 0.3s ease, transform 0.2s ease; /* Sanfte Übergänge */ } #wpforms-form-10 .custom-clear-button:hover { background-color: #286b2b; /* Dunkleres Grün beim Überfahren */ } ``` ## Anpassen des Snippets Sie müssen die Formular-ID sowohl im JavaScript- als auch im CSS-Snippet aktualisieren: - Ersetzen Sie `10` durch Ihre eigene **Formular-ID** in: - **Zeile 3**: document.getElementById(‘wpforms-form-10’) - wpforms-form-2927 .custom-clear-button Um Ihre Formular- und Feld-IDs zu finden, lesen Sie [diese Anleitung](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). Und das ist alles! Sie haben jetzt eine voll funktionsfähige Löschen-Schaltfläche zu Ihrem WPForms-Formular hinzugefügt **Kategorien:** Tutorials, Felder ---