40 formularios en CSS que no pueden faltar en cualquier web

Si hay algo que suele ser muy común para cualquier tipo de web estos son los formularios. Los formularios que nos sirven para rellenar los datos de contacto, introducir los datos bancarios, iniciar sesión en una red social o simplemente realizar una búsqueda como la que solemos hacer diariamente en el buscador de Google.

Así que hoy os vamos a enseñar 40 formularios en CSS que van desde formularios de contactos, checkouts de tarjetas de crédito, inicios de sesión, simples, de suscripción o incluso de validación. Una serie de formularios de gran elegancia y estilo para darle ese punto especial a vuestro sitio web, ya sea la temática que sea.

Formulario de contacto minimalista

Un formulario de contacto simple con una gran variedad de efectos como son marcas flotantes o animaciones de línea. Un elegante código en CSS con un poco de JavaScript.

Formulario minimalista

Otro código, aunque solamente en CSS para ser un formulario simple y de gran efecto. No tiene las animaciones minimalistas del anterior, pero cumple muy bien con su objetivo.

Formulario de contacto vintage

Responsive para esos sitios web para verse desde mobile, aunque no incluye la validación.

Formulario de contacto de carta

Este formulario tiene una animación bastante curiosa: se forma una carta. Sencillo, pero de gran utilidad con bastante color.

Formulario de contacto expandido

Este formulario es solamente front end y tiene la validación con jQuery. Hacemos clic sobre el botón flotante y surgirá el formulario con una vibrante animación. Destacado.

Contact Form UI

Este formulario está hecho en HTML y CSS. Destaca por ser una simple tarjeta de contacto que podemos rellenar para que cambie solo el campo del texto cuando es pulsado.

Checkout de tarjeta de pago

Un checkout hecho en HTML, CSS y JavaScript que se distingue por la animación que rota la tarjeta de crédito en el momento que pulsemos sobre el campo CVC o número de seguridad.

Diseño plano tarjeta de crédito

Puro CSS para un checkout para tarjetas de crédito en colores plano. Colorido y bien sencillo que es capaz de denotar calidad y profesionalidad.

UI tarjeta de crédito

Otra tarjeta de crédito en HTML, CSS y JavaScript que destaca por lo bien que está elegido el diseño a nivel general. Nos olvidamos de animaciones en este trozo de código para tu web.

React Checkout

Un checkout hecho con React.js que se distingue por la imagen lateral que podemos personalizar con los servicios o productos que vendamos en nuestro eCommerce.

Checkout tarjeta de pago

Este checkout destaca por la posibilidad de llevar una imagen a la tarjeta. Un formulario simple y claro hecho con CSS3, HTML5 y un poco de jQuery. De gran calidad y distinto al resto de checkouts de esta lista.

Pago tarjeta crédito

Programado para practicar con JavaScript para manipulación DOM. Puede recordar en el diseño al elegante código de Stripe, el servicio de bancaria digital que se va acercando a PayPal.

Tarjeta credito

Un elegante checkout distinto a los demás y que se basa por una tarjeta de crédito situada en la parte superior para que debajo tengamos todo el formulario con los distintos datos que ha de rellenar el cliente para realizar el pago en el eCommerce.

Formulario paso a paso

Registro paso a paso para un formulario hecho en HTML, CSS y JavaScript. Cuatro pasos para cada uno de los puntos situados en el lateral izquierdo. Unas animaciones bien acabadas para un formulario de gran acabado. Muy recomendable.

Formulario interactivo

Un formulario interactivo multi-paso hecho con HTML, CSS y JavaScript. Destaca por la animación de transición entre cada uno de los pasos. Tiene un toque elegante que no pasará desapercibido.

Formulario paso a paso

Este formulario destaca por ser bastante creativo. Responderás a las preguntas para que puedas volver a ellas en todo momento al estar todo el tiempo presentes visualmente en pantalla.

Paso a paso

Formulario paso a paso hecho en HTML, CSS y JavaScript. Se caracteriza por la animación de transición entre cada uno de los pasos.

Multi paso formulario Jquery

Si tienes un formulario bien extenso, este es perfecto por distintas secciones con una barra de progreso bien llamativa. Basado en jQuery y CSS, destaca por su diseño y por su gran elegancia.

Formulario animación UI

Las transiciones de este formulario están basadas en Domink Marskusic. Atención al creativo efecto del recuadro en azul cuando pulsamos sobre algunos de los dos campos del login o inicio de sesión.

Formulario de creación/login cuenta

Un efectista login y de creación de cuenta que se basa en la animación que pasa entre esas dos secciones. Muy actual y de llamativa presencia para estar hecho en HTML, JavaScript y CSS.

Snake Highlight

