Cómo añadir un botón de alternancia de visibilidad de contraseña

Introducción

¿Le gustaría poder ofrecer a sus visitantes la posibilidad de dar visibilidad a la contraseña mediante un conmutador? Por defecto, cuando añades un campo Contraseña a tu formulario, cualquier entrada en este campo será representada por asteriscos por seguridad. Si desea proporcionar un botón de alternancia que les permita activar y desactivar la visibilidad de la contraseña, puede seguir este tutorial mientras creamos un fragmento de código que nos permitirá conseguirlo fácilmente.

Creación del formulario

Querrás empezar creando un nuevo formulario y añadiendo tus campos. Debido a que estamos creando un formulario que les permitirá crear su propia cuenta, estamos pidiendo su nombre, correo electrónico, nombre de usuario, contraseña y un área de texto para que proporcionen un poco acerca de sí mismos.

Si necesita ayuda para crear su formulario, puede consultar esta documentación.

Instalación del plugin Font Awesome

Queremos utilizar un icono para nuestro botón de alternancia, así que siguiendo un tutorial de nuestros amigos de WPBeginner, vamos a instalar el plugin Font Awesome para que podamos utilizar uno de sus iconos para nuestra alternancia de visibilidad de la contraseña.

Añadir el fragmento

Ahora es el momento de copiar el siguiente fragmento en su sitio.

Si necesita ayuda sobre cómo y dónde añadir fragmentos 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 fragmento se aplicará a todos los Contraseña añadido a través de WPForms. Aplicará automáticamente una clase de icono específica utilizando la función before pseudoclase. Cuando se haga clic en este icono, se invocará el identificador CSS de password-toggle para que muestre la contraseña en lugar de los asteriscos.

Aplicación de CSS personalizado

Ahora, en nuestro paso final, vamos a añadir algo de CSS personalizado para dar estilo a este icono. Para ello, vamos a copiar y pegar este CSS personalizado en su sitio.

Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado, consulta 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;
}

Ahora, cuando veas el formulario, verás el conmutador de visibilidad de la contraseña.

Y ya está. ¿Quiere cambiar también las sub-etiquetas? Echa un vistazo a nuestro tutorial sobre Cómo cambiar las subetiquetas del campo Contraseña.

PREGUNTAS FRECUENTES

Acción de referencia: wpforms_wp_footer_end