20 Trucos para crear formularios Ajax/CSS

Los formularios son uno de esos elementos en el mundo de los sitios web que se hacen imprescindibles tarde o temprano. Ya sea un formulario de registro en una web como uno de contacto o para subscribirte por e-mail a una lista de correo.

Por ese motivo, hemos recopilado un buen número de formularios que te llamarán poderosamente la atención, sobre todo desde el punto de vista visual. Gracias a las nuevas técnicas basadas en CSS y Ajax puedes conseguir formularios realmente impresionantes que tienen poco que ver con los clásicos. Por su parte, Ajax nos permite realizar algunos trucos, como validar los campos o procesar los datos antes de ser enviados. Veamos algunos de ellos:

Validación de datos en formularios

Validación automática

formularios-css-ajax-validacion-enlinea
Este pequeño JavaScript te permite validar los campos de un formulario antes de que se envíen. Link

fValidator

formularios-css-ajax-fvalidator
Otra herramienta JavaScript para validar campos y datos en un formulario. Link

Validación de formularios con Ajax

formularios-css-ajax-validacion
En este tutorial aprendes a utilizar Ajax para validar y procesar los datos en los campos de tus formularios. Link

Validación con jQuery

formularios-css-ajax-validacion-jquery
Link

Creadores de formularios CSS/Ajax

Desde estas páginas web puedes crear tus propios formularios de forma rápida y sencilla.

JotForm

Un generador de formularios interesante porque está basado en una interface WYSIWG. Link

Form Factory

formularios-css-ajax-form-factory
Un generador de formularios online open source. Link

WuFoo

formularios-css-ajax-wufoo
Link

Phpform

formularios-css-ajax-phpform
Aquí encuentras un generador de formularios con diferentes opciones de color. Link

Trucos varios para formularios con Ajax/CSS

Medidor de contraseña para formularios

formularios-css-ajax-validacion-medidor-contrasennas
Aquí puedes ver cómo medir la fortaleza de las contraseñas que se introduzcan en tus formularios según los parámetros que indiques. Link

Cómo crear formularios con CSS

formularios-css-ajax-crear
Un tutorial sobre cómo crear un formulario basado en CSS. Link

Estilos CSS para campos de subida de archivos

formularios-css-ajax-subida-archivos
Los campos de formulario diseñados para subir archivos también pueden tener interesantes estilos visuales gracias a CSS, mira aquí cómo hacerlo. Link

Formularios de contacto con CSS

formularios-css-ajax-contacto
Ajax utilizado para crear formularios de contacto vistosos y elegantes. Link

Plantilla para formulario basada en CSS

formularios-css-ajax-plantilla
Una plantilla que puedes personalizar con un formulario CSS. Link

Uni-Form

formularios-css-ajax-uniform
Estilos y formatos para un formulario basado en CSS. Link

TextArea

formularios-css-ajax-textarea
Una casilla de textarea avanzada con posibilidad de darle formato al texto, negrillas, listas, inserción de imágenes, etc. Link

Formatos para casillas en formularios

formularios-css-ajax-3
Este plugin te permite especificar formatos concretos para diferentes casillas en formularios, por ejemplo, en el caso de que quieras añadir números con decimales o con punto para miles, alineaciones, solo textos o solo números, etc. Link

Auto-rellenado de campos

formularios-css-ajax-seleccion-encadenada
Con este truco puedes conseguir rellenar un campo automáticamente (por ejemplo un select) en función de lo que se haya rellenado en otro campo, encadenando los contenidos. Ideal por ejemplo para rellenar ciudades concretas cuando se selecciona un país o modelos de vehículos cuando se selecciona una marca.

28 Tablas CSS Ajax con efectos increíbles

25 Ejemplos prácticos jQuery, plugins y tutoriales