100 Formularios HTML5 CSS3 gratuitos de registro / ininio de sesión

¿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 inicio de sesión o registro en particular. En esta entrada vamos a explicarte por qué tu sitio web necesita este tipo de formulario, qué aspecto debería tener y dónde puedes descargarlo de forma gratuita.

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

¿Cómo puedes entender si algún formulario de inicio de sesión 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.


Una colección de formularios gratuitos de registro / inicio de sesión en HTML / CSS

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.


Sign-Up/Login Form

El autor utilizó pestañas y etiquetas móviles en este formulario moderno y minimalista. Es neutral, por lo que su diseño se ajusta bien a cualquier tipo de sitio web.


Material Login Form

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


Responsive Login Form

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


Flat HTML5/CSS3 Login Form

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

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

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


Animated Login Form

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

Hay nada extra en éste, es solo un formulario de inicio de sesión elegante.


Login Form - Modal

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

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


Random Login Form

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


Pure CSS3 Login Form

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

Nos gusta éste por su combinación de colores y fuentes en negrita. Esta es una versión mejorada del PSD hecho por TemplateMonster!


Flat Login Form

Wow, aquí tenemos un video de fondo! Además, échale un vistazo a su bonito diseño plano.


Basic Login Form using Bootstrap

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


Login Form

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

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


Iron Man Login Form

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


Login Form

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


Unfolding Login Form

Éste es un diseño muy original con elementos 3D.


Flat UI Login Form

Un ejemplo más del formulario CSS3 con un diseño plano. Tiene varias pestañas y un bonito botón cliqueable.


Material Login Form

Aquí hay otro formulario impresionante.


Login Form

Tiene un diseño muy básico en colores contrastantes. Adecuado para cualquier proyecto.


Simple Login Form Template

Nada muy especial, éste es solo otro formulario bueno y utilizable para tu sitio web.


Amazing CSS3 Login Form

Nos gusta este diseño ligero y un poco vintage. El formulario funciona bien y hace una buena impresión.


Login form

Éste es una formulario invisible muy atractivo y simple que se abre cuando pasas el ratón sobre él. Es perfecto para aquellos que aprecian la animación y el diseño plano.


Material Design Login Form

Este formulario neutral será una opción perfecta para cualquier proyecto web.


LogIn Form

Un formulario de registro dinámico y transparente. El panel invisible aparece una vez que haces clic en un icono.


Paper login form

Examina este formulario de inicio de sesión que se ve realmente bien y tiene todas las funciones que debe tener esta herramienta.


Login form

Este formulario cuenta con excelentes transiciones de CSS3 y un diseño de panel transparente. Se verá impresionante sobre cualquier fondo.


Popup Login & Signup with jQuery

¡Échale un vistazo a este hermoso formulario emergente! Los campos de registro aparecen después de hacer clic en el botón derecho.


Concept Material Login Form

Un hermoso formulario monocolor. Sus campos son dinámicos, y hay algunas animaciones al hacer clic en el botón Iniciar sesión.


Login form

Aquí hay un formulario de inicio de sesión sencillo, pero atractivo.


CSS3 Animation Cloud and login form

¿Qué te parece este formulario dinámico para sitios web y juegos? Las nubes se mueven a diferentes velocidades, lo que parece al efecto Parallax.


Pop Up Login Form

Este producto se creó con Bootstrap Modal. Cuando haces clic en el botón de inicio de sesión, aparece un hermoso panel en gradientes de colores.


Login form

Un formulario bonito minimalista para un sitio corporativo o una aplicación de empresa.


Flat Login Form

Es un formulario de diseño plano que integra una animación de CSS3. Es flexible y aadecuado para proyectos de diseño web menos exigentes.


Material login form concept

Este producto cuenta con un panel de registro muy bonito con un diseño texturizado. Después de ingresar detalles correctos, aparecerá un panel de inicio de sesión y podrás ver el nombre y la imagen del usuario. El formulario es muy interactivo y dinámico.


Basic Login Form

Éste cuenta con un bonito icono de taza de café y una animación CSS elegante.


Boxy-login

Un formulario de inicio de sesión que interactúa con tigo a medida que ingresas tus datos. Echa un vistazo al bloque giratorio con los campos de nombre de usuario y contraseña.


Snake highlight

Este diseño de vanguardia presenta un efecto que se parece a las luces de neón.


Login Form CSS only validation

Un formulario con una validación de CSS3, casillas de verificación, una contraseña visible y selectores.


Revised login form

