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

Introduzione

Desiderate fornire ai vostri visitatori la possibilità di fornire la visibilità della password tramite un interruttore? Per impostazione predefinita, quando si aggiunge un campo Password al proprio modulo, qualsiasi input in questo campo sarà rappresentato da asterischi per sicurezza. Se si desidera fornire un pulsante che consenta di attivare e disattivare la visibilità della password, si può seguire questo tutorial per creare uno snippet di codice che consenta di raggiungere facilmente questo obiettivo.

Creazione del modulo

Si dovrà iniziare creando un nuovo modulo e aggiungendovi i campi. Poiché stiamo creando un modulo che consentirà di creare il proprio account, chiediamo il nome, l'e-mail, il nome utente, la password e un'area di testo per fornire qualche informazione su di sé.

Se avete bisogno di assistenza per la creazione del modulo, potete consultare questa documentazione.

Installazione del plugin Font Awesome

Vogliamo utilizzare un'icona per il nostro pulsante a levetta, quindi, seguendo un tutorial dei nostri amici di WPBeginner, installeremo il plugin Font Awesome in modo da poter utilizzare una delle loro icone per il nostro pulsante di visibilità della password.

Aggiunta dello snippet

Ora è il momento di copiare lo snippet sottostante 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