Cómo personalizar el formulario de restablecimiento de contraseña de WordPress

El formulario de restablecimiento de contraseña predeterminado de WordPress es bastante básico. Cumple su función, pero no es que grite “profesional” ni coincida con la apariencia de tu marca.

Sin una solución de formulario de contraseña personalizado de WordPress, pierdes la coherencia de marca. Además, no puedes agregar instrucciones útiles ni personalizar los mensajes para guiar a los usuarios a través del proceso de restablecimiento sin problemas.

Ahí es donde el complemento de registro de usuarios de WPForms resulta útil. Te permite crear un formulario de restablecimiento de contraseña totalmente personalizado que realmente parece pertenecer a tu sitio.

Puedes hacer coincidir los colores, las fuentes y el diseño general de tu sitio web, al tiempo que proporcionas instrucciones claras y útiles. Así que, sin más preámbulos, ¡sigue los pasos de esta guía para personalizar tu formulario de restablecimiento de contraseña de WordPress!

¡Crea tu formulario de restablecimiento de contraseña personalizado ahora! 🚀

Cómo crear un formulario de restablecimiento de contraseña personalizado en WordPress

Para crear un formulario de restablecimiento de contraseña personalizado, necesitarás suscribirte a la versión premium de WPForms. La licencia Pro incluye el complemento User Registration, que te permite crear formularios personalizados de restablecimiento de contraseña, registro de usuarios e inicio de sesión para tu sitio web de WordPress. ¡Empecemos!

Paso 1: Instalar el plugin WPForms

Primero, descarga e instala WPForms. Para este tutorial, necesitarás la versión pro en lugar de WPForms Lite. Si necesitas ayuda, consulta esta guía para instalar plugins de WordPress.

Después de instalar el complemento, inicia sesión en tu cuenta de WPForms y haz clic en la pestaña Descargas. Esta es una página con todas tus licencias disponibles.

