Comment ajouter un bouton à bascule de visibilité du mot de passe

Introduction

Souhaitez-vous offrir à vos visiteurs la possibilité de rendre leur mot de passe visible au moyen d'un interrupteur à bascule ? Par défaut, lorsque vous ajoutez un champ Mot de passe à votre formulaire, toute entrée dans ce champ sera représentée par des astérisques pour des raisons de sécurité. Si vous souhaitez fournir un bouton de basculement qui leur permettrait d'activer et de désactiver la visibilité du mot de passe, vous pouvez suivre ce tutoriel pour créer un extrait de code qui nous permettra facilement d'y parvenir.

Création du formulaire

Commencez par créer un nouveau formulaire et ajoutez-y vos champs. Comme nous créons un formulaire qui permettra aux utilisateurs de créer leur propre compte, nous leur demandons leur nom, leur adresse électronique, leur nom d'utilisateur, leur mot de passe, ainsi qu'une zone de texte où ils pourront donner quelques informations les concernant.

Si vous avez besoin d'aide pour créer votre formulaire, vous pouvez consulter cette documentation.

Installation du plugin Font Awesome

Nous voulons utiliser une icône pour notre bouton à bascule, donc en suivant un tutoriel de nos amis de WPBeginner, nous installons le plugin Font Awesome afin que nous puissions utiliser une de leurs icônes pour notre bouton à bascule de visibilité du mot de passe.

Ajout du snippet

Il est maintenant temps de copier l'extrait ci-dessous sur votre site.

Si vous avez besoin d'aide pour savoir comment et où ajouter des extraits de code personnalisés, veuillez consulter ce tutoriel.

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

Cet extrait sera appliqué à chaque Mot de passe ajouté par WPForms. Il appliquera automatiquement une classe d'icônes spécifique à l'aide de l'attribut before pseudo-classe. Lorsque l'on clique sur cette icône, elle invoque l'ID CSS de password-toggle pour qu'il affiche le mot de passe au lieu des astérisques.

Application d'une feuille de style CSS personnalisée

Dans notre dernière étape, nous allons ajouter une feuille de style CSS personnalisée pour styliser cette icône. Pour ce faire, nous allons copier et coller ce CSS personnalisé sur votre site.

Si vous avez besoin d'aide pour savoir comment et où ajouter des feuilles de style CSS personnalisées, veuillez consulter ce tutoriel.

.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;
}

Maintenant, lorsque vous verrez le formulaire, vous verrez l'interrupteur de visibilité du mot de passe.

Et c'est tout ! Vous souhaitez également modifier les sous-étiquettes ? Consultez notre tutoriel intitulé Comment modifier les sous-étiquettes du champ Mot de passe.

FAQ

Référence de l'action : wpforms_wp_footer_end