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. Si buscas un formulario de contacto minimalista este es perfecto para ti.

Artículo relacionado:

23 librerías CSS de gran calidad para diseño web

Formulario minimalista

Otro formulario minimalista, 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

Formulario de contacto vintage, un diseño muy elegante. Responsive para esos sitios web para verse desde mobile, aunque no incluye la validación.

Formulario de contacto de carta

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

Artículo relacionado:

27 tarjetas gratuitas HTML y CSS para blogs, e-commerce y más

Formulario de contacto expandido

Este formulario de contacto expandido 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

Contact Form UI es un formulario 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 de tarjeta de pago 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 planos. 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. Descárgalo en este link.

React Checkout

React Checkout, hecho con React.js, 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. Puedes descargar aquí este checkout tarjeta de pago.

Pago tarjeta crédito

Este formulario para pago con tarjeta de crédito está 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 para pago con tarjeta 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

Un formulario paso a paso para registro 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 paso a paso 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 animación UI 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

Snake Highlight es 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 diseño de pantalla de 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. Diseño login UI es 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 diseño de login y creación de cuenta UI  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

Obnoxious errors es 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

Este formulario de login Modal está 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 formulario 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

Con esta 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

Campo de búsqueda simple clic on está 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

Efecto de entrada de texto CSS incluye 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 a pantalla completa 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

Un formulario de 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

No question es 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

Con este 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.