Hinzufügen einer Schaltfläche zum Löschen, um alle Felder in Ihrem Formular zurückzusetzen

Standardmäßig enthält WPForms keine integrierte Zurücksetzen-Schaltfläche. Wenn Sie Ihren Benutzern die Möglichkeit geben 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.

Nachdem Sie Ihr Formular erstellt und die erforderlichen Felder hinzugefügt haben, fügen Sie den folgenden Code-Snippet hinzu.

Dieser Code-Snippet fügt eine „Löschen“-Schaltfläche unter Ihrem Formular hinzu. Wenn Sie darauf klicken, werden alle Eingaben in ihren ursprünglichen Zustand zurückversetzt.

Styling der Löschen-Schaltfläche

Sie können die folgende CSS anwenden, um die Schaltfläche zu gestalten, damit sie konsistent mit Ihrem Theme aussieht.

#wpforms-form-10 .custom-clear-button {
    background-color: #4CAF50; /* Green background */
    color: #ffffff; /* White text */
    padding: 10px 20px; /* Padding */
    border: none; /* No border */
    border-radius: 3px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}
#wpforms-form-10 .custom-clear-button:hover {
    background-color: #286b2b; /* Darker green on hover */
}

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 dieses Tutorial.

Und das ist alles! Sie haben jetzt eine voll funktionsfähige Löschen-Schaltfläche zu Ihrem WPForms-Formular hinzugefügt