Más de 100 formularios de login en HTML gratis

20 marzo 2020 Diane Parks

¿Eres novato en el diseño web? ¿Creas proyectos web para ti o para otras personas? En cualquier caso, tienes que trabajar en la experiencia de usuario en general y en los formularios de login o registro en particular. En esta entrada vamos a explicarte por qué usar un formulario de login en HTML, qué aspecto debe tener y dónde puedes descargarlo de forma gratuita. ¡Disfruta!

¿Qué debe tener un buen formulario de login?
Formularios gratis para registro / inicio de sesión en HTML / CSS

¿Qué debe tener un buen formulario de inicio de sesión?

¿Cómo puedes entender si algún formulario de login es lo suficientemente bueno?

A continuación, enumeramos los puntos en los que debes centrarte para crear una buena experiencia de usuario con tu formulario.

1.1 Asegúrate de que el formulario tenga etiquetas que indiquen el objetivo de cada campo

Sin etiquetas nadie entenderá qué se espera que haga con un determinado campo y qué tipo de datos debe ingresar. Los campos son similares y los visitantes de tu sitio web no deben perder su tiempo en adivinar dónde hacer qué. Pues, añade etiquetas.

1.2 Haz que los campos sean lo suficientemente grandes

Los campos deben ser fáciles de percibir y agradables a la vista. No debes obligar a los usuarios a escribir textos en pequeños campos. Todo el proceso debe ser sencillo y suave y el texto escrito debe ser bien visible para el usuario.

1.3 Piensa en la experiencia móvil

Debes vincular tus etiquetas a los campos de formulario particulares. En las pantallas pequeñas las etiquetas cliqueables funcionan mejor. Cuando no sea posible hacer una etiqueta de este tipo, asegúrate de que el campo es lo suficientemente grande para que el usuario del móvil pueda verlo sin dificultades.

1.4 Asegúrate de que el botón se destaca

Los usuarios deben de inmediato ver el botón de llamada a la acción y estar motivados a hacer clic en él. Pues, los botones deben ser lo suficientemente grandes y la llamada a la acción debe ser clara y personalizada. No escribas sólo "Enviar"; sería mejor que el texto del botón indique el propósito de la acción, como "Iniciar sesión", "Registrarse", "Unirse a nosotros", etc.

1.5 El formulario debe ser fácil de encontrar en la página

Es mucho mejor cuando los usuarios no tienen que hacer un trabajo adicional, es decir, hacer clics en pestañas o enlaces para iniciar sesión. Si tu página de inmediato muestra los campos de entrada, más personas estarán dispuestas a proporcionarte sus datos.

1.6 Los paneles de inicio de sesión y de registro deben ser separados

¿Alguna vez has escrito tu email en un formulario solo para descubrir que estás utilizando el incorrecto? Es una molestía. Asegúrate de que es absolutamente claro dónde está el formulario de registro y dónde se puede iniciar sesión en una cuenta ya existente. No muestres dos formularios a la vez para evitar confusiones.

1.6 No te olvides del login a través de redes sociales

Iniciar sesión a través de alguna red social es rápido y fácil, especialmente cuando un sitio web se usa muchas veces al día. Ofrece a tus usuarios la oportunidad de iniciar sesión a través de recursos web externos, pero nunca la conviertas en la única opción. Siempre hay personas que no están dispuestas a compartir los detalles de sus cuentas de redes sociales.

1.7 Pídeles que usen emails

Si quieres que tus visitantes recuerden sus datos de inicio de sesión, no les pidas que creen nombres de usuario. Siempre olvidan esos nombres.

1.8 Haz que las contraseñas sean visibles

¿Recuerdas cuántas veces escribiste mal tus contraseñas? Siempre ofrece a los usuarios una opción para ver lo que están escribiendo en el cuadro. Y, por supuesto, los usuarios de dispositivos móviles tendrán que ser muy, muy cuidadosos para ingresar contraseñas con un teclado más pequeño y sin errores. Ayúdalos con la opción "Mostrar contraseña".

1.9 Ayuda a los usuarios a restaurar contraseñas

La opción “¿Olvidó su contraseña?” debe ser clara y fácil de encontrar. Asegúrate de que los usuarios de inmediato reciban los emails de restablecimiento de contraseña y piensa en añadir preguntas de seguridad o una autorización móvil de dos pasos.

100+ Formularios de registro en HTML y CSS gratis

Ahora cuando ya sabes qué debe tener un formulario, échale un vistazo a esta maravillosa selección de herramientas que puedes obtener de forma gratuita. Cada cuadro tiene cuatro pestañas sobre las que puedes pinchar para consultar su HTML, CSS, JS y cómo se verá en la página.

