Como Adicionar um Botão de Alternância de Visibilidade de Senha

Introdução

Você gostaria de dar aos seus visitantes a opção de mostrar ou ocultar a senha enquanto a digitam em seu formulário? Por padrão, o campo Senha no WPForms mascara a entrada com asteriscos por segurança.

O WPForms inclui uma configuração integrada que permite adicionar um alternador de visibilidade de senha com apenas um clique no construtor. Se preferir adicionar este recurso com código para ter mais controle, este tutorial também mostrará como fazer isso com um snippet.

Opção Integrada para Visibilidade de Senha

A partir da versão 1.9.8 do WPForms, você pode habilitar uma opção integrada que permite aos usuários alternar a visibilidade da senha, sem a necessidade de código personalizado.

Para habilitar este recurso, clique no campo Senha no construtor de formulários para abrir seu painel de Opções de Campo. Em seguida, na aba Geral, ative a configuração Habilitar Visibilidade de Senha.

Esta é a maneira mais rápida e fácil de adicionar um alternador de visibilidade de senha aos seus formulários.

Se você preferir mais controle ou quiser personalizar o comportamento e a aparência, ainda pode seguir o tutorial abaixo para adicionar essa funcionalidade com um snippet de código.

Adicionando o Snippet

Para adicionar manualmente um alternador de visibilidade de senha, você precisará colocar um pequeno snippet de código em seu site. Este método oferece mais flexibilidade para ajustar a aparência e o funcionamento do alternador.

Copie o snippet abaixo para o seu site.

Se precisar de alguma ajuda sobre como e onde adicionar snippets de código personalizados, por favor, revise este 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 );

Este snippet será aplicado a todos os campos Senha adicionados através do WPForms. Ele aplicará automaticamente uma classe de ícone específica usando a pseudo-classe before. Quando este ícone for clicado, ele invocará o ID CSS de password-toggle para que ele mostre a senha em vez dos asteriscos.

Aplicando CSS Personalizado

Agora, em nossa etapa final, vamos adicionar um CSS personalizado para estilizar este ícone. Para fazer isso, copiaremos e colaremos este CSS personalizado em seu site.

Para qualquer ajuda sobre como e onde adicionar CSS personalizado, por favor, confira este 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;
}

Agora, ao ver o formulário, você verá o interruptor de alternância de visibilidade da senha.

E é isso! Você também gostaria de alterar os sub-rótulos? Confira nosso tutorial sobre Como Alterar os Sub-rótulos do Campo Senha.

Perguntas Frequentes

Referência de Ação: wpforms_wp_footer_end