### [Cómo agregar un botón de alternancia de visibilidad de contraseña](https://wpforms.com/developers/how-to-add-a-password-visibility-toggle-button/) **Publicado:** 10 de junio de 2022 **Autor:** Umair Majeed **Extracto:** Este tutorial te mostrará cómo puedes proporcionar a tus visitantes un interruptor para tus formularios, permitiéndoles ver la contraseña que están escribiendo en el campo de formulario de Contraseña. **Contenido:** ## Introducción ¿Te gustaría dar a tus visitantes la opción de mostrar u ocultar su contraseña mientras la escriben en tu formulario? Por defecto, el campo de Contraseña en WPForms oculta la entrada con asteriscos por seguridad. WPForms incluye una configuración integrada que te permite agregar un interruptor de visibilidad de contraseña con un solo clic en el constructor. Si prefieres agregar esta función con código para tener más control, este tutorial también te mostrará cómo hacerlo con un fragmento de código. ## Opción integrada para la visibilidad de la contraseña Desde la versión 1.9.8 de WPForms, puedes 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, haz 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**, activa 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 tus formularios. Si prefieres más control o deseas personalizar el comportamiento y el estilo, aún puedes seguir el tutorial a continuación para agregar esta funcionalidad con un fragmento de código. ## Agregar el fragmento de código Para agregar manualmente un interruptor de visibilidad de contraseña, necesitarás colocar un pequeño fragmento de código en tu sitio. Este método te da más flexibilidad para ajustar cómo se ve y funciona el interruptor. Copia el siguiente fragmento de código en tu sitio. **Nota**: Antes de agregar este fragmento de código, asegúrate de haber instalado el plugin Font Awesome. Si necesitas ayuda sobre cómo y dónde agregar fragmentos de código personalizados, [revisa este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms"). ``` /** * Proporcionar un interruptor de alternancia de visibilidad de contraseña * * @link https://wpforms.com/developers/how-to-add-a-password-visibility-toggle-button/ */ function wpf_dev_password_toggle() { ?> **Categorías:** Tutoriales **Etiquetas:** CSS, Javascript, JS, PHP ---