Formularios en React

Los formularios son uno de los componentes más importantes en las páginas web. Son la forma en la que los usuarios interaccionan, se comunican y en la mayoría de los casos, representan el medio para cumplir ese objetivo por el que decidieron entrar a tu sitio.

¿Quiéres comprar? ¡Genial! Llena este formulario ¿Quiéres suscribirte? Otro formulario ¿Quiéres ir al meetup de Tech Women Community? Solo llena este formulario ¿Quiéres subir una foto? ¡Formulario! ¿Quiéres unirte a la comunidad? Es un formulario.

Creo que ya me entendiste, los formularios están en todos lados y si tú eres un desarrollador web estarás haciendo muchos de estos. Crear un formulario es un trabajo complejo con muchos pasos y no siempre terminas con un producto fácil de utilizar.

Por todas estás razones, en esta entrada vamos a crear un componente en React llamado Form que te permitirá crear formularios siguiendo las reglas básicas de Usabilidad Web, estas reglas las he extraído de las recomendaciones de Nielsen Norman group (https://www.nngroup.com/articles/web-form-design/) y de un research hecho por Google (https://research.google.com/pubs/pub42513.html)

Mejores Prácticas para la experiencia de usuario en formularios

Las mejores prácticas que seguiremos para crear nuestros formularios son las siguientes:

1. Los labels deben posicionarse alineados y arriba del input

Con los labels en esa posición, los formularios son completados a una velocidad mucho más alta.

2. Los labels no deben estar completamente en mayúsculas

El texto que está escrito completamente en mayúsculas es mucho más difícil de leer y escanear.

3. No utilices placeholders en lugar de labels

Utilizar placeholders en lugar de labels dificulta a los usuarios recordar que información pertenece a que campo, provocando que sea difícil verificar y arreglar errores.

4. Coloca los checkboxes y radios uno debajo de otro

Acomodarlo de esta forma, permite escanearlos más fácilmente.

5. Provee errores muy visibles y específicos

Mostrar los errores en un color que resalte y en negritas, asegura que el usuario no los pase por alto.

6. No empieces a validar el campo mientras el usuario sigue escribiendo

*Aquí puede haber excepciones, por ejemplo cuando el usuario escribe una contraseña es mejor empezar a validar mientras la escribe.

7. Relaciona los campos con el tamaño de la información que esperas

El largo de los campos ofrece ayuda significativa al usuario para responder las preguntas efectivamente.

8. Haz una clara distinción entre campos opcionales y requeridos

Asegurarse de que el usuario sepa exactamente cuales campos son requeridos, no debería estarlo descubriendo a prueba y error.

El component Form

Ahora que tenemos las mejores prácticas en usabilidad de formularios, vamos a crear un componente llamado Form que las siga. Este formulario recibirá como parámetro un json con los campos a mostrar y funciones a ejecutar.

En el campo fields, el componente Form debe recibir un array de JSON con los siguientes campos

El resultado de este formulario se vería así:

Para este formulario existen 2 tipos de validaciones. Para el campo Correo electrónico utilizamos la función validate, que realiza la validación hasta que el usuario haya dejado el campo(onBlur) y para la Contraseña utilizamos la función validateOnChange que valida el campo cada que el usuario teclea una nueva letra (Mejor práctica#6)

Vamos a ver como se crea el formulario dentro de la clase Form.

En la función getField, dependiendo del tipo de campo, creamos el componente y le pasamos en los props toda la información que necesita

Finalmente llegamos a la clase Input, donde creamos el campo, junto con su label, mensajes de error y textos de ayuda.

El component Form esta configurado para poder crear un formulario con inputs de diferentes tamaños y así tener la relación entre el tamaño y la información que esperas (mejor práctica#7)

Para crear este formulario

Utilizarías este JSON

Si deseas ver el código más a fondo, puedes encontrarlo aquí

Resources

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.