10 fragmentos de código para crear hermosos formularios

Cada sitio web generalmente necesita algún tipo de formulario, ya sea una página de pago o una simple página de contacto.

Es crucial asegurarse de que sus formularios funcionen, por lo que la facilidad de uso es el n. ° 1. Pero la estética también es importante ya que los diseños confiables siempre son más atractivos.

Si no tiene ideas de diseño, esta colección podría ayudarlo. Es una colección de 10 diseños de formularios con código fuente gratuito. Encontrará muchos esquemas de color diferentes, estilos de campo de entrada, estilos tipográficos y mucho más.

Además, todos estos están alojados de forma gratuita para que pueda copiar y jugar con el código a su gusto.

1. Diseño de materiales

Todo el mundo conoce el lenguaje de diseño de materiales de Google durante su ascenso a la fama en los últimos años. Los conceptos de diseño de materiales estaban dirigidos a las aplicaciones de Android, pero se extendieron rápidamente a la web.

Si le gusta el estilo minimalista de la interfaz de usuario de material de Google, consulte este formulario de material creado por Jon Uhlmann.

Se ejecuta en Sass y Pug para el preprocesamiento de CSS/HTML. También es una forma bastante liviana y los elementos de diseño de materiales deberían mostrarse iguales en todos los navegadores.

Verdaderamente una inspiración para todos los diseñadores de materiales.

2. Bajo el mar

Haga un viaje al océano en este formulario de contacto único construido con un estilo acuático.

Todo el fondo de la página utiliza un patrón repetitivo para crear las olas del agua del océano. Pero los pequeños peces animados son una historia completamente diferente que se anima a la vista desde una imagen de fondo.

Además, cada vez que selecciona un campo de entrada, aparece un pulpo amistoso para saludarlo. ¡Que pintoresco!

3. Formulario Bootstrap 3

Los estilos predeterminados de Bootstrap son bastante aburridos y realmente se han usado hasta la muerte en este punto. Cada vez que veo un sitio de Bootstrap con los mismos estilos genéricos, solo puedo imaginar que el diseñador fue demasiado perezoso para personalizar o demasiado centrado en la experiencia para preocuparse.

Este formulario BS3 hace las cosas bien al construir sobre el marco Bootstrap. Utiliza algunos cambios de estilo en los campos de entrada y el botón de envío para crear un adorable formulario de Bootstrap que nunca supo que fue Bootstrap.

Si está ejecutando un diseño BS3, definitivamente está considerando volver a trabajar sus formularios de esta manera. También puede intentar usar un marco de trabajo de terceros construido sobre Bootstrap para un diseño más personalizado.

4. Contacto elegante

Con íconos de Font Awesome y algunos estilos receptivos básicos, este formulario de contacto es realmente único.

Siempre recomiendo agregar íconos en los formularios, especialmente para diseños más grandes. Con más campos, obtiene más dudas y los usuarios solo quieren volar a través de los formularios sin problemas.

Estos íconos simples agregan una pista a cada campo para que sea fácil saber de un vistazo qué tipo de información se requiere.

Y si está buscando algo un poco único, intente agregar una fuente de ícono diferente a la mezcla.

5. Inicio de sesión pequeño

A veces las pequeñas cosas son realmente las mejores cosas. Y esta interfaz de usuario de formulario lo demuestra al crear un formulario de inicio de sesión súper minimizado que simplemente es genial.

La tipografía es enorme con el diseño de formularios y, a menudo, prefiero tipos de letra más pequeños en los campos de inicio de sesión. Realmente depende del sitio web y de qué tan bien se mezcle el texto más pequeño con el diseño.

Pero este formulario también tiene un pequeño gráfico de pasos de progreso colgando del costado que explica el proceso del formulario. Con solo dos campos, esto parece un poco tonto, pero para formularios de registro más grandes, esa barra de progreso resultará invaluable para la experiencia del usuario.

6. Combinación de inicio de sesión y registro

Si desea reducir los tiempos de inicio de sesión, puede intentar combinar el formulario de inicio de sesión y el formulario de registro en una sola página. Es mucho más fácil de lo que piensas y puedes ver una dulce demostración en este pe.

Cada vez que haga clic en los enlaces de inicio de sesión/registro al costado, encontrará una hermosa animación personalizada que gira los formularios para que se vean. Todo funciona a través de jQuery, pero las animaciones también podrían funcionar a través de CSS.

Pero noté un error en este diseño donde la parte inferior del formulario "oculto" aún está visible después de cambiar. Puede resolver esto con la propiedad de visibilidad de CSS o moviendo la posición un poco más fuera de los límites.

7. Contacto de pizarra

Aquí hay un estilo de formulario realmente único que definitivamente salta de la página. Este formulario de contacto de pizarra utiliza un degradado de fondo para crear el efecto de la luz que rebota en la pizarra.

Además, el borde de madera ayuda a vender esta cosa como el verdadero negocio.

El creador Greg Sweet incluso usa una fuente web personalizada que se parece a la típica escritura humana. Esto es perfecto para agregar ese toque final al formulario para que realmente se sienta como si estuviera de vuelta en la escuela.

8. Pago con tarjeta de crédito

He visto muchos formularios de pago, pero este diseño de Fabio Ottaviani es quizás el mejor que he encontrado.

Utiliza JavaScript para manejar la validación del campo de entrada, pero la tarjeta de crédito es todo CSS. Se anima en función de los números que ingresa en el formulario e incluso gira hacia atrás cuando ingresa el número CVV de la tarjeta de crédito.

9. Registro personalizado

Para un formulario de registro de CSS puro, este fragmento realmente se lleva la galleta. Se siente bastante simple descansar en un solo contenedor con una pequeña sombra paralela.

Pero los campos de entrada están muy personalizados, incluido el espacio requerido para agregar esos íconos a cada uno.

Cada vez que resalta un campo, el borde se vuelve verde musgo. ¡Notarás que el icono también cambia de color! Incluso los menús seleccionados para las tarjetas de crédito tienen sus propios estilos personalizados.

Este es un efecto bastante complejo de hacer puramente en CSS, pero el desarrollador José Carneiro lo hizo posible.

10. Etiquetas flotantes

Las etiquetas flotantes personalizadas son algunas de mis tendencias favoritas en el diseño de formularios. Siempre ayudan a mejorar la usabilidad y brindan una explicación clara del campo incluso una vez que lo haya completado.

Eche un vistazo a este formulario de etiqueta flotante que se ejecuta en CSS3 y Compass.

El creador Anton Simanov usa jQuery para las etiquetas, pero todo está codificado a medida sin complementos. Sin mencionar que su solución funciona para todos los estilos de entrada típicos, incluidas las áreas de texto y los menús de selección.

Independientemente del estilo de formulario que elija, ciertamente espero que esta galería pueda brindarle algunas ideas y fragmentos para seguir adelante.

Cuanto más estudie los patrones de diseño, más ideas tendrá para construir sus propios proyectos. Y CodePen es un gran sitio para recopilar esas ideas.