¿Quiere aumentar la funcionalidad de su formulario predeterminado? Casi todas las funciones bajo el sol tienen un complemento que puede usar para simplificar el proceso.

Pero si no está seguro de por dónde empezar, le recomiendo estos complementos gratuitos de jQuery de toda la web.

Cada complemento es muy fácil de instalar y todos admiten diferentes funciones de formulario, como casillas de verificación personalizadas, etiquetas de formulario flotantes, autocompletar y muchas otras herramientas ingeniosas.

1. Formularios personalizados de JavaScript

Me encontré por primera vez con esta biblioteca hace un año y sigue siendo una de mis favoritas. JavaScript Custom Forms, o JCF para abreviar, es una biblioteca jQuery masiva de elementos de formulario personalizados y características dinámicas.

Fue construido para brindar una sensación consistente en todos los navegadores con el beneficio adicional de ejecutarse en la biblioteca JS más popular del mundo.

Esta biblioteca es muy fácil de usar e instalar. Además, está diseñado pensando en la usabilidad, incluido el soporte para idiomas RTL y atajos de teclado para accesibilidad.

Los elementos personalizados incluyen menús selectos, controles deslizantes, casillas de verificación e incluso campos de carga de archivos personalizados. Esos son muy difíciles de personalizar, pero JCF los hace lucir increíbles.

Si necesita una biblioteca completa de estilos de formularios personalizados, JCF debería ser su primera parada. Sin duda, es un recurso más pesado que la mayoría, pero también es confiable y está muy bien diseñado.

2. iCheck

Otro complemento que realmente me gusta es el complemento iCheck jQuery para radios y casillas de verificación. Este complemento gratuito fue lanzado hace años y cuando lo vi por primera vez supe que era un cambio de juego.

Puede buscar en Google y encontrar toneladas de estilos de entrada de radio / casillas de verificación personalizados. Pero iCheck es probablemente el mejor en el programa con la mayor cantidad de estilos, funciones adicionales y el mayor soporte.

Funciona igual en todos los navegadores, incluidos los dispositivos iOS / Android. Además, admite lectores de pantalla y atributos ARIA para la accesibilidad.

Sin mencionar que tienes la opción de 6 temas diferentes y la opción de cambiar el estilo de su propio tema desde cero. ¡Muy genial! Especialmente para un complemento creado únicamente para cambiar dos campos de entrada muy simples.

3. Elegido

Los menús desplegables seleccionados son muy comunes y tienen un propósito real. Si necesita ofrecer un conjunto de opciones en las que el usuario solo debe elegir una, es más fácil usar un menú de selección.

Pero con Harvest’s Chosen, puede agregar rápidamente estas características a su diseño sin problemas. Este complemento admite un filtro de búsqueda personalizado donde el usuario puede escribir letras y filtrar automáticamente los resultados.

Esto es muy útil para formularios selectos largos como los recolectores de países. Con más de 100 países en el mundo, es bastante bueno tener un menú de selección de búsqueda.

Y el complemento Chosen tiene opciones de selección múltiple junto con una pantalla de «sin resultados» para la búsqueda. Es muy posible que sea el complemento de menú de selección más detallado que existe.

4. Selectize.js

El complemento Selectize.js también funciona en menús selectos, pero combina la idea de un cuadro de texto con una selección desplegable.

De esta manera, los usuarios pueden elegir muchos elementos diferentes y enviar su formulario con muchas opciones seleccionadas. Pero la UX de entrada funciona como una selección, por lo que debería resultar familiar para todos.

Todo el código está disponible de forma gratuita para que pueda editar y cambiar la piel del tema a su gusto.

También es bastante sencillo pasar datos al servidor, ya que todo pasa por un campo de entrada.

Piense en esto como un campo de correo electrónico «para» donde puede seleccionar varios contactos de una lista. Es la manera perfecta de expandir sus menús seleccionados y convertirlos en campos de datos de varios valores.

5. Selección múltiple

Otro complemento de valores múltiples que debe consultar es el llamado Multiple Select. Nuevamente, esto se ejecuta en jQuery y se publica de forma gratuita en GitHub.

Pero en lugar de agregar etiquetas dentro del campo para los elementos elegidos, este complemento permite al usuario seleccionar elementos con casillas de verificación. Entonces, el comportamiento imita un menú desplegable de selección, pero puede hacer clic en más de uno a la vez.

Eche un vistazo a los documentos en línea para ver ejemplos en vivo y obtener ayuda para comenzar.

Este es quizás uno de los complementos más técnicos que puede usar y tiene muchas características. Impresionante para cualquiera que necesite este tipo de campo, pero puede ser un poco detallado para formularios más pequeños.

6. FloatLabel.js

¿Conoce esos campos de entrada geniales donde el texto del marcador de posición se mueve por encima del formulario una vez que comienza a escribir? Eso es básicamente lo que hace FloatLabel.js.

Una vez que el cursor ingresa a un campo, este complemento oculta el marcador de posición mientras anima una nueva etiqueta flotante a la vista. Eche un vistazo a la página de demostración oficial para ver cómo se ve.

No va a cambiar radicalmente el comportamiento de su formulario ni es probable que esto mejore sus tasas de conversión. Pero mejorará la experiencia del usuario al mantener cada formulario compacto pero fácil de leer.

7. Interruptor LC

Otra tendencia de forma popular que ha crecido en los últimos años es el interruptor de encendido / apagado. Comenzó con la página de configuración de iOS original y desde entonces se ha abierto camino en todos los dispositivos móviles e incluso en la web.

Con un complemento como LC Switch, puede agregar sus propios interruptores de encendido / apagado a cualquier formulario. Estos funcionan en entradas de radio o de casillas de verificación, por lo que aún puede enviar datos al backend con facilidad. Solo necesita configurar su formulario de la manera correcta para que maneje los clics de los usuarios.

Con las casillas de verificación, puede permitir que los visitantes elijan muchas configuraciones a la vez. O con radios puede limitar las opciones a una sola selección.

Ambas opciones son válidas y es lo que hace que este complemento sea tan bueno. Todo lo que necesita es una copia de los archivos del complemento y una función simple de jQuery.

8. Pickadate.js

He perdido la cuenta de cuántos complementos de selector de fechas hay. Podría pasar semanas investigando las opciones solo para configurar el selector de calendario.

Mi recomendación es para Pickadate.js. Es simple, liviano y totalmente sensible, por lo que también funciona en todos los dispositivos móviles.

Lo mejor de todo esto funciona como una cita. y selector de tiempo para que pueda elegir solo una de esas características o incluir ambas en el mismo campo de entrada. Pickadate viene con su propia hoja de estilo, así que simplemente agregue este complemento a su página y deje que se ejecute.

Se actualiza con frecuencia con correcciones de errores y puedes encontrar toneladas de códigos de ejemplo en GitHub.

9. Formvalidation

Otra característica saturada con docenas de complementos es la validación de formularios. Aquí es donde JavaScript verifica cada campo a medida que el usuario escribe y les permite saber si el contenido es válido o no.

Esto es muy útil para los campos de contraseña con requisitos para ciertos caracteres / límites, y con campos de correo electrónico para asegurarse de que la dirección de correo electrónico parezca real.

El complemento Formvalidation de jQuery es mi elección preferida, ya que es liviano y muy fácil de personalizar. Funciona en todos los marcos principales, incluidos Foundation y Bootstrap.

Además, los documentos en línea son bastante sencillos, por lo que incluso los no programadores deberían poder resolverlos.

Pero siéntase libre de buscar en Google y ver qué más puede encontrar. Este no es el único complemento de validación de formularios y no siempre es la mejor opción para todos los sitios web.

10. Formas ideales jQ

¿Busca un marco completo para diseñar formularios web personalizados? Entonces jQ Ideal Forms podría funcionar para usted.

Esto se parece mucho a la biblioteca JCF que mencioné anteriormente. Sin embargo, jQ Ideal Forms no es realmente una biblioteca de estética, sino más una biblioteca de funcionalidad y validación. Cambia el estilo de las entradas del formulario, pero el beneficio real es la validación personalizada.

Puede usar el complemento Ideal Forms para verificar direcciones de correo electrónico, fechas, contraseñas y entradas de campo duplicadas para asegurarse de que coincidan.

Admite atajos de teclado personalizados e incluso usa el selector de calendario de jQuery UI para entradas basadas en fecha (¡bueno también para dispositivos móviles!)

Una excelente opción para cualquiera que desee una sólida validación de formularios con estilos personalizados empaquetados en un solo complemento.

11. Tamaño automático

Admito que este es un complemento bastante simple, pero a menudo son las pequeñas cosas las que marcan la mayor diferencia en la experiencia del usuario.

Autosize funciona como un complemento JS de vainilla, pero también puede funcionar bien en jQuery. Simplemente apunte a los elementos del área de texto que desee y deje que se ejecute.

De forma predeterminada, sus áreas de texto mantendrán su altura normal, que puede configurar en CSS. Pero con este complemento, el área de texto debería cambiar de tamaño automáticamente cada vez que el usuario escribe suficientes caracteres para presionar una barra de desplazamiento.

Es una característica ingeniosa para mejorar la legibilidad y mantener sus áreas de texto visibles en todo momento.

12. Rangeslider.js

No todo el mundo necesita controles deslizantes de rango y definitivamente no son un recurso típico en formularios web. Pero la especificación HTML5 es totalmente compatible con estos controles deslizantes numéricos y con Rangeslider.js puede construir sobre esta funcionalidad.

Este increíble complemento es un polyfill de jQuery gratuito para el elemento HTML5 predeterminado. Esto significa que puede agregar el control deslizante de rango en navegadores más antiguos que normalmente no admitirían la función, además de que puede darle un aspecto nuevo y elegante.

El complemento es compatible con la pantalla táctil y pasa los datos correctamente al backend. También es compatible con navegadores heredados que se remontan a IE 8+, por lo que es una opción segura para ejecutar estas entradas de rango en todas partes.

13. Validador de tarjetas de crédito jQuery

El último en mi lista es el increíble validador de tarjetas de crédito jQuery. Este complemento fue un verdadero trabajo de amor y es, con mucho, mi complemento de automatización de tarjetas de crédito favorito.

No valida el número según la CCV / fecha de vencimiento porque no ejecuta un envío completo de la tarjeta de crédito. En cambio, esto verifica los números de las tarjetas con los patrones típicos utilizados por ciertas compañías como Visa y MasterCard, luego automatiza el proceso de detección utilizando estos patrones.

Esto funciona a través de un algoritmo especial que fue adoptado y rediseñado para ejecutarse en JavaScript. Entonces, si tiene un sitio de comercio electrónico y necesita la validación CC de frontend, esta debería ser su elección número 1.

Terminando

Con todos estos complementos a su disposición, debería tener más que suficiente para expandir sus formularios web. Puede agregar radios personalizadas, casillas de verificación, seleccionar campos, cargar formularios, expandir áreas de texto con etiquetas flotantes y mucho más.

Pero recuerde que los complementos pueden inflar su diseño y la velocidad del sitio web también es importante. Encuentre una manera de lograr un equilibrio entre las funciones de formulario expandido y los tiempos de carga rápidos para la mejor experiencia de usuario.