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
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
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
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
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
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
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
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
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
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
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
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
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
[su_button url=”http://tympanus.net/Development/MultiElementSelection/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
Selecciones múltiples
[su_button url=”http://livepipe.net/control/selectmultiple” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
Checkbox personalizado
[su_button url=”http://codepen.io/wallaceerick/pen/Czqso” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
Pistas para campos de formularios
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
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
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
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
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
[su_button url=”http://codepen.io/idobrovolsky/pen/EiKLI” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
Personaliza varios tipos de campo
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
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
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
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
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
[su_button url=”http://codepen.io/silverdrop/pen/msrcE” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
Trucos CSS para formularios
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
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
[su_button url=”http://www.456bereastreet.com/archive/200409/styling_form_controls/” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
Formularios 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
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
[su_button url=”http://codepen.io/m412c0/pen/scqxL” style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
[su_button url=”http://cssdeck.com/labs/0chmqae2″ style=”bubbles” background=”#e1a948″]Ver formulario[/su_button]
Decorar formularios con CSS
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
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]
