Come disabilitare un campo modulo per impedire l'input dell'utente

Sei interessato a impedire agli utenti di inserire dati in un campo specifico del modulo? Disabilitare un campo o renderlo sola lettura può essere utile se desideri che gli utenti visualizzino il valore del campo senza la possibilità di modificarlo. In questo tutorial, ti guideremo su come disabilitare un campo del modulo, impedendo efficacemente qualsiasi input da parte dell'utente.

Questo approccio può anche essere prezioso quando desideri includere questo valore in il tag Smart {all_fields} per le email di notifica o all'interno di un'esportazione CSV.

Creazione del tuo modulo

Per iniziare, crea un nuovo modulo. In questo tutorial, dimostreremo utilizzando un campo Testo Paragrafo che includerà un messaggio con un tag Smart che rappresenta la data corrente come timestamp per l'invio del modulo.

Se hai bisogno di assistenza con il processo di creazione del modulo, consulta questo tutorial per una guida passo passo.

Dopo aver creato con successo il tuo modulo, inserisci un campo Testo Paragrafo. Nella scheda Avanzate del campo, inserisci wpf-disable-field come Nome Classe CSS per abilitare la funzionalità di disabilitazione del campo.

Disabilitare il campo del modulo

È ora di aggiungere lo snippet di codice che metterà tutto insieme.

Se hai bisogno di aiuto per aggiungere codice al tuo sito, consulta 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>
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );

Il codice sopra non solo disabiliterà qualsiasi campo del modulo su qualsiasi modulo con la classe CSS wpf-disable-field, ma salterà anche questi campi mentre l'utente naviga attraverso ogni campo.

E questo è tutto ciò che ti serve per impostare i tuoi campi del modulo in sola lettura. Desideri modificare le etichette secondarie sul campo Nome? Il nostro articolo su Come modificare le etichette secondarie per il campo Nome ti guiderà attraverso i passaggi su come realizzarlo.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Posso usarlo anche per altri campi?

R: Assolutamente! Finché applichi wpf-disable-field ai campi, coprirà ognuno di essi.

Ad esempio, questo snippet disabiliterà un campo del modulo Menu a tendina.

/**
 * 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);