Möchten Sie verhindern, dass Benutzer Daten in ein bestimmtes Formularfeld eingeben? Ein Feld zu deaktivieren oder es schreibgeschützt zu machen, kann praktisch sein, wenn Sie möchten, dass die Benutzer den Feldwert sehen, ohne die Möglichkeit, ihn zu bearbeiten. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Formularfeld deaktivieren und damit jegliche Benutzereingabe verhindern können.
Dieser Ansatz kann auch nützlich sein, wenn Sie diesen Wert in das {all_fields} Smart Tag für Benachrichtigungs-E-Mails oder in einen CSV-Export aufnehmen möchten.
Ihr Formular erstellen
Beginnen Sie damit, ein neues Formular zu erstellen. In diesem Lernprogramm werden wir die Verwendung eines Absatztextfeldes demonstrieren, das eine Nachricht mit einem Smart Tag enthält, das das aktuelle Datum als Zeitstempel für die Formularübermittlung darstellt.
Wenn Sie Hilfe bei der Formularerstellung benötigen, finden Sie in diesem Tutorial eine schrittweise Anleitung.
Nachdem Sie Ihr Formular erfolgreich erstellt haben, fügen Sie eine Absatz Text Feld hinein. Innerhalb des Feldes Fortgeschrittene Registerkarte, enthalten wpf-disable-field als die CSS-Klassenname um die Deaktivierungsfunktion des Feldes zu aktivieren.
Wenn Sie mehr als eine CSS-Klasse für ein Formularfeld verwenden, müssen Sie zwischen den einzelnen Klassennamen ein Leerzeichen einfügen.
Deaktivieren des Formularfelds
Jetzt ist es an der Zeit, das Codeschnipsel hinzuzufügen, mit dem das Ganze zusammengefügt wird.
Wenn Sie Hilfe beim Hinzufügen von Code zu Ihrer Website benötigen, lesen Sie bitte diese Anleitung.
/**
* 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>
<?php
}
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 blättert.
Die beste Möglichkeit, Eingaben in anderen Feldern wie Dropdown-, Kontrollkästchen- oder Multiple-Choice-Feldern zu verhindern, besteht darin, dem Benutzer nur eine einzige Option zur Verfügung zu stellen.
Das ist alles, was Sie brauchen, um Ihre Formularfelder als schreibgeschützt einzurichten. Möchten Sie die Unteretiketten für das Feld Name ändern? In unserem Artikel Ändern von Unterbezeichnungen für das Feld "Name" erfahren Sie, wie Sie dies erreichen können.
Referenz Aktion
FAQ
F: Kann ich dies auch für andere Bereiche verwenden?
A: Ganz genau! Solange Sie die wpf-disable-field zu den Feldern, wird es jedes einzelne abdecken.
Dieses Snippet deaktiviert beispielsweise ein Dropdown-Formularfeld.
/**
* 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, .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>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );