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

Introdução

Você gostaria de oferecer aos seus visitantes a possibilidade de fornecer visibilidade da senha por meio de um botão de alternância? Por padrão, quando você adiciona um campo Senha ao seu formulário, qualquer entrada nesse campo será representada por asteriscos por segurança. Se você quiser fornecer um botão de alternância que permita ativar e desativar a visibilidade da senha, siga este tutorial enquanto criamos um snippet de código que nos permitirá fazer isso facilmente.

Criando o formulário

Você deve começar criando um novo formulário e adicionando seus campos a ele. Como estamos criando um formulário que permitirá que o usuário crie sua própria conta, pediremos o nome, o e-mail, o nome de usuário, a senha e uma área de texto para que ele forneça um pouco sobre si mesmo.

Se precisar de ajuda para criar o formulário, consulte esta documentação.

Instalando o plug-in Font Awesome

Queremos usar um ícone para nosso botão de alternância, portanto, seguindo um tutorial de nossos amigos da WPBeginner, estamos instalando o plug-in Font Awesome para que possamos usar um de seus ícones para nossa alternância de visibilidade de senha.

Adicionando o snippet

Agora é hora de copiar o snippet abaixo para 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