¿Quieres personalizar la página de inicio de sesión en tu sitio web de WordPress? ¡Con WPForms, tienes muchas maneras de estilizar tus formularios de inicio de sesión, sin necesidad de código!

En esta publicación, te mostraremos 7 ejemplos diferentes de páginas de inicio de sesión de sitios populares y cómo recrearlas.

Te guiaremos a través del proceso de creación de cada formulario con el mismo estilo de los ejemplos que presentamos aquí, con solo unos pocos clics de tu ratón.

¡Vamos a ello!

¡Crea tu página de inicio de sesión ahora! :)

¿Qué hace que una página de inicio de sesión sea buena?

Tu página de inicio de sesión probablemente contiene algunos campos donde los usuarios escriben su nombre de usuario, dirección de correo electrónico, contraseña y más. Es un lugar donde los visitantes del sitio web introducen sus credenciales para acceder a tu sitio.

Estos visitantes pueden tener una cuenta en tu sitio, o alguna otra razón para necesitar iniciar sesión en tu sitio web. Las páginas de inicio de sesión sólidas tienden a compartir el mismo puñado de decisiones, incluso cuando no se parecen en nada en la superficie.

• Un trabajo, claramente expuesto: Una página de inicio de sesión solicita credenciales y se aparta para reducir distracciones y ayudar a los usuarios a acceder a sus cuentas.
• Una salida para personas que no tienen cuenta: Un número sorprendente de visitantes de la página de inicio de sesión están en el lugar equivocado. Un enlace de registro visible les evita rebotar.
• Un enlace de restablecimiento de contraseña fácil de encontrar: Las contraseñas olvidadas son la razón más común por la que alguien aterriza en una página de inicio de sesión dos veces seguidas.
• Suficiente marca para que parezca tu sitio: Un logo o una imagen de cabecera suelen ser suficientes. Los lectores se ponen nerviosos al escribir una contraseña en una página que parece genérica.
• Protección contra spam que no penaliza a personas reales: Los bots atacan constantemente los formularios de inicio de sesión. Una casilla de verificación o una comprobación invisible detienen la mayor parte sin añadir fricción.
• Espacio para respirar en un teléfono: Los campos abarrotados y los objetivos de toque diminutos fallan en el móvil mucho antes de fallar en el escritorio.

7 ejemplos de páginas de inicio de sesión

Cada ejemplo a continuación es una página activa que puedes visitar ahora mismo. Debajo de cada una, he extraído la elección de diseño específica que la hace funcionar, para que puedas adoptar el patrón en lugar de copiar los píxeles.

1. HubSpot

Esta página de inicio de sesión en el sitio web de HubSpot es bastante básica y sin muchos detalles incluidos en el formulario. El formulario simplemente consta de un campo para correo electrónico, contraseña, una casilla de verificación y un botón de inicio de sesión.

Lo interesante de un formulario como este es que es como la base de todos los demás ejemplos de formularios de inicio de sesión. Tiene los elementos más básicos necesarios para una página de inicio de sesión.

Y, si lo prefieres, tu propia página de inicio de sesión también puede ser simplificada así. WPForms es el mejor plugin constructor de formularios para WordPress, y hace que sea muy fácil para ti añadir una página de inicio de sesión personalizada a tu sitio web.

Primero, necesitarás instalar WPForms y suscribirte al Plan Pro para acceder al complemento de Registro de Usuarios. Después de introducir tu clave de licencia en la configuración de WPForms, ve a WPForms » Complementos en tu panel.

Desplázate por los complementos disponibles para encontrar el complemento de Registro de Usuarios, que también instalarás. Asegúrate de activar el complemento una vez que lo hayas instalado.

Ahora estás listo para crear tu formulario de inicio de sesión. Ve a WPForms » Nuevo y busca la plantilla Formulario de inicio de sesión de usuario entre tus plantillas de complementos disponibles.

Haz clic en el botón Usar plantilla para seleccionar esta plantilla y abrir el creador de formularios. El creador de formularios de WPForms te facilita la edición de esta plantilla predefinida para adaptarla a tus necesidades.

Encontrarás una amplia selección de campos de formulario que cubren prácticamente cualquier elemento que desees en tu formulario en línea. Todo lo que necesitas hacer es arrastrar y soltar cada campo en su lugar.

Verás que el Formulario de inicio de sesión de usuario ya ha cargado los campos necesarios. Pero, como todas las plantillas de WPForms, este formulario es altamente personalizable, por lo que puedes añadir y editar campos en tu formulario de diversas maneras.

