Aunque es posible crear y modificar tus propios elementos en un formulario mediante el uso de HTML y CSS, tal vez estés buscando una solución rápida. En este caso, las librerías JavaScript pueden ser la respuesta que estás buscando. La mayoría de estas librerías son gratuitas e incluso de código abierto. Además, poseen ejemplos y una guía sobre su instalación y modo de uso. De manera que tienes todo lo necesaria para aprender a utilizarlas sin mayor dificultad.
Si estás buscando un estilo diferente o simplemente deseas ahorrar tiempo en el desarrollo de tu formulario, te mencionamos algunas librerías recomendadas JavaScript para tus formularios web.
iCheck
iCheck es una librería completamente gratuita, de código abierto y posee una amplia documentación. Tiene una gran variedad de diferentes estilos que puedes utilizar según el diseño de tu sitio web. También posee temas en donde puedes modificar los colores mediante propiedades JavaScript. En generar, posee 32 opciones para personalizar los botones y las casillas de verificación que se incluyen en esta librería.
iCheck es compatible con las versiones modernas de navegadores como Microsoft Edge, Firefox, Safari y Chrome. También funciona en dispositivos móviles y sistema operativos como Android, iOS, Windows Phone y Amazon Kindle.
Si estás buscando un librería flexible, con una gran cantidad de opciones y estilos, entonces iCheck es para ti.
Switchery
Switchery imita el estilo de los interruptores que se pueden apreciar en la interfaz de iOS. En la actualidad, este elemento se utiliza también en formularios para seleccionar opciones, reemplazando a las casillas de verificación.
Esta librería de JavaScript modifica el estilo de todas las casillas de verificación de tu sitio y mantiene la información así como el comportamiento de la interfaz. Es decir, una vez que lo aplicas no debes preocuparte de incluir nuevamente todos los textos e información para tus formularios.
De manera predeterminada, Switchery utiliza el color verde propio de iOS7, pero puedes cambiar fácilmente los colores al indicar el código HEX tanto para el fondo como para el círculo que forma el interruptor.
Labelauty
Labelauty tiene un estilo bastante particular. Tanto sus casillas de verificación como sus botones poseen formas cuadrangulares y rectangulares respectivamente. De esta forma, los botones se asemejan más a un botón CTA más que a uno de estilo radio. Sin embargo, tienen un buen diseño y podría ser ideal para tu sitio web.
Puedes añadir texto en los botones a modo de ofrecer opciones a tus usuarios. En el ejemplo que muestran en la página de descarga, puedes observar como luciría la final e incluso han añadido iconos para hacer el mensaje más claro. En tu sitio web podrías hacer lo mismo.
Los botones solo admiten una sola selección, es decir limitan a los usuarios a una sola respuesta, mientras que las casillas de verificación te permiten opciones múltiples. Puedes modificar los colores, el tamaño y muchas otras propiedades de estos botones y casillas.
Uniform
Uniform es una librería completa que te permite modificar el estilo de menús desplegables, botones de estilo radio, casillas de verificación y campos para carga de archivos. Posee un estilo minimalista y limpio, ideal para aquellos siios web que también tiene esta característica.
Uniform es tan sencillo de configurar que puedes tener tu formulario con un nuevo estilo con tan solo una líneas de código. Es compatible con un gran variedad de navegadores como Chrome, Safari, FireFox, Opera, etc.
Checkator
Checkator es una librería que posee un estilo bastante simple y puede ser ideal para sitios web sencillos. Puedes elegir tanto entre botones pequeños hasta grandes e incluso puedes modificar el estilo de los elementos mediante CSS.
Checkator es una librería que ha sido desarrollada con jQuery, por lo tanto, debes instalarlo en tu proyecto en conjunto con esta librería para que funcione correctamente.
Kalypto
Kalypto posee un estilo sencillo y limpio que podría ser ideal para tu sitio web. Con una sola línea de JavaScript puedes seleccionar todos las casillas en tu página y modificar su estilo como mejor te parezca.
Kalypto, al igual que los otros recursos mencionados, en un proyecto gratuito cuyo código se encuentra en GitHub. Además, es bastante ligero así que no debes preocuparte por el tiempo de carga de tu sitio.
Pretty Boxes
Pretty Boxes es una librería que imita el estilo de Bootstrap para botones y casillas en formularios. Es un proyecto de código abierto y es sencillo de emplear. Solo debes añadir el archivo CSS que contiene la descarga y añadir clases a tus elementos para poder modificarlos.
Aunque esta librería no ha sido actualizada en años, ya que es de código abierto puedes realizar modificaciones sobre el código existente y experimentar si así lo deseas. Funciona correctamente con Bootstrap 4 y versiones posteriores.
Ion.CheckRadio
Ion. CheckRadio es un plugin gratuito. Puedes modificar los botones y casillas según tus preferencias considerando el color, el estilo y otras propiedades. Posee 4 temas diferentes en donde se modifica ligeramente el aspecto de los botones, particularmente el color.
Ion.CheckRadio no es tan sencillo de configurar, así que es probable que necesitas revisar la documentación y los ejemplos que se encuentran en el sitio web.
JavaScript Custom Forms
JavaScript Custom Forms es una librería creada por los integrantes de PSD2HTML. Esta completa librería incluye casillas, menús desplegables, sliders para indicar rango, barras de scroll, campos para subir archivo, etc.
Cada elemento posee un gran diseño y puedes crear tus propias variaciones pues presenta opciones de personalización. El código JavaScript que contiene esta librería permite modificar el estilo de todos los elementos que hemos mencionado. También es compatible con navegación en base a las flechas direccionales del teclado.
Esta librería es sencilla de utilizar y en su página en GitHub puedes encontrar toda la documentación necesaria para configurar esta librería en tu sitio. Sin embargo, ya que posee una gran cantidad de componentes y opciones, no es la solución ideal si deseas botones sencillos. Su uso es más efectivo cuando se emplea para modificar todo el formulario de la página.
En conclusión…
La colaboración en la comunidad del desarrollo web es bastante impresionante. Estas librerías para JavaScript son solo una muestra de lo increíble que es la comunidad que desarrolla soluciones, experimente y luego publica sus resultados, animando a otros desarrolladores a realizar sus propias modificaciones en base al código original.
No hay duda que existen muchas otras librerías JavaScript que han sido dedicadas al estilo de los formularios. ¿Cuál es tu favorita y por qué? Esperamos ansiosamente tus comentarios al respecto.