Como Adicionar um Botão de Alternância de Visibilidade de Palavra-passe

Introdução

Gostaria de dar aos seus visitantes a opção de mostrar ou ocultar a palavra-passe enquanto a digitam no seu formulário? Por defeito, o campo Palavra-passe no WPForms mascara a entrada com asteriscos por segurança.

O WPForms inclui uma definição integrada que lhe permite adicionar um alternador de visibilidade de palavra-passe com apenas um clique no construtor. Se preferir adicionar esta funcionalidade com código para um maior controlo, este tutorial também lhe mostrará como fazê-lo com um excerto de código.

Opção Integrada para Visibilidade da Palavra-passe

A partir da versão 1.9.8 do WPForms, pode ativar uma opção integrada que permite aos utilizadores alternar a visibilidade da palavra-passe, sem necessidade de código personalizado.

Para ativar esta funcionalidade, clique no campo Palavra-passe no construtor de formulários para abrir o painel Opções do Campo. Em seguida, no separador Geral, ative a definição Ativar Visibilidade da Palavra-passe.

Esta é a forma mais rápida e fácil de adicionar um alternador de visibilidade de palavra-passe aos seus formulários.

Se preferir um maior controlo ou quiser personalizar o comportamento e o estilo, ainda pode seguir o tutorial abaixo para adicionar esta funcionalidade com um excerto de código.

Adicionar o Trecho

Para adicionar manualmente um alternador de visibilidade de palavra-passe, terá de colocar um pequeno excerto de código no seu site. Este método dá-lhe mais flexibilidade para ajustar a aparência e o funcionamento do alternador.

Copie o excerto abaixo para o seu site.

Se precisar de alguma assistência sobre como e onde adicionar excertos de código personalizados, reveja 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 excerto será aplicado a todos os campos Palavra-passe adicionados através do WPForms. Aplicará automaticamente uma classe de ícone específica utilizando a pseudo-classe before. Quando este ícone for clicado, invocará o ID CSS de password-toggle para que mostre a palavra-passe em vez dos asteriscos.

Aplicação de CSS Personalizado

Agora, na nossa etapa final, vamos adicionar algum CSS personalizado para estilizar este ícone. Para o fazer, vamos copiar e colar este CSS personalizado no seu site.

Para qualquer assistência sobre como e onde adicionar CSS personalizado, consulte 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, quando vir o formulário, verá o interruptor de alternância de visibilidade da palavra-passe.

E é tudo! Gostaria também de alterar os sub-rótulos? Consulte o nosso tutorial sobre Como Alterar os Sub-rótulos do Campo Palavra-passe.

FAQ

Referência de Ação: wpforms_wp_footer_end