Para este formulario, editemos el botón de Envío en la parte inferior del formulario para que diga 'Iniciar sesión', como en el ejemplo de la página de inicio de sesión de HubSpot. Simplemente haz clic en el botón para expandir su configuración.

Luego, para cambiar el texto del botón, abre la pestaña General y desplázate hasta el cuadro Texto del botón de envío.

Ahora, escribe lo que quieras que diga el botón, como 'Iniciar sesión'. Mirando de nuevo el formulario, el botón en la parte inferior del mismo se alinea mejor con la naturaleza de inicio de sesión de esta página.

Y eso es todo lo que necesitas hacer para crear un formulario de inicio de sesión básico como el que se utiliza en la página de inicio de sesión de HubSpot. A partir de aquí, adelante y Guarda este formulario.

Una vez guardado, este formulario estará disponible para su uso en la página Todos los formularios de WPForms en tu panel de WordPress.

Ahora tienes un formulario de inicio de sesión simple que puedes publicar rápidamente en tu sitio, o que podrías usar como base para crear páginas de inicio de sesión más detalladas. Estos son los pasos básicos requeridos para todos los ejemplos de páginas de inicio de sesión cubiertos aquí.

2. WordPress.org

Echa un vistazo a la página de inicio de sesión de WordPress.org. Al igual que el primer ejemplo que cubrimos, este es bastante básico. Pero tiene un fragmento de texto instructivo en la parte superior, y tu formulario también puede tenerlo.

Como mencionamos, cada formulario creado aquí requiere primero la plantilla de Formulario de inicio de sesión de usuario, incluido este. Continúa y selecciona la plantilla de nuevo.

Luego, en el constructor de formularios, arrastra el campo Contenido a la parte superior del formulario y suéltalo allí.

Como dijimos antes, puedes arrastrar y soltar este campo en tu formulario donde quieras. Pero para que se parezca al texto instructivo de la página de inicio de sesión de arriba, coloquemos el campo en la parte superior.

Haz clic en el campo para abrir sus opciones personalizables, que se encuentran en el lado izquierdo de la pantalla. Luego, utiliza el editor de texto para escribir el texto instructivo que deseas que se muestre en este campo.

Al igual que el ejemplo anterior, puedes instruir a los usuarios sobre cómo introducir su información para iniciar sesión en tu sitio web.

Tienes muchas opciones al alcance de tu mano gracias al editor de texto, con estilos de fuente personalizables, colores y más, todo disponible dentro de este campo.

Por ejemplo, mira de nuevo la página de inicio de sesión de HubSpot del ejemplo 1. Observa que hay un fragmento muy corto de texto instructivo.

El texto instructivo dice: '¿No tienes cuenta? Regístrate' y proporciona un enlace a una página donde los usuarios pueden crear una cuenta.

Esto también es posible con el editor de texto del campo Contenido en tu formulario. Primero, escribe tu texto de instrucciones y resalta la parte que deseas enlazar. Luego, haz clic en el icono de enlace en la barra de herramientas del editor de texto.

Ahora, insertarás la URL de la página a la que quieres que los usuarios aterricen. Haz clic en Aceptar cuando hayas terminado.

¡Y eso es todo! Ahora tienes texto instructivo y un enlace en tu formulario.

Como siempre, guarda tu formulario para más tarde o incorpóralo en una página. Compartiremos detalles sobre cómo publicar cuando estés listo para que la página de inicio de sesión se publique en tu sitio al final de esta publicación.

3. Imagen de cabecera

Otra forma de personalizar el Formulario de inicio de sesión de usuario para tu página de inicio de sesión es añadiendo una imagen de encabezado de tu elección. Usar una imagen en la parte superior de tu formulario es una buena manera de personalizarlo o complementar el estilo de tu sitio web.

Para añadir una imagen de encabezado, utilizarás una vez más el campo Contenido y la plantilla del Formulario de inicio de sesión de usuario. Arrastra y suelta este campo en la parte superior de tu formulario como antes.

Pero esta vez, haz clic en el botón Añadir medios encima del editor de texto.

Ahora, subirás una imagen de tu elección, que aparecerá encima del texto en el editor de texto. También puedes eliminar el texto esta vez si lo deseas, y trabajar solo con la imagen.

Haz clic en la imagen para acceder a su Configuración de visualización y posicionarla como prefieras.

