40 formularios CSS que non poden faltar en ningunha páxina web

Formulario de inicio de sesión

Se hai algo que normalmente é moi común para calquera tipo de sitio web, estes son os formularios. Os formularios que empregamos para cubrir a información de contacto, introduza os datos bancarios, inicie sesión nunha rede social ou simplemente realice unha busca como a que adoitamos facer a diario no buscador de Google.

Así que hoxe ímolo amosar 40 formularios en CSS que van dende formularios de contacto, comprobación de tarxetas de crédito, inicio de sesión, sinxelo, sinatura ou incluso validación. Unha serie de formas de gran elegancia e estilo para darlle ese punto especial ao teu sitio web, independentemente do tema.

Formulario de contacto minimalista

forma-minimalista

Un sinxelo formulario de contacto cun gran variedade de efectos como marcas flotantes ou animacións de liña. Código CSS elegante cun pouco de JavaScript. Se buscas un formulario de contacto minimalista isto é perfecto para ti.

Artigo relacionado:
23 bibliotecas CSS de alta calidade para deseño web

Forma minimalista

Minimalista

Outro forma mínima, aínda que só en CSS será un forma sinxela e de alto efecto. Non ten as animacións minimalistas da anterior, pero cumpre moi ben o seu obxectivo.

Formulario de contacto vintage

Vintage

Formulario de contacto vintage, un deseño moi elegante. Responde a eses sitios web para ser visto desde o móbil, aínda que non inclúe validación.

Formulario de contacto por carta

Carta

esta formulario de contacto ten unha animación bastante curiosa: fórmase unha letra. Sinxelo, pero moi útil con moita cor.

Artigo relacionado:
27 tarxetas HTML e CSS gratuítas para blogs, comercio electrónico e moito máis

Formulario de contacto ampliado

Formulario de contacto amplo

esta formulario de contacto ampliado É só un front end e ten o validación con jQuery. Facemos clic no botón flotante e o formulario aparecerá cunha animación vibrante. Sobresaínte.

IU do formulario de contacto

Formulario de contacto

IU do formulario de contacto é un formulario feito en HTML e CSS. Destaca por ser unha simple tarxeta de contacto que podemos encher de xeito que só cambie o campo de texto cando se fai clic.

Pagamento con tarxeta de pagamento

Tarxeta de pagamento Checkout

Un caixa de tarxeta de pagamento feitos en HTML, CSS e JavaScript que distínguese pola animación rotativa a tarxeta de crédito cando prememos no campo CVC ou número de seguridade.

Deseño plano de tarxeta de crédito

Tarxeta de crédito CSS pura

CSS puro para a caixa para tarxetas de crédito en cores planas. Colorido e moi sinxelo capaz de denotar calidade e profesionalidade.

UI da tarxeta de crédito

Snackables

Outra tarxeta de crédito en HTML, CSS e JavaScript que destaca polo bo que é escolleu o deseño xeral. Esquecémonos das animacións deste anaco de código para o teu sitio web. Descárgao nesta ligazón.

Reaccionar caixa

Reaccionar

Reaccionar caixa, feito con React.js, distínguese por a imaxe lateral que podemos personalizar cos servizos ou produtos que vendemos no noso comercio electrónico.

Tarxeta de pagamento Checkout

Popov

Esta caixa destaca pola posibilidade de poñer unha imaxe na tarxeta. A formulario sinxelo e claro feito con CSS3, HTML5 e un pouco de jQuery. De alta calidade e diferente ao resto das caixas desta lista. Podes descargar aquí esta tarxeta de pago.

Pagamento con tarxeta de crédito

raia

esta formulario de pagamento con tarxeta de crédito está programado para practicar JavaScript para manipulación de DOM. Podes lembrar no deseño o elegante código de Stripe, o servizo de banca dixital que está cada vez máis preto de PayPal.

Tarxeta de crédito

diario

Un elegante caixa para o pago con tarxeta diferente dos demais e baseado en unha tarxeta de crédito situada na parte superior de xeito que a continuación temos todo o formulario cos diferentes datos que o cliente ten que cubrir para realizar o pago no comercio electrónico.

Formulario paso a paso

Paso a paso

Un forma paso a paso para o rexistro feito en HTML, CSS e JavaScript. Catro pasos para cada un dos puntos situado no lado esquerdo. Animacións ben acabadas para unha forma moi acabada. Moi recomendable.

Forma interactiva

Interactivo

Un forma interactiva paso múltiple feito con HTML, CSS e JavaScript. Destaca pola animación de transición entre cada un dos pasos. Ten un toque elegante que non pasará desapercibido.

Formulario paso a paso

Paso a paso

esta forma paso a paso destaca por ser bastante creativo. Responderás ás preguntas para que poida volver a eles en calquera momento estando presente visualmente na pantalla todo o tempo.

Paso a paso

Paso

Feito paso a paso en HTML, CSS e JavaScript. Caracterízase pola animación de transición entre cada un dos pasos.

Formulario de consulta de varios pasos

JQuery multi paso

Se tes un forma moi longa, é perfecto para diferentes seccións cunha barra de progreso moi sorprendente. Baseado en jQuery e CSS, destaca polo seu deseño e gran elegancia.

Formulario de animación da interface de usuario

Formulario de animación

As transicións deste Formulario de animación da interface de usuario son eles baseado en Domink Marskusic. Atención ao efecto creativo da caixa en azul cando facemos clic nalgúns dos dous campos do inicio de sesión ou inicio de sesión.

Formulario de creación / inicio de sesión de conta

Creación de inicio de sesión

