Cómo agregar un botón para alternar la visibilidad de la contraseña

Introducción

¿Le gustaría dar a sus visitantes la opción de mostrar u ocultar su contraseña mientras la escriben en su formulario? Por defecto, el campo Contraseña en WPForms oculta la entrada con asteriscos por seguridad.

WPForms incluye una configuración integrada que le permite agregar un interruptor de visibilidad de contraseña con solo un clic en el constructor. Si prefiere agregar esta función con código para tener más control, este tutorial también le mostrará cómo hacerlo con un fragmento de código.

Opción integrada para la visibilidad de la contraseña

A partir de la versión 1.9.8 de WPForms, puede habilitar una opción integrada que permite a los usuarios alternar la visibilidad de la contraseña, sin necesidad de código personalizado.

Para habilitar esta función, haga clic en el campo Contraseña en el constructor de formularios para abrir su panel de Opciones de campo. Luego, en la pestaña General, active la configuración Habilitar visibilidad de contraseña.

Esta es la forma más rápida y sencilla de agregar un interruptor de visibilidad de contraseña a sus formularios.

Si prefiere tener más control o desea personalizar el comportamiento y el estilo, aún puede seguir el tutorial a continuación para agregar esta funcionalidad con un fragmento de código.

Añadir el fragmento

Para agregar manualmente un interruptor de visibilidad de contraseña, deberá colocar un pequeño fragmento de código en su sitio. Este método le brinda más flexibilidad para ajustar cómo se ve y funciona el interruptor.

Copie el fragmento a continuación en su sitio.

Si necesita ayuda sobre cómo y dónde agregar fragmentos de código personalizados, revise 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 cada campo Contraseña agregado a través de WPForms. Aplicará automáticamente una clase de icono específica usando la pseudoclase before. Cuando se haga clic en este icono, invocará el ID de CSS de password-toggle para que muestre la contraseña en lugar de los asteriscos.

Aplicación de CSS personalizado

Ahora, en nuestro último paso, vamos a agregar algo de CSS personalizado para estilizar este icono. Para hacer esto, copiaremos y pegaremos este CSS personalizado en su sitio.

Para cualquier ayuda sobre cómo y dónde agregar 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;
}

Ahora, cuando vea el formulario, verá el interruptor de visibilidad de contraseña.

¡Y eso es todo! ¿Le gustaría también cambiar las subetiquetas? Consulte nuestro tutorial sobre Cómo cambiar las subetiquetas del campo de contraseña.

Preguntas frecuentes

Referencia de acción: wpforms_wp_footer_end