¡Una obra maestra más de Tony Stark para tu página web! Es muy dinámico e impresionante.


Animated Login Form

Éste cuenta con múltiples elementos de CSS. Después de iniciar sesión correctamente, el nombre del usuario y el avatar se hacen visibles.


Login form UI Design

El formulario incorpora elementos de HTML, SASS y Jquery. ¡Échales un vistazo a sus formas brillantes y botones bonitos!


Elastic Login Form

Un formulario interactivo con gradientes de neón. Los campos aparecen después de hacer clic en la imagen de avatar del usuario.


Batman login form

Un formulario negro muy elegante con un efecto visual brillante! Añadirá un poco de alegría a cualquier sitio web corporativo estricto.


Responsive Signup/Login form

Este es un formulario de registro grande con paneles adicionales. Es responsive, por lo que podrás disfrutar de su interfaz de usuario en cualquier pantalla.


Flipping login form

Aquí hay otro formulario de inicio de sesión minimalista con una textura agradable.


Facebook Login Form

Échale un vistazo a este formulario de inicio de sesión a través de Facebook. El producto cuenta con elementos de HTML, SASS y CSS3.


Login form & Email client

Un formulario de inicio de sesión muy elegante con elementos SVG y un fondo borroso.


Responsive Login Form

¡Échale un vistazo a este brillante diseño inspirado en la selva! El formulario tiene dos paneles colocados verticalmente con múltiples opciones de inicio de sesión.


Dark login form with user profile animation in the background

Este formulario impresionante tiene un fondo dinámico. El panel se ve minimalista pero brillante.


Panda Login

Este panda grande seguirá tu cursor mientras lo mueves en la página. El formulario es muy interactivo y hace que quieras permanecerte en el sitio web y jugar con él durante algún tiempo.


3D login form concept

Este formulario 3D de aspecto simple te sorprenderá con la rotación mientras que llenas los campos con tu nombre de usuario y contraseña.


Best Horizontal Android login form

Es un buen formulario de inicio de sesión para proyectos en WordPress. ¡Échales un vistazo a los efectos de degradado de neón en el botón de inicio de sesión!


Login Template powered with Boostrap

Este impresionante formulario dinámico se basa en Bootstrap y tiene un panel de inicio de sesión emergente y un fondo hermoso.


Hide/Show Password Login Form

Éste es un formulario ocultado con un diseño llamativo.


Fancy Parallax Login Form

Un diseño muy dinámico con fondos de neón cambiantes y un panel de Parallax giratorio.


Beautiful Login Form

Un formulario de inicio de sesión minimalista y bonito.


Login to Everdwell

Un enorme y brillante formulario de inicio de sesión a través de redes sociales y con email.


Login Password Mask

Aquí puedes elegir enmascarar tu contraseña y el nuevo campo de contraseña se aparecerá.


Sign up and login form

Examina este formulario impresionante que cuenta con un slider.


Flat UI Login Form - Blue

Este formulario agradable y bien codificado permite registrarse en solo unos segundos. Cuenta con un botón 3D y campos dinámicos.


Brutalist Inspired Login Form with HTML5 Pattern Validation

Este formulario de registro se inspiró en Brutalist. ¡Se ve impresionante!


App Login Concept

Un formulario muy hermoso con una imagen SVG y una animación de campo. Si tu sitio tiene que ver con el fútbol, esta herramienta es para ti.


CSS login form

Este formulario de inicio de sesión está lejos de ser regular. Es una solución perfecta para diseños planos.


Material Login

Un ejemplo hermoso y rico en colores del material design utilizado en los formularios de inicio de sesión. Los campos están muy bien animados y el panel presenta opciones de inicio de sesión a través de redes sociales.


DailyUI #001 - Sign Up

Si te gustan sliders, opta por este formulario. El panel con opciones de inicio de sesión adicionales se desliza cuando se hace clic en él.


Login Form ( Only CSS )

Este formulario de inicio de sesión en CSS cuenta con paneles de opciones de inicio de sesión y registro con una animación bonita.


Bubble animated Login Form

¿Quieres animar tu sitio? Este formulario añadirá una animación bonita y transiciones dinámicas a tu nuevo sitio.


Angularjs Login Form

Aquí hay otra gran solución para un sitio de negocio: un formulario bien diseñado con campos dinámicos y un panel lateral.


Rectangular Prism Login Form

Un formulario en 3D con bloques giratorios.


React Login form

Un formulario de inicio de sesión hermoso y simple que se diseñó en diferentes tonos del azul.


