Standardmäßig enthält WPForms keine integrierte Schaltfläche zum Zurücksetzen. 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 eine benutzerdefinierte Schaltfläche "Löschen" mit JavaScript und CSS hinzufügen.
In diesem Tutorial zeigen wir Ihnen, wie Sie eine formularweite Schaltfläche zum Zurücksetzen 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 Codeschnipsel ein.
Dieses Codeschnipsel fügt eine Schaltfläche "Löschen" unter Ihrem Formular ein. Wenn sie angeklickt wird, werden alle Eingaben auf ihren Standardstatus zurückgesetzt.
Gestaltung der Schaltfläche "Löschen
Sie können das folgende CSS anwenden, um die Schaltfläche so zu gestalten, dass sie mit Ihrem Thema übereinstimmt.
#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 in den JavaScript- als auch in den CSS-Snippets aktualisieren:
- Ersetzen Sie
10mit Ihrem eigenen Formular-ID in:- Zeile 3: document.getElementById('wpforms-form-10')
- wpforms-form-2927 .custom-clear-button
Wie Sie Ihre Formular- und Feld-IDs finden können, erfahren Sie in diesem Tutorial.
Und das war's! Sie haben nun eine voll funktionsfähige Schaltfläche "Löschen" zu Ihrem WPForms-Formular hinzugefügt