KI-Zusammenfassung
Möchten Sie verhindern, dass Benutzer Daten in ein bestimmtes Formularfeld eingeben? Das Deaktivieren eines Feldes oder das Einstellen als schreibgeschützt kann nützlich sein, wenn Sie möchten, dass Benutzer den Feldwert anzeigen können, ohne ihn bearbeiten zu können. In diesem Tutorial führen wir Sie durch die Schritte zum Deaktivieren eines Formularfeldes, um Benutzereingaben effektiv zu verhindern.
Dieser Ansatz kann auch wertvoll sein, wenn Sie diesen Wert in dem {all_fields} Smart Tag für Benachrichtigungs-E-Mails oder in einem CSV-Export verwenden möchten.
Erstellen Ihres Formulars
Um zu beginnen, erstellen Sie zunächst ein neues Formular. In diesem Tutorial demonstrieren wir die Verwendung eines Absatztext-Feldes, das eine Nachricht mit einem Smart Tag enthält, der das aktuelle Datum als Zeitstempel für die Formularübermittlung darstellt.
Wenn Sie Hilfe beim Erstellen des Formulars benötigen, konsultieren Sie bitte dieses Tutorial für eine Schritt-für-Schritt-Anleitung.
Nachdem Sie Ihr Formular erfolgreich erstellt haben, fügen Sie ein Absatztext-Feld hinzu. Innerhalb des Erweitert-Tabs des Feldes geben Sie wpf-disable-field als CSS-Klassenname ein, um die Deaktivierungsfunktion des Feldes zu aktivieren.
Wenn Sie mehr als eine CSS-Klasse für ein Formularfeld verwenden, stellen Sie einfach sicher, dass Sie zwischen den Klassennamen ein Leerzeichen einfügen.
Deaktivieren des Formularfeldes
Es ist nun an der Zeit, den Code-Schnipsel hinzuzufügen, der alles zusammenführt.
Wenn Sie Hilfe beim Hinzufügen von Code zu Ihrer Website benötigen, sehen Sie sich bitte dieses Tutorial an.
/**
* Make standard form fields to make read-only
* To apply, add CSS class 'wpf-disable-field' (no quotes) to field in form builder
*
* @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
*/
function wpf_dev_disable_field() {
<script type="text/javascript">
jQuery(function($) {
$( '.wpf-disable-field input, .wpf-disable-field textarea' ).attr({
readonly: "readonly",
tabindex: "-1"
});
});
</script>
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );
Der obige Code deaktiviert nicht nur jedes Formularfeld in jedem Formular mit der CSS-Klasse wpf-disable-field, sondern überspringt diese Felder auch, wenn der Benutzer durch die einzelnen Felder tabuliert.
Der beste Weg, die Eingabe in anderen Feldern wie Dropdown, Kontrollkästchen oder Mehrfachauswahl zu verhindern, wäre, dem Benutzer nur eine einzige Option anzubieten.
Und das ist alles, was Sie benötigen, um Ihre Formularfelder schreibgeschützt einzurichten. Möchten Sie die Untertitel für das Name-Feld ändern? Unser Artikel über Ändern von Untertiteln für das Namensfeld führt Sie durch die Schritte, wie Sie dies erreichen.
Referenzaktion
FAQ
F: Kann ich das auch für andere Felder verwenden?
A: Absolut! Solange Sie wpf-disable-field zu den Feldern hinzufügen, wird es für jedes Feld übernommen.
Als Beispiel deaktiviert dieser Ausschnitt ein Dropdown-Formularfeld.
/**
* Make standard form fields read-only
* To apply, add CSS class 'wpf-disable-field' (no quotes) to the field in the form builder
*
* @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
*/
function wpf_dev_disable_field() {
<script type="text/javascript">
jQuery(function($) {
$('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select').attr({
disabled: true,
tabindex: '-1'
});
$('.wpforms-form').on('wpformsBeforeFormSubmit', function(){
$('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select')
.removeAttr('disabled');
});
});
</script>
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_field', 30);