Para que la imagen de nuestro ejemplo actúe como una verdadera imagen de encabezado, centraremos la alineación y seleccionaremos la versión de tamaño completo. Puedes ajustar estas configuraciones varias veces para averiguar qué prefieres.

Asegúrate de hacer clic en el botón azul Actualizar para aplicar cualquier cambio. También puedes explorar las otras pestañas de configuración para más opciones, como cambiar el Tamaño del campo en la pestaña Avanzado.

Prueba el tamaño de campo Grande para ver tu imagen mostrada aún más grande en la parte superior de tu formulario, al estilo de una imagen de encabezado.

Una vez más, asegúrate de guardar tu formulario para más tarde. Y para más consejos relacionados con este ejemplo, consulta esta publicación completa sobre cómo añadir una imagen de encabezado a tus formularios.

4. SendLayer

Echemos un vistazo a la página de inicio de sesión de SendLayer. En la parte superior del formulario, encima del texto instructivo que cubrimos anteriormente, se encuentra el logotipo del sitio web.

Tú también puedes añadir un logotipo a tu formulario, utilizando una vez más el campo Contenido en tu Formulario de inicio de sesión de usuario.

¿Recuerdas cómo usaste el campo Contenido para subir una imagen de encabezado? ¿Por qué no usar un proceso similar para mostrar un logotipo? Gracias al creador de formularios, tienes múltiples opciones para colocar logotipos en tu formulario.

Simplemente arrastra el campo Contenido a donde lo quieras en tu formulario.

Para que se parezca al ejemplo anterior, coloquemos el logotipo en la parte superior del formulario. Y dado que esto es un poco como una imagen de encabezado, un logotipo de estilo horizontal podría quedar mejor aquí.

Recuerda simplemente hacer clic en el botón Añadir medios del campo Contenido para subir tu logotipo.

Y no te olvides de las configuraciones adicionales. Es posible que desees centrar el logotipo, hacerlo de tamaño completo o cambiar el tamaño del campo en la configuración Avanzada.

También puedes editar el texto debajo del logotipo como cubrimos en el ejemplo del texto instructivo, lo que haría que tu formulario aquí se pareciera mucho al ejemplo.

Tu página de inicio de sesión ahora tiene tu logotipo claramente mostrado en tu formulario. ¡Siéntete libre de añadir otro logotipo en la parte inferior, o dondequiera que desees arrastrar el campo Contenido!

5. TrustPulse

Ahora tomemos nota de la página de inicio de sesión de TrustPulse. Este formulario de inicio de sesión tiene las credenciales introducidas en un lado de la pantalla con un pequeño logo encima, y una gran ilustración mostrada en el otro lado.

Tú también puedes crear un formulario que se vea así utilizando el campo Diseño y el campo Contenido juntos. Primero, arrastra el campo Diseño a tu Formulario de inicio de sesión de usuario.

En realidad, no importa dónde arrastres y sueltes el campo de Diseño ahora mismo, porque eventualmente arrastrarás los campos precargados del formulario al propio campo de Diseño.

Por ahora, simplemente arrástralo a la parte superior del formulario para mantener el orden. También seleccionarás la orientación de las columnas dentro del diseño, lo que determinará el tamaño y la colocación del contenido en este campo.

Ahora, arrastra el campo Contenido a la primera columna del campo de Diseño en tu formulario, para que puedas mostrar un logo aquí como en el ejemplo de TrustPulse.

Usa el botón Añadir medios para subir tu logo una vez más, y luego asegúrate de que la configuración de la imagen tenga la orientación y el tamaño que deseas.

A continuación, arrastra y suelta los demás campos del formulario en ese lado del campo de Diseño.

Simplemente agarra cada campo con el ratón, arrástralo a la columna de Diseño y suéltalo. El campo de Correo electrónico, el campo de Contraseña y la casilla de verificación ahora estarán en la columna izquierda de tu formulario.

Ahora, agregarás contenido a la otra columna en el campo Diseño. Selecciona nuevamente el campo Contenido y arrástralo a la columna más grande en el lado derecho de tu formulario.

Ahora puedes agregar una ilustración de tu elección para que se muestre en gran medida en este lado de tu formulario. Haz clic en el botón Agregar medios como lo hiciste en el otro lado para subir una ilustración.

Y, una vez más, asegúrate de ajustar la configuración del campo para personalizar el tamaño y la ubicación de tu ilustración. Para una ilustración grande como el ejemplo, es posible que desees eliminar cualquier texto adicional del campo Contenido.

