Come aggiungere un pulsante a levetta per la visibilità della password

Introduzione

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

WPForms include un'impostazione integrata che consente di aggiungere un toggle per la visibilità della password con un solo clic nel costruttore. Se preferite aggiungere questa funzione con il codice per avere un maggiore controllo, questo tutorial vi mostrerà come farlo con uno snippet.

Opzione integrata per la visibilità della password

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

Per attivare questa funzione, fare clic sul campo Password nel costruttore di moduli per aprire il pannello Opzioni campo. Quindi, nella scheda Generale, attivare l'impostazione Abilita visibilità password.

Questo è il modo più semplice e veloce per aggiungere una levetta per la visibilità della password ai vostri moduli.

Se si preferisce un maggiore controllo o si desidera personalizzare il comportamento e lo stile, è possibile seguire il tutorial seguente per aggiungere questa funzionalità con uno snippet di codice.

Aggiunta dello snippet

Per aggiungere manualmente un toggle di visibilità della password, è necessario inserire un piccolo snippet di codice nel sito. Questo metodo offre una maggiore flessibilità nel regolare l'aspetto e il funzionamento del toggle.

Copiate lo snippet qui sotto nel vostro sito.

Se avete bisogno di assistenza su come e dove aggiungere gli snippet di codice personalizzati, consultate 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 sarà applicato a tutti i file di tipo Password aggiunto tramite WPForms. Applicherà automaticamente una classe di icone specifica utilizzando l'opzione before pseudo-classe. Quando si fa clic su questa icona, si richiama l'ID CSS di password-toggle in modo da mostrare la password invece degli asterischi.

Applicazione di CSS personalizzati

Ora, nella fase finale, aggiungeremo alcuni CSS personalizzati per dare stile all'icona. Per farlo, copieremo e incolleremo questo CSS personalizzato sul vostro sito.

Per assistenza su come e dove aggiungere i CSS personalizzati, consultare 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 si visualizza il modulo, si vedrà l'interruttore per la visibilità della password.

E questo è tutto! Volete cambiare anche le sottoetichette? Consultate il nostro tutorial su Come modificare le sottoetichette del campo password.

FAQ

Riferimento azione: wpforms_wp_footer_end