Un truco inicio de sesión e creación de contas que se basea na animación que pasa entre esas dúas seccións. Presenza moi actual e rechamante para facer en HTML, JavaScript e CSS.

Destacar a serpe

Serpe

Destacar a serpe é un dos datos de inicio de sesión máis rechamantes de calquera lista que destaca pola elegante animación que aparece rapidamente no momento en que prememos nun dos dous campos.

Pantalla de inicio de sesión

Iniciar sesión

Divina este deseño pantalla de inicio de sesión tamén o son animacións e o creativo que é. Se queres ser o máis actualizado en materia de deseño web, este formulario non pode faltar. Imprescindible.

Deseño de IU de inicio de sesión

Formulario de inicio de sesión

Deseñado usando HTML, Sass e jQuery. Deseño de IU de inicio de sesión es elegante e claro sobre o tema que non lle falta animacións sutís para converterse noutro dos favoritos da lista.

Inicio de sesión e creación de contas de IU

Rexistro de inicio de sesión

Un especial IU de deseño de inicio de sesión e creación de contas  para as cores e para presentarse en unha tarxeta grande as dúas seccións. Outro dos máis fermosos da execución que non podemos perder. Feito en HTML, CSS e JavaScript.

Erros desagradables

Desagradable

Erros desagradables É un gran inicio de sesión debido á animación de campos con odioso.css. Orixinal para ser un inicio de sesión divertido, despreocupado e moi diferente. Orixinal sen dúbida para a nosa páxina web.

Inicio de sesión CSS HTML

CSS

Un curioso inicio de sesión polas distintas iconas que mostran cada un dos campos para levar ao visitante onde queiramos. Tamén destacan os tons escollidos nas cores. Non ten ningunha animación. Está feito en HTML e CSS para implementalo no sitio web para un cliente ou o noso.

Formulario de inicio de sesión modal

Modal

esta Formulario de inicio de sesión modal está inspirado na linguaxe de deseño coñecido por Material Design. Vímolo en moitas aplicacións en dispositivos móbiles. Neste código temos un panel de inicio de sesión e un panel de rexistro que están ocultos por defecto. O panel de rexistro pódese activar premendo na columna azul situada á dereita. Ten unha gran animación para ser un inicio de sesión moi especial e rechamante.

Formulario flexbox

Flexbox

Comezamos os formularios de busca con isto Formulario baseado en flexbox. Destaca pola cor vermella da «busca» e por pouco máis por un campo de busca elegante para o seu sitio web.

Caixa animada

Caixa animada

Con isto caixa animada fai clic na icona da lupa e aparecerá unha animación azul brillante de xeito que só temos que escribir a busca que imos realizar no sitio web. Feito con HTML, CSS e JavaScript.

Campo de busca

Push search

un unha gran liña percorre a pantalla de xeito que cando o prememos comezamos a escribir a busca. Un botón de recollida para definilo formulario de busca sinxelo.

Prema no campo de busca simple

Waze

Prema no campo de busca simple baséase nunha interacción vista en a aplicación da comunidade Waze Driver vehicular. Todas as iconas e imaxes están feitas con CSS. Destaca por aquelas iconas que nos permiten realizar buscas específicas dun produto ou servizo. Chama a atención polo fresco que fai.

Efecto de entrada de texto CSS

Entrada CSS

Efecto de entrada de texto CSS inclúe unha serie de animacións en caixón de texto e busca ser un buscador coidado na forma.

Busca en pantalla completa

Busca en pantalla completa

Esta entrada de busca en pantalla completa funciona con calquera tipo de deseño ou posición. Require estilos elemento específico para contedor e superposición de busca para estar situado na raíz. Caracterízase por unha animación rebotante no momento en que prememos o botón de busca.

Procurar

Procurar

Un formulario de busca simple iso gústalle xogar coas diferentes posicións e animacións. Facemos clic no botón de busca e aparece o caixón completo para escribir as palabras. Moi actual e moi recomendable polo sinxelo que é.

Sen preguntas

Sen preguntas

Sen dúbida es formulario sinxelo con campo de texto e a opción de seleccionar algunhas respostas para que as seleccione o usuario. Moito negocio visualmente para ser un dos mellores.

Formulario de subscrición emerxente

Apúntate

Con isto formulario de subscrición emerxente, facemos clic no botón flotante e levaranos a forma cun ton moi divertido e un campo onde introducir o correo electrónico. Perfecto para o marketing por correo electrónico.

UI da caixa de subscrición

Subscrición

un caixa de subscrición cunha campá de alarma e pouco máis que cores planas No deseño.

Caixa de subscrición CSS

Subscrición

un caixa de subscrición intelixente polo feito de usar gradientes para o botón de subscrición como o ton púrpura do campo.

Caixa de subscrición

Caixa de subscrición

un caixa de sinatura simple pero de gran efecto polo deseño.

Formulario de validación EMOJI

EMOJI

En puro CSS isto formulario de validación para crear a clave ou contrasinal. Mentres escribimos, os emoji medirán o nivel de seguridade do formulario. Divertido e curioso sen dúbida.

Non volo perdades lista de 23 frechas animadas en CSS.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

Un comentario, deixa o teu

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   Juan José Pérez dixo

    Excelente mostra de exemplos aquí presentados. A variedade e adaptación a diferentes contextos e o mellor é que a ligazón de cada título inclúe a demostración e o código fonte, aínda que debes resaltalo cun botón «Ver demo» porque foi por curiosidade que o descubrín no título. . Grazas pola contribución. Saúdos dende Caracas.