Y ahora tu formulario tiene el pequeño logo y las entradas de credenciales en un lado, y una gran ilustración mostrada en el otro lado.

Como siempre, necesitarás guardar este formulario para mantenerlo en WPForms en tu panel de control, y luego incrustarlo en una página de WordPress cuando estés listo para usarlo.

6. ExactMetrics

A continuación, veremos la página de inicio de sesión de ExactMetrics, que es algo similar al inicio de sesión anterior, pero con un botón de llamada a la acción en un lado del formulario en lugar de una ilustración.

Un lado tiene un pequeño logo, entrada de correo electrónico, entrada de contraseña y botón de inicio de sesión, y el otro lado tiene bastante texto, seguido de una CTA (llamada a la acción) en la que se puede hacer clic.

Para crear un aspecto similar con tu propio formulario, simplemente necesitas seguir los pasos que cubrimos en el ejemplo anterior: primero añadiendo el campo de Diseño a tu Formulario de inicio de sesión de usuario, y arrastrando los campos a un lado o columna del diseño.

Recuerda, simplemente arrastra el campo de Contenido al Diseño para subir tu logo, y luego arrastra los campos restantes del formulario a ese lado del Diseño también.

Pero luego, para el otro lado del campo de Diseño, en la segunda columna, no te preocupes por subir nada. Simplemente edita el texto que ya está aquí.

Observa cómo parte del texto precargado es más grande y negrita que lo que está debajo, similar al estilo de texto del ejemplo.

Esto facilita la adaptación de tu texto al del ejemplo, pero no olvides todas las demás formas de usar el editor de texto a tu favor. Puedes cambiar el tamaño, la orientación, el color y más del texto como mejor te parezca.

Y dentro del editor de texto del campo Contenido, incluso puedes insertar un fragmento de código para crear un botón de llamada a la acción (CTA). Haz clic en la pestaña Texto del cuadro del editor de texto para copiar y pegar el código que deseas usar para crear un botón.

Puedes editar tu fragmento de código para dar estilo a la apariencia de tu botón de llamada a la acción como desees.

¡Ahora tienes un botón de llamada a la acción (CTA) en tu formulario! Una vez más, deberás guardar este formulario y luego incrustarlo en una página de WordPress cuando estés listo para usarlo.

7. WPForms

Ahora que hemos repasado las formas más complejas de estilizar un formulario de inicio de sesión, veamos uno de los elementos de seguridad más fáciles de agregar a tu formulario, donde quieras.

La verificación reCAPTCHA ayuda a proteger tu sitio web de WordPress de bots y spam que intentarían usar tus formularios para acceder a tu sitio.

Como puedes ver, lo usamos en nuestra propia página de inicio de sesión aquí en WPForms.

También puedes agregar fácilmente un campo reCAPTCHA a cualquiera de tus formularios de inicio de sesión. Pero primero, deberás configurarlo en la configuración de tu WPForms.

Desde tu panel de WordPress, navega a WPForms y luego a Ajustes. Luego, asegúrate de estar en la pantalla CAPTCHA.

Selecciona la opción reCAPTCHA desde el centro de la pantalla.

Luego, elegirás el tipo de verificación reCAPTCHA que deseas usar. Seleccionemos el reCAPTCHA v2 de casilla de verificación.

A continuación, deberás introducir una Clave de sitio y una Clave secreta en esta página de configuración, proporcionadas por Google. Para recibir estas claves, debes seguir el proceso de configuración en la consola de administración de reCAPTCHA de Google.

Para obtener más información, junto con un tutorial completamente detallado sobre cómo hacerlo, consulta nuestro artículo sobre  cómo configurar y usar reCAPTCHA con tus formularios de WordPress.

No olvides hacer clic en Guardar en la parte inferior de esta pantalla para aplicar esta configuración a tu campo reCAPTCHA.

Ahora estás listo para agregar la verificación reCAPTCHA a tu formulario. De vuelta en la página de creación de formularios, solo necesitas hacer clic en el campo reCAPTCHA para habilitarlo en tu Formulario de inicio de sesión de usuario.

¡Y eso es todo! Tu formulario de inicio de sesión ahora está protegido contra bots y spam que de otro modo podrían infiltrarse en tu sitio.

Además, el icono reCAPTCHA se muestra en tu formulario, lo que indica a tus usuarios que su información está segura.

Cómo añadir una página de inicio de sesión personalizada a WordPress

Lo útil del creador de formularios de WPForms es que todas las opciones personalizables y las elecciones de estilo inspiradas en estos ejemplos se pueden crear en el propio formulario.

