Como adicionar um botão de alternância de visibilidade de senha

Introdução

Gostaria de dar aos seus visitantes a opção de mostrar ou ocultar a senha à medida que a digitam no formulário? Por padrão, o campo Senha no WPForms oculta a entrada com asteriscos por segurança.

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

Opção incorporada para visibilidade da senha

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

Para ativar esse recurso, clique no campo Password (Senha) no construtor de formulários para abrir o painel Field Options (Opções de campo). Em seguida, na guia General (Geral ), ative a configuração Enable Password Visibility (Ativar visibilidade da senha).

Essa é a maneira mais rápida e fácil de adicionar uma alternância de visibilidade de senha aos seus formulários.

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

Adicionando o snippet

Para adicionar manualmente uma alternância de visibilidade de senha, você precisará colocar um pequeno trecho de código em seu site. Esse método lhe dá mais flexibilidade para ajustar a aparência e o funcionamento da alternância.

Copie o snippet abaixo em seu site.

Se precisar de ajuda sobre como e onde adicionar trechos de código personalizados, consulte 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 );

Esse snippet será aplicado a todos os Senha adicionado por meio do WPForms. Ele aplicará automaticamente uma classe de ícone específica usando o parâmetro before pseudo-classe. Quando esse ícone for clicado, ele invocará a ID CSS de password-toggle para que ele mostre a senha em vez dos asteriscos.

Aplicação de CSS personalizado

Agora, em nossa etapa final, adicionaremos um CSS personalizado para estilizar esse ícone. Para fazer isso, vamos copiar e colar esse CSS personalizado em seu site.

Para obter ajuda 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 você visualizar o formulário, verá a chave de alternância de visibilidade da senha.

E é isso! Você gostaria de alterar também os subtítulos? Confira nosso tutorial sobre Como alterar os subtítulos do campo de senha.

PERGUNTAS FREQUENTES

Referência da ação: wpforms_wp_footer_end