35 Trucos CSS y JavaScript para Formularios increíbles

En cualquier sitio web que se precie es bastante habitual que encuentres, como poco, un formulario, al menos el clásico de contacto si no algún otro. Por este motivo es interesante tener en cuenta de qué formas se pueden personalizar los clásicos campos para darles una mejora visual. Gracias al CSS y un poco de JavaScript se puede conseguir unos resultados impensables para la web de hace 10 o 15 años ¿quién se acuerda de las webs de entonces? Con estos trucos tus formularios parecerán profesionales.

Botón de envío animado

tablas-css-javascript-efecto-envio
Un curioso efecto que anima el botón de envío cuando se pulsa, entonces se convierte en un círculo que se va rellenando como si fuera una barra de progreso.
Ver formulario

Efecto botones formulario

tablas-css-javascript-efecto-envio-2
Más efectos animados para el botón de envío, algunos en 3D, bastante llamativo visualmente.
Ver formulario

Framework para formularios

tablas-css-javascript-framework
Un framework que te sirve como base para crear formularios CSS
Ver formulario

Personalizar checkboxes

tablas-css-javascript-checkboxes
Un script que te permite personalizar los checkboxes visualmente.
Ver formulario

Barra de progreso para formulario

tablas-css-javascript-barra-progreso
En ocasiones te gustaría dividir un formulario en varias partes con un botón de ‘Siguiente’ para que no parezca muy largo, aquí puedes ver cómo hacerlo incluyendo una barra de progreso para cada paso.
Ver formulario

Cómo crear un formulario vistoso con CSS

tablas-css-javascript-1
En este tutorial puedes aprender cómo crear un formulario con buen aspecto sin utilizar tablas, tan solo con CSS.
Ver formulario

Varios diseños

tablas-css-javascript-disennos
Una colección de varios diseños CSS para tablas
Ver formulario

Pistas para campos

tablas-css-javascript-pistas-campos
Una forma de añadir ayuda en forma de texto junto a cada campo del formulario
Ver formulario

Efecto jQuery animados para input

tablas-css-javascript-efecto-input-text
Con este plugin jQuery puedes animar los campos de texto y textareas del formulario de forma muy vistosa. [Demo] Ver formulario

Focus con jQuery

tablas-css-javascript-focus
Cómo modificar los campos de un formulario con jQuery según cambie el focus, los input cambian visualmente según se seleccione uno u otro.
Ver formulario

Animación para cajas de texto

tablas-css-javascript-textos-animados
Una interesante animación para las cajas de texto.
Ver formulario

Formulario simple

tablas-css-javascript-2
Un formulario simple atendiendo a varios detalles a tener en cuenta.
Ver formulario

Selector múltiple

tablas-css-javascript-seleccion-multiple
Ver formulario

Selecciones múltiples

tablas-css-javascript-selecciones-multiples
Ver formulario

Checkbox personalizado

tablas-css-javascript-checkbox-personalizado
Ver formulario

Pistas para campos de formularios

tablas-css-javascript-pistas
En este tutorial puedes aprender a crear unas ‘pistas’ o indicaciones que aparecen como un texto flotando junto a los campos a medida que se seleccionan
Ver formulario

Switches o interruptores para formularios

tablas-css-javascript-switches
Unos vistosos interruptores que funcionan como checkboxes para formularios.
Ver formulario

Autotabulador

tablas-css-javascript-autotabulador
Un auto-tabulador con jQuery, cuando se alcanza un límite de caracteres, el cursor pasa automáticamente al siguiente campo.
Ver formulario

Niceforms

tablas-css-javascript-niceforms
Niceforms es un script que puedes utilizar para aplicar a tus formularios, con la ventaja de que te permite crear ‘temas’ que se pueden activar a voluntad en cada web que diseñes.
Ver formulario

Formulario para login

tablas-css-javascript-login
Aquí puedes ver cómo crear un formulario para login (usuario, contraseña), en formato horizontal.
Ver formulario

Botones de radio animados

tablas-css-javascript-radio-animados
Ver formulario

Personaliza varios tipos de campo

tablas-css-javascript-varios
Aquí puedes ver cómo personalizar checkboxes, botones de radio y listas de selección
Ver formulario

Cómo personalizar campos select

tablas-css-javascript-select
Los campos ‘select’ también pueden personalizarse para conseguir un aspecto mejor que el clásico.
Ver formulario

Formulario tarjeta postal

tablas-css-javascript-tarjeta-postal
Este curioso tutorial te enseña a convertir un formulario normal y corriente en una tarjeta postal clásica, ideal para los que les guste lo retro. También puedes modificar la imagen de fondo y convertir el diseño en otra cosa.
Ver formulario

Medidor de fuerza de contraseña

tablas-css-javascript-password
Un clásico medidor de fuerza de contraseña que te indica si el password introducido es muy débil o no. Script JavaScript.
Ver formulario

Formulario de visualización

tablas-css-javascript-input
Este formulario está ideado para mostrar información
Ver formulario

Campos select personalizados y vistosos

tablas-css-javascript-22
Ver formulario

Trucos CSS para formularios

tablas-css-javascript-trucos
Un interesante tutorial donde explican algunos trucos CSS que pueden aplicarse a los formularios.
Ver formulario

Mejora los checkbox con jQuery

tablas-css-javascript-checkbox
Un plugin jQuery para personalizar los checkbox de un formulario
Ver formulario

Cómo personalizar los controles de un formulario con CSS

tablas-css-javascript-controles
Ver formulario

Formularios sin tablas

tablas-css-javascript-sin-tablas
Cómo crear formularios sin tablas, tan solo con CSS.
Ver formulario

Autocompletar formulario

tablas-css-javascript-sugerir
Con este tutorial aprendes a utilizar Ajax para autocompletar campos de un formulario con sugerencias.
Ver formulario

Un par de cajas de búsqueda CSS

Estas cajas de búsqueda mejorarán sensiblemente el aspecto en tus formularios
tablas-css-javascript-cajas-de-busqueda-2
Ver formulario

tablas-css-javascript-cajas-de-busqueda
Ver formulario

Decorar formularios con CSS

tablas-css-javascript-4
En este tutorial puedes aprender cómo decorar y modificar un formulario
Ver formulario

Validación de campos

tablas-css-javascript-validacion
Con LiveValidation puedes añadir código JavaScript para que tus formularios se validen automáticamente desde el navegador del usuario, en el lado del cliente. Lo interesante es que los campos se validan antes de ser enviados de forma rápida.
Ver formulario

1 comment… add one
  • Luis

    Muy buenos sus ejemplos, me ayudaron un montón 😀

Leave a Comment