Come Aggiungere un Pulsante di Commutazione per la Visibilità della Password

Introduzione

Vorresti offrire ai tuoi visitatori la possibilità di mostrare o nascondere la loro password mentre la digitano nel tuo modulo? Per impostazione predefinita, il campo Password in WPForms maschera l'input con asterischi per sicurezza.

WPForms include un'impostazione integrata che ti consente di aggiungere un'opzione di visibilità della password con un solo clic nell'editor. Se preferisci aggiungere questa funzionalità con il codice per un maggiore controllo, questo tutorial ti mostrerà anche come farlo con uno snippet.

Opzione Integrata per la Visibilità della Password

A partire dalla versione 1.9.8 di WPForms, puoi abilitare un'opzione integrata che consente agli utenti di attivare la visibilità della password, senza bisogno di codice personalizzato.

Per abilitare questa funzionalità, fai clic sul campo Password nell'editor del modulo per aprire il pannello delle Opzioni Campo. Quindi, nella scheda Generale, attiva l'impostazione Abilita Visibilità Password.

Questo è il modo più rapido e semplice per aggiungere un'opzione di visibilità della password ai tuoi moduli.

Se desideri un maggiore controllo o vuoi personalizzare il comportamento e lo stile, puoi comunque seguire il tutorial qui sotto per aggiungere questa funzionalità con uno snippet di codice.

Aggiunta dello Snippet

Per aggiungere manualmente un'opzione di visibilità della password, dovrai inserire un piccolo snippet di codice sul tuo sito. Questo metodo ti offre maggiore flessibilità per regolare l'aspetto e il funzionamento dell'opzione.

Copia lo snippet qui sotto sul tuo sito.

Se hai bisogno di assistenza su come e dove aggiungere snippet di codice personalizzati, consulta questo tutorial.

/**
 * Provide a password visibility toggle switch
 *
 * @link https://wpforms.com/developers/how-to-add-a-password-visibility-toggle-button/
 */
  
function wpf_dev_password_toggle() {
    ?>
 
<script type="text/javascript">
 
    jQuery(function($){
          
        $( '.wpforms-field-password' ).each(function(){
              
            $(this).find( 'input' ).each(function(){
                  
                $(this).before( '<i class="fa fa-eye-slash fa-eye" id="password-toggle"></i>' );
                var $passwordInput = $(this);
                  
                $(this).parent().find( '#password-toggle' ).on( 'click', function(){
                      
                    var type = $passwordInput.attr( 'type' ) === 'password' ? 'text' : 'password';
                    $passwordInput.attr( 'type', type);
                    $(this).toggleClass( 'fa-eye-slash' );
                      
                });
                  
            });
              
        });
          
    });
 
    </script>
 
<?php
}
   
add_action( 'wpforms_wp_footer_end', 'wpf_dev_password_toggle', 30 );

Questo snippet verrà applicato a ogni campo Password aggiunto tramite WPForms. Applicherà automaticamente una classe icona specifica utilizzando la pseudo-classe before. Quando questa icona viene cliccata, invocherà l'ID CSS di password-toggle in modo che mostri la password invece degli asterischi.

Applicazione del CSS Personalizzato

Ora, nel nostro ultimo passaggio, aggiungeremo del CSS personalizzato per stilizzare questa icona. Per farlo, copieremo e incolleremo questo CSS personalizzato sul tuo sito.

Per qualsiasi assistenza su come e dove aggiungere CSS personalizzato, dai un'occhiata a questo tutorial.

.wpforms-field-password,
.wpforms-field-password .wpforms-field-row-block {
     display: flex;
     flex-flow: wrap;
}
 
.wpforms-field-row-block *:not(input):not(i),
.wpforms-field-password *:not(input):not(i) {
     flex-basis: 100% !important;
}
 
#password-toggle {
     width: 35px;
     font-family: "FontAwesome" !important;
     text-align: center;
     line-height: 35px;
     background: #d9d9d9;
     border-radius: 2px 0 0 2px;
     border: 1px solid #ccc;
     border-right: 0;
}
 
.wpforms-field-password input {
     width: calc(100% - 50px) !important;
     border-radius: 0 2px 2px 0 !important;
} 
 
.fa-eye-slash:before {
    font-size: 12px;
}

Ora, quando vedrai il modulo, vedrai l'interruttore di visibilità della password.

E questo è tutto! Vorresti anche cambiare le etichette secondarie? Dai un'occhiata al nostro tutorial su Come Cambiare le Etichette Secondarie del Campo Password.

FAQ

Riferimento Azione: wpforms_wp_footer_end