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.
[su_button url=”http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://tympanus.net/codrops/2013/12/12/progress-button-styles/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Framework para formularios

tablas-css-javascript-framework
Un framework que te sirve como base para crear formularios CSS
[su_button url=”https://code.google.com/p/formy-css-framework/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Personalizar checkboxes

tablas-css-javascript-checkboxes
Un script que te permite personalizar los checkboxes visualmente.
[su_button url=”http://www.no-margin-for-errors.com/projects/prettyCheckboxes/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://aceinfowayindia.com/blog/2009/06/how-create-good-looking-form-without-table/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Varios diseños

tablas-css-javascript-disennos
Una colección de varios diseños CSS para tablas
[su_button url=”http://cssglobe.com/cssg-collections-web-forms/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Pistas para campos

tablas-css-javascript-pistas-campos
Una forma de añadir ayuda en forma de texto junto a cada campo del formulario
[su_button url=”http://askthecssguy.com/articles/validation-hints-for-your-form/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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]
[su_button url=”http://dropthebit.com/580/fancy-input-jquery-plugin/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Animación para cajas de texto

tablas-css-javascript-textos-animados
Una interesante animación para las cajas de texto.
[su_button url=”http://cssdeck.com/labs/swuz51il” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Formulario simple

tablas-css-javascript-2
Un formulario simple atendiendo a varios detalles a tener en cuenta.
[su_button url=”http://www.assemblesoft.com/examples/form/simpleform.html” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Selector múltiple

tablas-css-javascript-seleccion-multiple
[su_button url=”http://tympanus.net/Development/MultiElementSelection/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Selecciones múltiples

tablas-css-javascript-selecciones-multiples
[su_button url=”http://livepipe.net/control/selectmultiple” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Checkbox personalizado

tablas-css-javascript-checkbox-personalizado
[su_button url=”http://codepen.io/wallaceerick/pen/Czqso” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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
[su_button url=”http://askthecssguy.com/articles/form-field-hints-with-css-and-javascript/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Switches o interruptores para formularios

tablas-css-javascript-switches
Unos vistosos interruptores que funcionan como checkboxes para formularios.
[su_button url=”http://abpetkov.github.io/switchery/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://www.mathachew.com/sandbox/jquery-autotab/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://www.emblematiq.com/lab/niceforms/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Formulario para login

tablas-css-javascript-login
Aquí puedes ver cómo crear un formulario para login (usuario, contraseña), en formato horizontal.
[su_button url=”http://web-kreation.com/tutorials/nice-clean-sliding-login-panel-built-with-jquery/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Botones de radio animados

tablas-css-javascript-radio-animados
[su_button url=”http://codepen.io/idobrovolsky/pen/EiKLI” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Personaliza varios tipos de campo

tablas-css-javascript-varios
Aquí puedes ver cómo personalizar checkboxes, botones de radio y listas de selección
[su_button url=”http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://v2.easy-designs.net/articles/replaceSelect/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://www.jankoatwarpspeed.com/turn-postcard-photo-into-a-stunning-comment-form-using-css/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://testcases.pagebakers.com/PasswordMeter/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Formulario de visualización

tablas-css-javascript-input
Este formulario está ideado para mostrar información
[su_button url=”http://24ways.org/2006/showing-good-form/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Campos select personalizados y vistosos

tablas-css-javascript-22
[su_button url=”http://codepen.io/silverdrop/pen/msrcE” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Trucos CSS para formularios

tablas-css-javascript-trucos
Un interesante tutorial donde explican algunos trucos CSS que pueden aplicarse a los formularios.
[su_button url=”http://www.jankoatwarpspeed.com/enhance-your-input-fields-with-simple-css-tricks/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Mejora los checkbox con jQuery

tablas-css-javascript-checkbox
Un plugin jQuery para personalizar los checkbox de un formulario
[su_button url=”http://widowmaker.kiev.ua/checkbox/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Cómo personalizar los controles de un formulario con CSS

tablas-css-javascript-controles
[su_button url=”http://www.456bereastreet.com/archive/200409/styling_form_controls/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Formularios sin tablas

tablas-css-javascript-sin-tablas
Cómo crear formularios sin tablas, tan solo con CSS.
[su_button url=”http://nicholasbarger.com/2009/06/22/a-simple-tableless-form/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Autocompletar formulario

tablas-css-javascript-sugerir
Con este tutorial aprendes a utilizar Ajax para autocompletar campos de un formulario con sugerencias.
[su_button url=”http://www.brandspankingnew.net/archive/2006/08/ajax_auto-suggest_auto-complete.html” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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
[su_button url=”http://codepen.io/m412c0/pen/scqxL” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

tablas-css-javascript-cajas-de-busqueda
[su_button url=”http://cssdeck.com/labs/0chmqae2″ style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

Decorar formularios con CSS

tablas-css-javascript-4
En este tutorial puedes aprender cómo decorar y modificar un formulario
[su_button url=”http://www.webdesignermag.co.uk/tutorials/make-your-forms-beautiful-with-css/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

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.
[su_button url=”http://livevalidation.com/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]

1 comment… add one
  • Luis

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

Leave a Comment