Como adicionar um botão de alternância de visibilidade da palavra-passe

Introdução

Gostaria de poder dar aos seus visitantes a possibilidade de dar visibilidade à palavra-passe através de um interrutor? Por predefinição, quando adiciona um campo de palavra-passe ao seu formulário, qualquer entrada neste campo será representada por asteriscos para segurança. Se pretender fornecer um botão de alternância que permita ativar e desativar a visibilidade da palavra-passe, pode seguir este tutorial enquanto criamos um snippet de código que nos permitirá facilmente atingir esse objetivo.

Criar o formulário

Para começar, crie um novo formulário e adicione seus campos a ele. Uma vez que estamos a criar um formulário que lhes permitirá criar a sua própria conta, pedimos o nome, o e-mail, o nome de utilizador, a palavra-passe e uma área de texto para que forneçam um pouco sobre si próprios.

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

Instalar o plug-in Font Awesome

Queremos utilizar um ícone para o nosso botão de alternância, por isso, seguindo um tutorial dos nossos amigos do WPBeginner, vamos instalar o plugin Font Awesome para podermos utilizar um dos seus ícones para a nossa alternância de visibilidade da palavra-passe.

Adicionar o snippet

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

Este snippet será aplicado a todos os Palavra-passe adicionado através do WPForms. Aplicará automaticamente uma classe de ícone específica utilizando o parâmetro before pseudo-classe. Quando se clica neste ícone, invoca-se a ID CSS de password-toggle para que seja mostrada a palavra-passe em vez dos asteriscos.

Aplicação de CSS personalizado

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

Para obter ajuda sobre como e onde adicionar CSS personalizadas, 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 interrutor de visibilidade da palavra-passe.

E é tudo! Gostaria de alterar também os subtítulos? Veja o nosso tutorial sobre Como alterar os subtítulos do campo de senha.

FAQ

Referência da ação: wpforms_wp_footer_end