Sin embargo, algunos de los estilos logrados en estos ejemplos pueden ser el resultado de una edición adicional en la página de inicio de sesión.

Por lo tanto, para obtener consejos más detallados sobre cómo lograr aún más estilo con WPForms en tu página de WordPress, consulta este artículo completo sobre cómo estilizar formularios con CSS.

Además, ten en cuenta que con todos tus formularios creados y los ejemplos que hemos cubierto aquí, deberás guardar el formulario cuando termines de editarlo.

Luego, quizás más tarde si es necesario, puedes incrustar el formulario en una página y publicarlo cuando estés listo. O, desde el creador de formularios, puedes proceder a incrustar tu formulario en una página ahora.

Al hacer clic en Incrustar, puedes incrustar tu formulario de inicio de sesión en una página que ya hayas creado para tu sitio web, o puedes crear una nueva página ahora para este formulario de inicio de sesión.

Si decides crear una nueva página, deberás nombrarla, al igual que se nombran las otras páginas de tu sitio web, para que puedas encontrarlas fácilmente en el panel de WordPress.

Haz clic en ¡Vamos! para continuar. WPForms agregará automáticamente tu formulario de inicio de sesión a tu nueva página.

Después de que tu formulario esté incrustado, siempre puedes editar algunas cosas más en la propia página de WordPress accediendo a la configuración del bloque WPForms y editando otros elementos de estilo de la página.

Consulta este artículo para obtener más ideas sobre cómo editar y personalizar tu página de inicio de sesión de WordPress.

Y recuerda que, al igual que todas tus páginas de WordPress, deberás publicar la página con tu formulario incrustado para que esté activa en tu sitio web. También puedes previsualizar la página antes de publicarla, o guardar el borrador para más tarde.

Para leer aún más sobre este tema, consulta este tutorial que cubre cómo mostrar formularios de inicio de sesión y registro.

Preguntas frecuentes sobre ejemplos de páginas de inicio de sesión

El diseño de la página de inicio de sesión surge mucho entre los propietarios de sitios de WordPress, especialmente una vez que un sitio comienza a aceptar registros. Aquí están las preguntas que me hacen con más frecuencia.

¿Cómo creo una página de inicio de sesión personalizada en WordPress?

Instala el complemento User Registration, empieza con la plantilla User Login Form, personalízala en el editor de formularios, luego incorpórala en una página y publícala. WordPress mantendrá su pantalla de inicio de sesión predeterminada en wp-login.php, y tu página personalizada funcionará junto a ella en lugar de reemplazarla.

¿Puedo añadir un enlace de registro a mi página de inicio de sesión?

Sí, y deberías hacerlo si el registro está abierto en tu sitio. Añade un campo de Contenido a tu formulario de inicio de sesión y usa la herramienta de enlaces del editor de texto para dirigir a tu página de registro. La frase de HubSpot “¿No tienes cuenta? Regístrate” es el patrón a seguir.

¿Necesito un CAPTCHA en mi página de inicio de sesión?

Para cualquier sitio con cuentas de usuario reales, sí. Los formularios de inicio de sesión reciben tráfico automatizado, lo hayas notado o no, y los intentos fallidos no aparecen en ningún lugar obvio. reCAPTCHA, hCaptcha y Cloudflare Turnstile funcionan con WPForms en todas las licencias, incluida la versión gratuita.

¿Puedo usar una página de inicio de sesión personalizada en lugar de wp-login.php?

Tu página personalizada puede convertirse en la página de inicio de sesión a la que enlazas en todas partes, pero wp-login.php permanece activa en segundo plano porque el núcleo de WordPress depende de ella. Ocultarla o moverla requiere un complemento dedicado en lugar de un formulario, y hay un resumen de las opciones en nuestra guía de complementos de página de inicio de sesión.

A continuación, convierte tus nuevos registros en usuarios registrados

Una página de inicio de sesión solo justifica su existencia una vez que las personas tienen cuentas para iniciar sesión. Si también estás creando el lado del registro, consulta nuestra guía sobre cómo crear un formulario de registro de WordPress con PayPal.

Cubre el registro de nuevos usuarios y la recepción de pagos en el mismo paso, que es lo siguiente que la gente suele querer después de una página de inicio de sesión.

Y si necesitas un registro de quién se registró y cuándo, echa un vistazo a cómo imprimir tus envíos de formularios en PDF.

Crea tu página de inicio de sesión 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.