Sign-Up/Login Form

Examina Sign-Up/Login Form por Eric (@ehermanson) en CodePen.

Este es un formulario moderno y minimalista. Su diseño es neutral, por lo que se adapta bien a cualquier tipo de sitio web.

Material Login Form

Examina HTML, SCSS y JS de Material Login Form por Andy Tran (@andytran).

Este es un buen ejemplo de cómo el diseño impresionante interactúa con el usuario para crear una experiencia muy especial.

Responsive Login Form

Examina HTML, CSS y JS de Responsive Login Form por Dominic Francois (@DominicFrancois).

Esta es una herramienta brillante y atractiva adecuada para todo tipo de proyectos. El formulario es adaptable y responsive.

Flat HTML5/CSS3 Login Form

Examina HTML, CSS y JS de Flat HTML5/CSS3 Login Form por Aigars Silkalns (@colorlib).

El diseño plano está siempre de moda. Ajusta este producto a tu sitio o aplicación web y obtendrás un formulario 2 en 1 tanto para iniciar sesión, como para registrarse.

Login Form

Examina HTML, CSS y JS de Login Form por Tyler Fry (@frytyler).

Este producto agradable y minimalista se creó para WordPress. El autor dice que hizo este para sus múltiples proyectos y funciona muy bien. ¡Comprueba por ti mismo!

Animated login form

Examina HTML, SCSS y JS de Animated login form por Mohamed Boudra (@boudra).

Este formulario incluye una animación sencilla y funciona maravillosamente en diferentes recursos web.

Animated Login Form

Examina HTML (Haml), CSS (Sass) y JS (CoffeeScript) de Animated Login Form por Che (@code_dependant).

Este formulario se abre cuando pasas el ratón sobre él. El autor nos promete crear más formularios de registro invisibles pronto.

Elegant Login Form

Examina HTML, CSS (Less) y JS de Elegant Login Form por Victor Hugo Matias (@reidark).

Hay nada extra en éste, es simplemente un formulario de login en HTML elegante.

Login Form - Modal

Examina HTML, SCSS y JS de Login Form - Modal por Andy Tran (@andytran).

El panel de registro invisible aparecerá cuando se hace clic en él. Selecciona la pestaña azul a la derecha e ingresa tus datos de registro.

Sleek Login Form

Examina HTML y SCSS de Sleek Login Form por emma (@boltaway).

¡Es muy bonito! Éste es un formulario minimalista, pero muy atractivo con líneas sutiles y un fondo elegante.

Random Login Form

Examina HTML y CSS de Random Login Form por Lennart Hase (@motorlatitude).

Este formulario se creó al experimentar con los formularios de inicio de sesión. ¡Échales un vistazo a los detalles!

Pure CSS3 Login Form

Examina HTML y CSS de Pure CSS3 Login Form por Daniel Zawadzki (@danzawadzki).

Es un formulario bonito con un icono y elementos visuales brillantes. Se espera una opción de cambio al panel de registro pronto.

Login Form 1

Examina HTML y CSS de Login Form 1 por Felix De Montis (@dervondenbergen).

Nos gusta este formulario por su combinación de colores y fuentes en negrita.

Flat Login Form

Examina HTML, CSS (Sass) y JS de Flat Login Form por Andy Tran (@andytran).

Wow, ¡échale un vistazo a su bonito diseño plano!

Basic Login Form using Bootstrap

Examina HTML, CSS y JS de Basic Login Form using Bootstrap por Zachary Shupp (@zacharyshupp).

Esta es una herramienta perfecta para usar con las plantillas Bootstrap. Se adaptará a ellas sin problemas.

Login Form

Examina HTML y CSS de Login Form por Tushar Sonawane (@Tushkiz).

Para los aficionados al diseño plano, hay un formulario atractivo y sencillo con una buena interfaz de usuario.

Login form using HTML5 and CSS3

Examina HTML, CSS y JS de Login form using HTML5 and CSS3 por Brad Bodine (@bbodine1).

Un gran formulario con múltiples efectos de página. Hay pseudo-elementos rotados creados con CSS3. Con este formulario, es fácil enviar y validar datos.

Iron Man Login Form

Examina HTML y SCSS de Iron Man Login Form por Hugo DarbyBrown (@hugo).

¡Una verdadera obra maestra! Éste es un formulario dinámico y animado para WordPress.

Login Form

Examina HTML y CSS de Login Form por Miro Karilahti (@miroot).

Un formulario atractivo y funcional diseñado en los colores de WordPress.

Unfolding Login Form

Examina HTML, SCSS y JS de Unfolding Login Form por Hans Engebretsen (@hans).

Un diseño muy original con elementos en 3D.