Los formularios pueden ser uno de los aspectos más complejos de su trabajo de desarrollo de front-end. Son mucho más complicados que la mayoría de los elementos con los que trabajará desde una perspectiva HTML y CSS.
Si ha estado frustrado con los formularios en el pasado, no se preocupe, ¡hay esperanza! Hoy repasaremos algunas herramientas y marcos que lo ayudarán a hacer el trabajo sin los dolores de cabeza.
Dos maneras de pelar a este gato
Hoy veremos dos tipos diferentes de herramientas que potencialmente pueden ayudarlo a crear formas asombrosas: marcos y aplicaciones web.
Los marcos representan la ruta del bricolaje, le brindan un estilo y una funcionalidad preconstruidos, al mismo tiempo que permiten el tipo de reinado libre que solo la codificación manual puede ofrecer. El nivel de conocimiento y talento aquí es bastante alto, pero la recompensa es que no pagará un centavo y conservará la libertad total para hacer lo que quiera.
En contraste, las aplicaciones creadoras de formularios representan una solución automatizada. Estos son a menudo impulsados por sistemas de diseño WYSIWYG que evitan que tenga que escribir un solo carácter de código. Además, generalmente están agrupados con un servicio que acepta y cataloga los envíos de formularios, lo que es un gran beneficio. El inconveniente es que no siempre son gratis y que sus opciones de personalización son más limitadas que si estuviera codificando a mano.
Echemos un vistazo a algunas de las versiones más populares y efectivas de ambos tipos de herramientas de formulario.
Marcos
En primer lugar es la ruta del marco. Todos estos son nombres que reconocerá, pero ¿alguna vez ha echado un vistazo a sus características de formulario? Tienden a ser bastante extensos y útiles.
Oreja
Twitter Bootstrap se ha convertido en un conjunto de herramientas y punto de partida muy popular para los desarrolladores. Le brinda una base sólida para trabajar y puede reducir horas y horas en la parte frontal de su flujo de trabajo.
El estilo de forma en Bootstrap es increíblemente extenso. Puede poner sus etiquetas de formulario en la parte superior o lateral, sus campos pueden ser cuadrados o redondeados, agregar casillas de verificación y seleccionar menús; todo esto y más en una variedad de estilos diferentes para elegir.
Al igual que con todo en Bootstrap, sacar esto es tan fácil como describir un HTML básico con unas pocas clases cuidadosamente colocadas. La documentación es bastante completa, pero aquí hay un ejemplo para que sepa cómo funciona la creación de formularios con Bootstrap.
¡Bastante simple! Tenga en cuenta que todos estos elementos saldrán con un estilo anterior, lo que significa que ahora no tenemos que entrar y jugar con un montón de CSS. ¡Se ven geniales desde el primer momento!
Una vez más, hay suficientes características aquí que podrás construir cualquier tipo de formulario que desees con muy poco esfuerzo. Incluso hay una biblioteca de JavaScript completa y autocompletada incluida llamada "typeahead".
Ahora, supongamos que no desea utilizar Bootstrap para crear su sitio, pero que aún le gustaría aprovechar estas increíbles funciones, ¿es posible? Usted apuesta Simplemente diríjase al generador de descargas personalizado y deseleccione todo excepto el módulo de formularios. Esto recortará su descarga a solo los elementos necesarios para la creación de formularios.
Fundación
Foundation by Zurb también tiene un montón de características de gran forma. Puedes crear algunos formularios realmente avanzados utilizando técnicas muy similares a las que acabamos de ver en Bootstrap.
El código para implementar formularios en Foundation debería ser bastante similar a lo que vimos antes. En realidad, solo estamos usando los elementos básicos que nos brinda el propio HTML5 con algunos nombres de clase especiales:
Como puede ver, con Bootstrap o Foundation, no hay mucho que aprender más allá de qué elementos HTML usar y dónde. El archivo CSS incluido hará todo el trabajo de secuestrar estos elementos y hacer que se vean bonitos.
El apoyo de la forma de la Fundación no es bastante tan profundo y extenso como el de Bootstrap, pero recuerde que esto podría ser algo bueno. Si estás construyendo formas simples, no siempre necesitas la pelusa.
Una cosa que Foundation tiene, lo que es genial es un JavaScript que le permite implementar sus propios elementos de formulario personalizados. Por ejemplo, si desea crear un diseño de casilla de verificación personalizado, Foundation lo hace tan fácil como unas pocas clases y un pequeño fragmento de código JavaScript.
Marco 52
52 Framework fue uno de los primeros frameworks HTML5 en llegar a la web. No estoy seguro de cuán activamente desarrollado está en estos días, pero sí tiene algunas características básicas de formulario incluidas.
Puede ver una página de demostración aquí y una guía de video que lo guía a través de la funcionalidad aquí.
En última instancia, creo que está mucho mejor con Basecamp o Foundation, que son mucho más impresionantes, exhaustivos y actualizados. Sin embargo, si ha usado 52 Framework en el pasado y ya se siente cómodo con él, es posible que desee ver las características del formulario.
Formalizar
Formalize es un marco CSS destinado a hacer que el estilo de las formas sea coherente en todos los principales navegadores. Lo emparejas con tu biblioteca de JavaScript favorita y hace todo el trabajo pesado por ti.
Formalize fue creado por Nathan Smith, quien también creó 960 Grid System. Obviamente, dado que este es el caso, usted sabe que Formalize es de primera categoría y ayuda a la mayoría de los navegadores a admitir las funciones más recientes de los formularios HTML5.
Para mi
Formee es otro gran marco dedicado exclusivamente a ayudarte a construir formas perfectas.
Formee tiene tres objetivos principales. El primer objetivo es facilitar el diseño. Formee se basa en las ideas de 960.gs y le permite usar convenciones similares para diseñar sus formularios. El segundo objetivo es la compatibilidad entre navegadores. Formee normaliza la apariencia de sus formularios en todos los principales navegadores. El tercer objetivo es hacer que las formas se vean impresionantes.Se aplica un atractivo estilo por defecto y se puede personalizar completamente para satisfacer sus necesidades.
Formadores de formularios
Ahora que hemos visto algunos de los mejores marcos de formularios, pasemos a un par de constructores de formas y servicios realmente estelares.
Wufoo
Si está hablando de creadores de formularios, simplemente no puede dejar de abrir Wufoo, que es, con mucho, una de las mejores opciones en este espacio.
Wufoo hace que sea increíblemente fácil crear formularios web de todo tipo, ya sea que sepa un poco de código o no. Todo lo que tiene que hacer es arrastrar los elementos de formulario pre-formateados y precodificados a su lienzo, donde puede modificarlos y organizarlos con solo arrastrar y soltar.
Realmente no puedo decir lo suficiente sobre qué tan bueno es Wufoo como constructor y como servicio general de administración de formularios web. Incluso si estás bien con el estilo de las formas a mano, hay todas las cosas del desarrollador de back-end que se complican realmente rápido. Correos electrónicos, notificaciones, aceptación de pagos, análisis, carga de archivos, si no sabes lo que estás haciendo, esto puede ser una pesadilla. Mangos de Wufoo todos de ello para ti. En lugar de dolores de cabeza, obtiene un servicio optimizado y un buen panel para administrar todos sus formularios.
Wufoo tiene una pequeña cuenta gratuita para que comiences, y si tus necesidades son básicas, eso es todo lo que necesitas. Sin embargo, cuando estás listo para las grandes ligas, buscas entre $ 15 y $ 200 al mes.
JotForm
Si estás buscando una buena alternativa de Wufoo, echa un vistazo a JotForm. Este increíble servicio ha existido por mucho tiempo, personalmente lo usé durante años antes de que escuchara sobre Wufoo.
En su mayor parte, las características de JotForms son comparables a Wufoo. El generador de formularios y las funciones de generación de informes no son tan agradables como los de Wufoo, pero siguen siendo perfectamente funcionales y tan fáciles de usar que cualquiera puede crear grandes formularios con ellos.
Al igual que Wufoo, JotForm puede manejar todas sus necesidades complicadas, como el pago a través de PayPal o franja, CAPTCHA, autocompletar y más.
Una cosa que JotForm realmente tiene a su favor es una genial estructura de precios. Brindan a todos los usuarios formularios ilimitados con campos ilimitados, y luego aumentan el costo según la cantidad de envíos que reciba, el almacenamiento que necesite, etc. Usted es una fortuna si está buscando el plan Wufoo de $ 200 / mes.
¿Que usas?
La creación de formularios, el diseño y la generación de informes tienden a impulsar proyectos de diseño web aparentemente básicos en un territorio de desarrollo de alto nivel. No se preocupe, no está solo al estar confundido acerca de estas cosas, por eso hay tantas herramientas excelentes como las anteriores para ayudarlo.
Deja un comentario a continuación y dinos qué piensas de estas opciones y qué método o servicio utilizas para los formularios.