¿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é escribir en una página de inicio de sesión?

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.

La página de inicio de sesión de tu sitio es un lugar donde los usuarios 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.

Probablemente también querrás incluir alguna forma de texto en tu página de inicio de sesión, para informar o guiar a los usuarios de tu sitio web sobre cómo acceder al sitio. También podrías añadir imágenes como logotipos e ilustraciones en tu inicio de sesión, y puedes optar por funciones de seguridad adicionales para evitar que el spam no deseado sature tu página de inicio de sesión.

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

1. Formulario de inicio de sesión simple

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 registrarte en el 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 de control. 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 constructor de formularios.

El constructor de formularios de WPForms 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 simplemente 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 Enviar 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 por ejemplo '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.

Desde aquí, procede a Guardar 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. Formulario de inicio de sesión con texto instructivo

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 instructivo y resalta la parte que quieres 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. Formulario de inicio de sesión con imagen de encabezado

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, sube 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. Formulario de inicio de sesión con logotipo de empresa

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. Formulario de inicio de sesión con ilustración

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 de Diseño y el campo de 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, añadirás contenido a la otra columna del campo de Diseño.

Selecciona de nuevo el campo de Contenido y arrástralo a la columna más grande en el lado derecho de tu formulario.

Ahora puedes añadir 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 Añadir medios como 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 colocación de tu ilustración.

Para una ilustración grande como el ejemplo, es posible que desees eliminar cualquier texto adicional del campo de 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. Formulario de inicio de sesión con CTA

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 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. Formulario de inicio de sesión con reCAPTCHA

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 de casilla de verificación v2.

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, como todas tus páginas de WordPress, deberás publicar la página con tu formulario incrustado para ponerla en vivo 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.

Crea tu página de inicio de sesión ahora

A continuación, Crea un Formulario de Registro con PayPal

Ahora que has aprendido todo sobre cómo crear formularios de inicio de sesión para tu sitio web de WordPress, ¿por qué no intentas crear un formulario de registro de WordPress con PayPal? De esa manera, puedes registrar a los usuarios de tu sitio web y comenzar a cobrar pagos.

Si deseas una impresión de las entradas de tu formulario, te recomendamos que consultes nuestra guía sobre cómo imprimir formularios de WordPress en PDF.

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor 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.