Siete interessati a impedire agli utenti di inserire dati in un campo specifico del modulo? Disabilitare un campo o renderlo di sola lettura può essere utile se si desidera che gli utenti visualizzino il valore del campo senza la possibilità di modificarlo. In questa guida vi spiegheremo come disabilitare un campo del modulo, impedendo di fatto l'inserimento di dati da parte dell'utente.
Questo approccio può essere utile anche quando si vuole includere questo valore nello Smart Tag {all_fields} per le e-mail di notifica o in un'esportazione CSV.
Creazione del modulo
Per iniziare, si deve creare un nuovo modulo. In questa esercitazione, dimostreremo l'uso di un campo Paragraph Text che includerà un messaggio con uno Smart Tag che rappresenta la data corrente come timestamp per l'invio del modulo.
Se avete bisogno di assistenza per il processo di creazione del modulo, consultate questo tutorial per una guida passo-passo.
Dopo aver creato con successo il modulo, inserire un elemento Testo del paragrafo in esso. All'interno del campo Avanzato scheda, includere wpf-disable-field come il Nome della classe CSS per attivare la funzionalità di disabilitazione del campo.
Se si utilizza più di una classe CSS per un campo del modulo, assicurarsi di inserire uno spazio tra i nomi delle classi.
Disabilitare il campo del modulo
Ora è il momento di aggiungere lo snippet di codice che metterà insieme il tutto.
Se avete bisogno di aiuto per aggiungere codice al vostro sito, consultate questo tutorial.
/**
* 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 );
Il codice sopra riportato non solo disabiliterà qualsiasi campo del modulo con la classe CSS wpf-disable-field, ma salterà anche questi campi man mano che l'utente scorre ogni campo.
Il modo migliore per impedire l'immissione di dati in altri campi, come quelli a discesa, a casella di controllo o a scelta multipla, è fornire all'utente una sola opzione.
Questo è tutto ciò che serve per impostare i campi del modulo in sola lettura. Volete cambiare le sottoetichette del campo Nome? Il nostro articolo su Come cambiare le sottoetichette per il campo Nome vi spiegherà come fare.
Azione di riferimento
FAQ
D: Posso utilizzarlo anche per altri campi?
A: Assolutamente! Finché si posiziona il wpf-disable-field ai campi, coprirà tutti i campi.
A titolo di esempio, questo snippet disabilita un campo del modulo a discesa.
/**
* 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 );