Para descargar el plugin, haz clic en el bot ilde{A³n Descargar WPForms junto a la licencia pro. Esto guardar ilde{A¡ un archivo comprimido del plugin WPForms en tu ordenador.

Después de descargar tu archivo zip, dirígete a tu sitio de WordPress donde deseas instalar WPForms. Luego, en el panel de administración, haz clic en Plugins » Añadir nuevo y luego en el botón Subir plugin.

Desde aquí, haz clic en el botón Elegir archivo y selecciona el archivo zip de WPForms que acabas de descargar. Después de que tu archivo se haya subido, haz clic en el botón Instalar ahora.

Una vez instalado el complemento, haz clic en el botón Activar complemento para activar WPForms en tu sitio. Después de activar el complemento, recuerda verificar tu clave de licencia de WPForms para recibir actualizaciones automáticas y soporte del complemento.

Añadir tu clave de licencia también te permitirá instalar y activar fácilmente los complementos de WPForms desde dentro de tu panel de WordPress.

Paso 2: Activar el complemento User Registration

Ahora que WPForms está listo, necesitarás el complemento User Registration para crear formularios personalizados de restablecimiento de contraseña. En tu área de administración de WordPress, dirígete a WPForms » Complementos en el menú de la barra lateral izquierda.

Si no ves ningún complemento para tu nivel de licencia, haz clic en el botón Actualizar complementos para forzar una actualización.

Para buscar el complemento User Registration, escribe su nombre en el campo Buscar complementos ubicado en la esquina superior derecha de la página.

Una vez que lo hayas encontrado, simplemente haz clic en el botón Instalar complemento.

Esto instalará y activará automáticamente el complemento por ti. Cualquier complemento que esté instalado y listo para usar mostrará Estado: Activo.

Paso 3: Usar la plantilla de formulario de restablecimiento de contraseña

Ahora, es hora de crear tu formulario de contraseña personalizado en WordPress. Dirígete a WPForms » Añadir nuevo en tu panel para empezar a crear tu nuevo formulario.

Busca “Restablecer contraseña” en la biblioteca de plantillas, luego pasa el ratón por encima de la opción Formulario de restablecimiento de contraseña de usuario y haz clic en Usar plantilla.

Una vez que hayas seleccionado la plantilla, el formulario de restablecimiento de contraseña se cargará en tu pantalla. Esta plantilla está diseñada específicamente para la funcionalidad de restablecimiento de contraseñas y viene con todos los campos esenciales ya configurados.

El formulario incluye automáticamente un campo de Correo electrónico donde los usuarios pueden introducir su dirección de correo electrónico registrada. Este es el componente principal que hace que el proceso de restablecimiento de contraseña funcione.

Siempre personalizo el título y la descripción del formulario para que coincidan con la marca del sitio web. Haz clic en el título del formulario en la parte superior para editarlo. Podrías cambiarlo del valor predeterminado a algo como “Restablece tu contraseña” o “¿Has olvidado tu contraseña?”

No es una buena idea añadir o eliminar ningún campo de esta plantilla, ya que cumple un propósito muy específico de la manera más óptima. Veamos la configuración del correo electrónico de restablecimiento en el siguiente paso.

Paso 4: Configurar tu correo electrónico de restablecimiento de contraseña

Ahora es el momento de afinar cómo funciona tu proceso de restablecimiento de contraseña. Dirígete a Ajustes » Registro de usuario en tu constructor de formularios para acceder a todas las opciones de restablecimiento de contraseña.

Lo primero que querrás hacer es habilitar la funcionalidad de Restablecimiento de contraseña. Siempre me aseguro de que este interruptor esté activado, de lo contrario, tus usuarios no podrán restablecer sus contraseñas a través de tu formulario personalizado.

Una vez habilitado, puedes personalizar la línea de asunto del correo electrónico de restablecimiento. El valor predeterminado podría funcionar, pero prefiero que coincida con la voz de mi marca. Algo como “Restablece tu contraseña de [Nombre del sitio]” se siente más personal que un texto genérico.

Si deseas editar el mensaje del correo electrónico de restablecimiento, asegúrate de no eliminar la etiqueta inteligente {user_registration_password_reset}. Esta etiqueta inteligente crea el enlace de restablecimiento para que el usuario haga clic.

Desplázate más abajo y verás una opción para ocultar tu formulario de restablecimiento de contraseña a los usuarios que hayan iniciado sesión. Si habilitas esta opción, puedes editar el mensaje que se mostrará cuando un usuario conectado abra el formulario.

¡Excelente! Una vez que hayas personalizado la configuración, asegúrate de hacer clic en Guardar en la parte superior. En el siguiente paso, incrustaremos el formulario en una nueva página.

Paso 5: Personalizar la apariencia del formulario de restablecimiento de contraseña

Tu formulario de restablecimiento de contraseña es funcional, pero ahora es hora de que se vea genial. Un formulario bien diseñado genera confianza y hace que el proceso de restablecimiento se sienta más profesional.

WPForms tiene un práctico asistente de incrustación que te permite colocar tu formulario dentro de una página nueva o existente directamente desde el constructor de formularios, y luego puedes personalizar su apariencia directamente en el editor de bloques.

Una vez que tu formulario se haya guardado, haz clic en el botón Insertar. Como queremos insertar nuestro formulario en una nueva página de restablecimiento de contraseña, seleccionaremos la opción Crear Nueva Página.

Dale un nombre apropiado a tu página y luego haz clic en Empezar. Después de eso, WPForms abrirá el editor de bloques de WordPress donde encontrarás tu formulario de restablecimiento de contraseña insertado.

Ahora, usa las opciones de bloque de WPForms a la derecha para utilizar las funciones de estilo del formulario y personalizar tus etiquetas, campos y botones en unos pocos clics.

Cuando estés satisfecho con tu formulario, presiona Publicar para lanzarlo. ¡Tu formulario de restablecimiento de contraseña ya está en línea y listo para usar!

Pero aún no hemos terminado. Es importante asegurarse de que este formulario sea fácil de encontrar para tus usuarios en caso de que necesiten restablecer su contraseña. En el siguiente paso, agregaremos el formulario de restablecimiento de contraseña a la navegación principal de tu sitio.

Paso 6: Añadir el formulario de restablecimiento de contraseña al menú de navegación

Es una buena práctica hacer que tu página de restablecimiento de contraseña sea fácil de encontrar para tus usuarios. Haremos eso agregando la página del formulario recién creada a la barra de navegación de tu sitio en la parte superior.

Esto es fácil de hacer. Simplemente abre tu panel de WordPress y ve a Apariencia » Menús. Es posible que ya tengas un menú de navegación agregado a tu sitio.

En ese caso, solo tendrás que agregar la página de restablecimiento de contraseña al menú. Una vez dentro de la pantalla de Menús, haz clic en tu formulario de restablecimiento de contraseña en la columna de la izquierda y luego presiona Añadir al menú.

Con esto, la página de restablecimiento de contraseña se agregará a la pila de páginas actualmente en tu menú a la derecha. Presiona el botón Guardar menú para actualizarlo.

El proceso para crear un menú por primera vez es casi similar. Solo tendrás que nombrar tu menú primero y luego presionar el botón azul Crear menú en la parte inferior.

Cuando hayas hecho eso, puedes agregar páginas a tu menú usando los pasos que se muestran arriba. Aquí tienes un ejemplo de cómo se ve la navegación para nosotros:

Todo lo que necesitamos hacer ahora es agregar una redirección para que los visitantes que intenten acceder a tu página de restablecimiento predeterminada de WordPress sean redirigidos automáticamente a tu nueva página personalizada de restablecimiento de contraseña.

Opcional: Añadir redirección al formulario de restablecimiento de contraseña personalizado

Si estás creando un formulario personalizado para restablecer contraseñas en tu sitio web, podría ser una buena idea crear también un formulario de inicio de sesión personalizado y con marca para tu sitio.

Además, asegúrate de agregar una redirección para reemplazar la página de inicio de sesión predeterminada de WordPress con la nueva página personalizada. Pero si tu página de inicio de sesión predeterminada aún es accesible, deberías agregar una redirección al formulario de restablecimiento de contraseña.

De esta manera, si un usuario hace clic en el enlace "¿Olvidaste tu contraseña?" desde la página de inicio de sesión de WordPress, será redirigido a la página personalizada de restablecimiento de contraseña que acabas de crear arriba en lugar del formulario predeterminado de restablecimiento de contraseña de WordPress.

No te preocupes; es más fácil de lo que parece. Primero, vamos a instalar el plugin gratuito de WordPress WPCode. En tu panel de WordPress, dirígete a Plugins » Añadir nuevo.

Desde allí, busca WPCode y haz clic en Instalar ahora.

Una vez que hayas hecho clic en Activar, es hora de añadir nuestro código. En tu panel de WordPress, haz clic en Code Snippets » + Añadir Snippet.

Después de hacer clic en eso, verás la biblioteca predefinida con diferentes opciones de código que puedes elegir. Haz clic en Usar Snippet debajo de la opción Añadir tu código personalizado (Nuevo Snippet),

Después de haber titulado tu snippet (nosotros hemos elegido “Nueva página de restablecimiento de contraseña”), haz clic en el menú desplegable Tipo de código a la derecha de la Vista previa del código y selecciona Snippet PHP.

Ahora, puedes copiar y pegar el siguiente código en el editor:

Recuerda reemplazar reset-password en el código anterior con el slug de tu nueva página personalizada de restablecimiento de contraseña.

A continuación, desplázate hacia abajo hasta la sección Inserción, que es donde puedes especificar el método y la ubicación de inserción.

Recomiendo mantener la selección de ubicación predeterminada Ejecutar en todas partes y Insertar automáticamente para el Método de inserción.

Cuando hayas terminado, haz clic en el botón Guardar Snippet en la parte superior derecha. Luego haz clic en el interruptor junto a él para activar el snippet de código.

¡Excelente! Ahora, los usuarios aterrizarán siempre en tu página personalizada de restablecimiento de contraseña cada vez que hagan clic en el enlace de contraseña olvidada.

Pasar de un formulario de restablecimiento de contraseña estándar de WordPress a un formulario de restablecimiento personalizado de WPForms te brinda muchos beneficios además de una marca mejorada.

Por ejemplo, puedes añadir funciones de protección contra spam utilizando la protección antispam integrada de WPForms junto con opciones útiles como establecer un tiempo mínimo para enviar un formulario para mantener a raya a los spambots.

Para más detalles, puedes seguir nuestra guía para prevenir restablecimientos de contraseña no autorizados en WordPress, ¡y eliminar estas solicitudes de spam!

Preguntas frecuentes sobre cómo personalizar el formulario de restablecimiento de contraseña

Aquí tienes algunas preguntas comunes que recibo sobre la personalización del formulario de restablecimiento de contraseña de WordPress con WPForms.

¿Puedo personalizar la plantilla del correo electrónico de restablecimiento de contraseña?

Sí, puedes personalizar el correo electrónico de restablecimiento de contraseña que reciben los usuarios. En la configuración de Notificaciones de tu formulario, puedes modificar la línea de asunto, el contenido del correo electrónico e incluso añadir tu propia marca.

Normalmente incluyo instrucciones claras y establezco expectativas sobre lo que sucederá a continuación. Puedes usar Etiquetas Inteligentes para personalizar el mensaje con el nombre del usuario u otros detalles de su envío.

¿Cómo redirijo a los usuarios después de que envíen el formulario de restablecimiento de contraseña?

Tienes algunas opciones para esto. Ve a Ajustes » Confirmaciones en tu constructor de formularios y elige Mostrar página o Ir a URL (Redirigir).

A menudo redirijo a los usuarios a una página personalizada de "revisa tu correo electrónico" que les da los próximos pasos claros. Esto se siente más profesional que simplemente mostrar un mensaje de éxito genérico.

¿Puedo añadir campos adicionales al formulario de restablecimiento de contraseña?

Absolutamente. Si bien el restablecimiento básico de contraseña solo necesita un campo de correo electrónico, puedes añadir preguntas de seguridad, números de teléfono u otros campos de verificación utilizando cualquiera de los tipos de campo disponibles de WPForms.

Solo recuerda que añadir demasiados campos podría disuadir a los usuarios de completar el formulario. Intento mantenerlo simple mientras sigo obteniendo la verificación que necesito.

¿Qué sucede si un usuario introduce un correo electrónico que no está registrado?

El complemento de registro de usuarios se encargará de esto automáticamente. Si alguien introduce un correo electrónico que no existe en tu base de datos de usuarios, no recibirá un correo electrónico de restablecimiento, pero tampoco recibirá un mensaje de error (esto evita que la gente intente averiguar direcciones de correo electrónico válidas).

Desde la perspectiva del usuario, verá el mismo mensaje de confirmación independientemente. Esta es una característica de seguridad que aprecio mucho.

¿Cómo puedo dar estilo al formulario de restablecimiento de contraseña para que coincida con mi tema?

WPForms te ofrece varias opciones de estilo directamente en el constructor de formularios. Haz clic en tu formulario incrustado en el editor de páginas para acceder al panel de estilo, donde puedes elegir entre temas predefinidos o personalizar colores, fuentes y espaciado.

Para una personalización más avanzada, puedes añadir CSS personalizado a tu tema. Encuentro que las opciones de estilo integradas manejan la mayoría de los casos sin necesidad de código.

¿Puedo deshabilitar el restablecimiento de contraseña predeterminado de WordPress y usar solo mi formulario personalizado?

Sí, pero esto requiere algo de trabajo técnico. Necesitarías añadir código personalizado al archivo functions.php de tu tema para anular el comportamiento predeterminado de restablecimiento de contraseña de WordPress.

Normalmente recomiendo mantener ambas opciones disponibles. Tu formulario de restablecimiento de contraseña personalizado de WordPress puede ser el método principal, mientras que el restablecimiento predeterminado de WordPress sirve como copia de seguridad para los usuarios que lo necesiten.

¿Cómo evito envíos de spam en mi formulario de restablecimiento de contraseña?

WPForms incluye varias funciones anti-spam que puedes habilitar. Activa el campo Captcha Personalizado o habilita hCaptcha en la pestaña Ajustes » General de tu formulario.

También puedes limitar los envíos del formulario por dirección IP o habilitar la función de honeypot. He descubierto que estos métodos funcionan bien juntos para detener la mayoría del spam sin frustrar a los usuarios reales.

¿Puedo rastrear cuántas solicitudes de restablecimiento de contraseña recibo?

Sí, WPForms registra automáticamente todas las entradas del formulario, incluidas las solicitudes de restablecimiento de contraseña. Ve a WPForms » Entradas para ver los detalles del envío, fechas e información del usuario.

Si necesitas análisis más detallados, puedes conectar tu formulario a Google Sheets usando el complemento de Google Sheets para rastrear patrones a lo largo del tiempo. Esto me ayuda a detectar actividad inusual o identificar si los usuarios tienen problemas con partes específicas del proceso.

A continuación, personaliza tu página de restablecimiento de contraseña

Después de incrustar tu formulario de restablecimiento de contraseña en tu nueva página, querrás darle marca.

¿Por qué? Al dar marca a tu formulario y página de restablecimiento de contraseña, solidificarás la noción ante tu cliente de que eres una empresa legítima y aumentarás la credibilidad general de tu marca.

Sigue nuestra guía completa para crear y personalizar páginas de formularios en WordPress. Además, es posible que desees aprender a personalizar una página protegida con contraseña en WordPress.

Consulta también nuestra guía sobre cómo personalizar los colores de tu tema de WordPress y estiliza tus formularios para que coincidan con los colores de tu marca.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.