Comment ajouter un bouton bascule pour la visibilité du mot de passe

Introduction

Souhaitez-vous donner à vos visiteurs la possibilité d'afficher ou de masquer leur mot de passe lorsqu'ils le saisissent dans votre formulaire ? Par défaut, le champ Mot de passe dans WPForms masque la saisie avec des astérisques pour des raisons de sécurité.

WPForms inclut un paramètre intégré qui vous permet d'ajouter un commutateur de visibilité du mot de passe en un seul clic dans le constructeur. Si vous préférez ajouter cette fonctionnalité avec du code pour plus de contrôle, ce tutoriel vous montrera également comment le faire avec un extrait de code.

Option intégrée pour la visibilité du mot de passe

À partir de la version 1.9.8 de WPForms, vous pouvez activer une option intégrée qui permet aux utilisateurs de basculer la visibilité du mot de passe, sans code personnalisé requis.

Pour activer cette fonctionnalité, cliquez sur le champ Mot de passe dans le constructeur de formulaire pour ouvrir son panneau Options de champ. Ensuite, sous l'onglet Général, activez le paramètre Activer la visibilité du mot de passe.

C'est la manière la plus rapide et la plus simple d'ajouter un commutateur de visibilité du mot de passe à vos formulaires.

Si vous préférez plus de contrôle ou si vous souhaitez personnaliser le comportement et le style, vous pouvez toujours suivre le tutoriel ci-dessous pour ajouter cette fonctionnalité avec un extrait de code.

Ajout de l'extrait

Pour ajouter manuellement un commutateur de visibilité du mot de passe, vous devrez placer un petit extrait de code sur votre site. Cette méthode vous donne plus de flexibilité pour ajuster l'apparence et le fonctionnement du commutateur.

Copiez l'extrait ci-dessous sur votre site.

Si vous avez besoin d'aide sur 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 champ Mot de passe ajouté via WPForms. Il appliquera automatiquement une classe d'icône spécifique en utilisant la pseudo-classe before. Lorsque cette icône est cliquée, elle invoquera l'ID CSS de password-toggle afin qu'elle affiche le mot de passe au lieu des astérisques.

Application du CSS personnalisé

Maintenant, dans notre dernière étape, nous allons ajouter du CSS personnalisé pour styliser cette icône. Pour ce faire, nous allons copier et coller ce CSS personnalisé sur votre site.

Pour toute aide sur comment et où ajouter du CSS personnalisé, 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 le commutateur de visibilité du mot de passe.

Et voilà ! Souhaitez-vous également modifier les sous-libellés ? Consultez notre tutoriel sur Comment modifier les sous-libellés du champ Mot de passe.

FAQ

Référence d’action : wpforms_wp_footer_end