Uno de los login más llamativos de toda lista que destaca por la elegante animación que surge rápidamente en el momento que pulsamos sobre alguno de los dos campos.

Pantalla de login

Divino este login por lo que son sus animaciones y lo creativo que es. Si quieres ser de lo más actual por lo que respecta al diseño web, este formulario no puede faltar. Indispensable.

Diseño login UI

Diseñado usando HTML, Sass y jQuery. Elegante y claro en el tema al que no le faltan sutiles animaciones para convertirse en otro de los favoritos de la lista.

Login y creación cuenta UI

Un especial login por los colores y por presentar en una gran tarjeta las dos secciones. Otro de los más bellos en la ejecución al que no podemos faltar. Hecho en HTML, CSS y JavaScript.

Obnoxious errors

Un gran login por la animación de los campos con obnoxious.css. Original para ser un login divertido, desenfadado y bien distinto. Original sin ninguna duda para nuestro sitio web.

Login CSS HTML

Un login curioso por los distintos iconos que muestran cada uno de los campos para así llevar al visitante por donde queramos. También destacan los tonos elegidos en los colores. No cuenta con ninguna animación. Está hecho en HTML y CSS para implementarlo en el sitio web para un cliente o nuestro propio.

Formulario de login Modal

Un login inspirado en el lenguaje de diseño conocido por Material Design. Lo hemos visto en multitud de aplicaciones en dispositivos móviles. En este código contamos con panel de login y otro de registro que está escondido por defecto. El panel de registro puede ser activado al pulsar sobre la columna en azul situada en la parte derecha. Cuenta con una gran animación para ser un login bien especial y llamativo.

Form flexbox

Comenzamos los formularios de búsqueda con este basado en flexbox. Destaca por el color rojo del “search” y por poco más para un elegante campo de búsqueda para tu sitio web.

Caja animada

Se pulsa sobre el icono de lupa y aparecerá una brillante animación en azul para que solamente tengamos que teclear la búsqueda que vamos a realizar en el sitio web. Hecho con HTML, CSS y JavaScript.

Campo de búsqueda

Una gran línea recorre toda la pantalla para que cuando la pulsemos comencemos a teclear la búsqueda. Un botón tipo pastilla para definir este formulario simple de búsqueda.

Campo de búsqueda simple clic on

Basado en una interacción vista en la app Waze de comunidad de conductores de vehículos. Todos los iconos e imágenes están realizados con CSS. Destaca por esos iconos que nos permiten realizar búsquedas en concreto de un producto o servicio. Llamativo por lo genial que es.

Efecto de entrada de texto CSS

Una serie de animaciones en el texto y el cajón de búsqueda para ser un cuidado buscador en formulario.

Búsqueda a pantalla completa

Esta entrada de búsqueda funciona con cualquier tipo de layout o posición. Requiere estilos específicos de containers y elemento .search-overlay para ser ubicado en la raíz. Se caracteriza por una animación de rebote en el momento que pulsamos el botón de búsqueda.

Búsqueda

Una búsqueda simple que le gusta jugar con las distintas posiciones y las animaciones. Pulsamos sobre el botón de búsqueda y surge el cajón completo para teclear las palabras. Muy actual y muy recomendable por lo simple que es.

No questions

Un formulario simple con campo de texto y la opción de seleccionar unas respuestas para que el usuario las seleccione. De gran trato en lo visual para ser uno de los mejores.

Formulario suscripción popup

Hacemos clic en el botón flotante y nos llevará al formulario con un tono bien divertido y un campo donde introducir el correo electrónico. Perfecto para email marketing.

Caja de suscripción UI

Una caja de suscripción con una campana de alarma y poco más que unos colores planos en el diseño.

Caja suscripción CSS

Una caja elegante de suscripción por el hecho de usar degradados para el botón de suscripción al igual que el tono morado del campo.

Caja suscripción

Una caja de suscripción simple pero de gran efecto por el diseño.

Formulario de validación EMOJI

En puro CSS este formulario de validación para crear la clave o contraseña. Según vayamos escribiendo, el emoji medirá el nivel de seguridad del formulario. Divertido y curioso sin ninguna duda.

No os perdáis esta lista de 23 flechas animadas en CSS.

Comparte para difundir

Si te ha gustado nuestro contenido ahora puedes ayudar a difundirlo en las redes sociales de manera sencilla usando los siguientes botones:

Envía
Pinea
Print

Categorías

CSS, HTML

Ilustrador con estudios formados en ESDIP con la diplomatura de tres años de General de Dibujos, Animados y Animación. Apasionado de la ilustración con un propio estilo. Podéis seguirme desde Behance: www.behance.net/Ramirez_M

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.