Form with social logins

¡Échale un vistazo a este formulario de aspecto brillante y sabroso!


Simple Login Form Animated

No puedes perderte este formulario bastante simple debido a su impresionante elemento animado. Los campos son transparentes y no podrás dejar de mirar a su fondo abstracto.


Flickering Login

Un diseño con una animación brillante que se habilita cuando se ingresan los datos válidos e inválidos. Este diseño funcionará mejor en un sitio web de alta tecnología o corporativo.


Login Form: weather animation #april-weather

Un diseño sencillo con colores cambiantes, un botón bonito y una impresionante transición dinámica al panel "¿Olvidó su contraseña?".


Flat Login Form

Un diseño muy bonito en colores contrastantes.


Diagonally-cut Search and Login Form

Un producto inteligente dos en uno. Obtendrás un botón de inicio de sesión y un campo de búsqueda en una sola herramienta. Los campos son transparentes, mientras que el fondo es muy impresionante.


Animated Login Form

El panel aparece cuando se presiona el botón rojo grande. Éste es un formulario de inicio de sesión minimalista con una buena animación.


Login form

Este formulario de inicio de sesión interactivo tiene paneles giratorios y otros efectos 3D en CSS.


CSS Animated Login Form

Un formulario de inicio de sesión brillante mejorado con CSS. El diseño no tiene muchos detalles adicionales, pero es perfecto para los proyectos sencillos.


Login form bootstrap

Te encantará este formulario de inicio de sesión lindo e inspirado en Instagram. Es responsive, por lo que se adaptará muy bien a cualquier tamaño de pantalla.


Wavy login form

Éste tiene una hermosa animación de onda vertical. ¡Asegúrate de verla!


Login Form Animation

Este es un formulario con un slider vertical. El panel aparece cuando haces clic en la flecha gris. Su diseño incluye bonitos elementos de JavaScript y CSS.


Log In Form CSS 2017

Un diseño muy bonito con una animación simple.


Slide Reveal Login Form

Este formulario te sorprenderá con un slider original: los campos de inicio de sesión aparecen en el panel frontal que se abre cuando se pasa el cursor sobre él.


Split Screen Login Form

Un bonito diseño de pantalla dividida en el que aparece un gran panel deslizante. El formulario también ofrece las opciones de acceso a trevés de redes sociales.


Login Form

Un formulario de inicio de sesión muy bonito con un panel transparente y pájaros asombrosos en el fondo. También cuenta con las opciones de inicio de sesión a través de redes sociales.


Popup login form materialize css

Haz clic en el botón Iniciar sesión y examina cómo el panel se materializa con los efectos de CSS. Tiene un diseño sencillo y agradable.


Login form build where eyes follow cursor

Este diseño estáprovisto del efecto de resaltado de campo y otros efectos interactivos. En general, se ve muy alegre.


Morphing Login Form

Un formulario sencillo con un poco de animación. Todavía es muy bonito!


Login form - JQuery animate

Un formulario de inicio de sesión de aspecto fresco que tiene todo lo que necesita: campos dinámicos, toggles, opciones de redes sociales. Se creó con la animación de JQuery.


Slide to reveal password

Un formulario de inicio de sesión original en el que puedes deslizar el interruptor para revelar la contraseña.


Angular Login form validating with mock data

Aquí tenemos un formulario de inicio de sesión minimalista.


Login Form

Aquí hay un impresionante formulario animado 2 en 1 que cuenta con paneles de registro e inicio de sesión. Es muy sencillo, pero funcional.


Log in form

Un diseño único oscuro transparente con elementos de color rojo brillante. Hay paneles de inicio de sesión, registro y restablecimiento de contraseña.


Material Login Form

Un formulario de registro con una bonita animación.


Simple Login Widget

Un widget de inicio de sesión vertical para dispositivos móviles que ha sido mejorado con los efectos de CSS3 y la validación de JQuery.


Simple Login Form w/ Social Logins

Un formulario muy adaptable con múltiples opciones de inicio de sesión.


Material Design login/signup form

Este formulario de material design está provisto de animaciones Angular JS y CSS3 tanto para el inicio de sesión como para el registro. Asegúrate de ver su demo para apreciar el trabajo.


Market - Login Form

Y, por último, este gran formulario de inicio de sesión dinámico. Se ve brillante e impresionante y ofrece múltiples opciones de inicio de sesión a través de redes sociales.

Fuente: "100 FREE HTML5 CSS3 Registration/Sign-in Forms" por Anne Laing