Cómo fue la charla «Mejora tu web: Formularios en WordPress, funcionales y usables»

Los números

Apuntados a la charla: 49 personas.
Asistentes: 27 personas.
Se realizó el pasado 17 de septiembre.

IMPORTANTE: Os recordamos que hemos retomado la herramienta Slack para organizarnos como grupo y poder compartir la gestión de la meetup, concretamente el canal que usamos es #wpalicante de Slack WordPress España. Si quieres echar una mano, aportar ideas y formar parte más activa de esta comunidad sigue las instrucciones que aparecen en la siguiente página -> http://wp-es.es/slack/

La charla

Todavía con la resaca de la Wordcamp Valencia 2018, nuestros compañeros Flavia y Joaquín nos ponen un poco al día de lo que allí aconteció y nos traen su ponencia en tierras valencianas para los que no pudimos asistir.

En general, nos comentan que una Wordcamp es como una meetup pero a lo grande, donde se realizan interesantes ponencias y se ponen en común temas que preocupan a todos. Recordemos que WordPress se desarrolla bajo licencia GPL y eso significa que el software es libre y por tanto cualquier persona tiene acceso y puede modificarlo a su gusto. Hay una gran comunidad de personas involucradas que de forma desinteresada mantienen tanto plugins como temas y foros. Recordad que en el foro en español de wordpress podéis incluir cualquier duda o problema que os haya surgido y obtendréis respuesta en un breve plazo de tiempo de personas expertas que os ayudarán de forma desinteresada. Lo único que tenéis que hacer es registraros en la página para poder postear en el foro. Si sólo queréis buscar un problema que haya posteado otro usuario no necesitáis estar registrados.

Volviendo al tema que nos ocupa, os compartimos la presentación de nuestros ponentes con el resumen de todo lo explicado.

Os añadimos a continuación algunas notas adicionales que pueden resultar interesantes.

Generalidades del plugin

Gravity Forms es un plugin que nació como generador de formularios y actualmente sirve para muchas más cosas, entre ellas para venta de monoproducto (mini tienda online) o encuestas y exámenes.
Es de pago, aunque hemos de recordar que lo que se paga es el soporte, no el software en sí mismo, que está bajo licencia GPL, igual que cualquier otro software asociado a WP.
Es muy intuitivo porque está formado por multitud de «cajas» que se utilizan con el simple gesto de pinchar y y soltar donde te interese usarlo (drag&drop).
Hay unas cajas de Campos de Entrada que se utilizan para montar una plantilla que otro usuario puede rellenar y de los campos mostrados se monta una entrada en la web de forma automática. Esto sirve para que dicho usuario pueda añadir entradas a la web sin tener que darle permisos de editor. La entrada se generaría en estado Borrador y luego tú puedes aceptarla y publicarla o descartarla.
Permite lógica condicional que se utiliza para decidir si mostrar unos campos u otros en función de una condición. Por ejemplo, según la edad que pongas en el campo correspondiente te muestro un texto para los menores de edad y otro diferente para los mayores de edad.
Dispone de add-ons, que son pequeños paquetes adicionales que puedes incluir en el paquete base del plugin para mejorarlo. Por ejemplo, hay uno para que el formulario se pueda guardar en pdf.
Se pueden incluir acciones en el momento de CONFIRMACIÓN (al pulsar el botón ENVIAR en los formularios). Esto implica que en ese momento se puede
- Mostrar un mensaje en el propio formulario.
- Enviar al usuario a una nueva página con resumen o agradecimiento.
- Enviar al usuario a otra página de la web.
Todos los formularios se guardan en tu propia BBDD, por lo que no sólo tienes respaldo de todos los formularios generados sino que al estar en tu propio servidor puedes cumplir la GDPR.
La pequeña tienda online que se puede montar conecta con las principales pasarelas de pago en el mercado.

Caso práctico

Joaquín y Flavia nos muestran a continuación un caso práctico para ver cómo se puede mejorar un formulario que hayamos creado con este plugin, basado en el siguiente ejercicio. Primero Joaquín desarrolla un formulario para un hotel que pide poder hacer reservas de habitaciones con fecha inicio, fecha fin y tipo de habitación permitiendo además enviar a otro usuario un ticket regalo con una noche de hotel gratis.

Paso 1: Joaquín en acción

Joaquín se pone manos a la obra y prepara el formulario sin tener en cuenta el continente, sólo el contenido. Para ello necesita igualmente añadir determinadas mejoras sobre el plugin original para poder realizar las siguientes acciones. En la presentación tenéis los enlaces a todos los elementos creados así como los trozos de código necesarios:

Queremos que el cupón que se genere de regalo tenga un identificador único. Para ello necesitamos un plugin que lo genere: GP Unique ID.
Hemos de añadir algo de código en el functions.php. Para ello tenemos dos opciones:
- Escribir directamente en ese archivo, con el consiguiente riesgo en caso de que haya algún error en el código añadido, y más si hemos añadido más código con anterioridad.
- Utilizar snippets, que son trozos de código que se añaden a functions.php a través de un plugin. Esto permite habilitar o deshabilitar rápidamente cada trozo de código. Además, podemos tener colecciones de snippets que podemos incluir en otras instancias de WP a nuestro gusto, creando una especie de biblioteca de códigos interesantes. El plugin es code snippet.
Cálculos en campos. En nuestro caso era necesario calcular el número de noches entre dos fechas. Esto se añade con un snippet.
Necesitamos poner algunos campos como ReadOnly, por ejemplo el que guarda el número de noches calculado. Si lo dejamos tocar sin cambiar las fechas calcularíamos luego mal el precio total de la reserva. Para ello se utiliza el plugin Disable Gravity Forms Fields.
Se plantea rellenar el formulario en tres «pasos» o apartados dentro de la misma hoja, uno para los datos personales, otro para la reserva y el último de pago. Se permite para ello pasar datos de un apartado al siguiente, por ejemplo el nombre del usuario para luego poner texto al usuario con algún comentario personalizado con su nombre. Esto se lleva a cabo con códigos que Gravity Forms asigna al contenido de cada campo de forma temporal hasta que pulsas ENVIAR. Así que podemos usar esos códigos para hacer referencia a los datos ya rellenados por el usuario.

Paso 2: Flavia imprime su toque personal en el proyecto

Una vez que Joaquín ha montado el esqueleto del formulario, Flavia nos aporta ahora una serie de mejoras de usabilidad avaladas por especialistas en la materia, en forma de vitaminas para nuestro formulario, como es:

El usuario es vago por naturaleza así que es mejor quitar los campos que no sean realmente necesarios o juntar en uno solo aquellos que por separado queden muy complejos (o demasiados en número). Ejemplo: Podemos necesitar datos de facturación diferentes en función del país del usuario. Si ponemos un montón de campos a rellenar por cada país el formulario puede quedar impracticable. Es mejor poner un sólo campo tipo texto donde el usuario escriba todos los datos que necesita que aparezcan en la factura.
Es más agradable a la vista separar los datos por grupos semánticos.
Tanto si los grupos se escriben en una misma página/pestaña o se deja en varias (uno por página) hay que ser lo más específico posible respecto de la longitud del formulario para que el usuario sepa en todo momento cuánto le queda por rellenar.
- Una opción es añadir una barra de progreso con porcentaje de avance, pero eso suele ser bastante abstracto.
- Es mejor incluso poner pasos con una pestaña por paso, con su número de paso correspondiente y marcando claramente en qué paso te encuentras, por ejemplo, escribiendo la cabecera del paso actual en negrita y el resto de pasos agrisados.
Los humanos leemos de izquierda a derecha y/o de arriba a abajo. Cuando estamos rellenando un formulario es más cómodo usar una de las dos direcciones, por tanto, como hacia abajo tendrá que ir seguro, es mejor no poner más de un campo por fila. Por tanto, pongamos todos los datos uno debajo de otro. Sólo utilizaremos la opción de poner algún campo a la derecha si queremos llamar la atención del usuario por alguna circunstancia. Por ejemplo, la típica confirmación de email. Lo ponemos a la derecha para que el usuario sea consciente de que no es una errata sino que estamos pidiendo el mismo campo dos veces a propósito.
Hemos de dirigir la intención del usuario lo máximo posible. Si tenemos dos botones y nos interesa que pinche en uno de ellos, ése lo pondremos grande y que llame la atención, y el otro pequeño y con formato de enlace en vez de botón. Por ejemplo, botones SIGUIENTE y anterior. Al que queremos que pinche es a SIGUIENTE, dejando la opción «anterior» como botón secundario que no parezca ni siquiera un botón, sólo un enlace. Para ello se añade CSS adecuado (lo tenéis en la presentación).
Hubo hace poco una tendencia al minimalismo en los formularios que llevó a que la descripción de un campo aparecía dentro del propio campo, donde el usuario tiene que escribir luego el dato. Esto hacía que en cuanto el usuario empieza a escribir la descripción desaparece y por tanto no se puede a posteriori confirmar si la información que hemos escrito es correcta porque no tenemos el detalle de lo que había que escribir allí.
- Hay que volver a incluir cada campo con una cabecera previa que deje claro qué dato hay que incluir y no se pierda.
- Además, no hay que usar la propiedad de valor determinado para una descripción porque eso se utiliza para otra cosa. Si se añade una descripción como valor predeterminado no se podrá saber qué campos ha rellenado el usuario y cuáles tienen nuestra descripción por defecto.
- Sí hay que rellenar los valores predeterminados que sea posible con la intención que está esa opción, es decir, para que todos los campos que nos interese que tengan un valor razonable no se dejen a merced del usuario. Por ejemplo, en tipo de habitación, podemos marcar por defecto sencilla con vistas al mar, si es un hotel de costa. No marcaremos SUITE porque puede resultar excesivo económicamente hablando. Hay que rellenar con datos razonables.
Se ha de mostrar la anchura del campo lo más ajustado posible al tamaño del texto que se ha de introducir, así el usuario tiene más o menos la idea de cuánto ha de escribir. Esto se realiza añadiendo CSS (en la presentación).
Ya no se marca con asterisco los campos obligatorios. Estudios han demostrado que es más efectivo que el usuario considere todo como obligatorio y le indiquemos expresamente qué campos son opcionales escribiendo la palabra «opcional» al lado del campo que corresponda. Esto se puede realizar con el plugin «Gravity Forms: Remove required and add optional string to increase form submits».
Mejor si los errores se informan en el momento de rellenar el campo, a esperar a pulsar el botón ENVIAR para que te salgan todos los problemas y tengas que ir buscando por todo el formulario dónde está el campo con error. Esto se arregla con el plugin «Real Time Validation for Gravity Forms».
Hay que esforzarse por la integración de personas con visibilidad reducida. Para ello:
- Señalar claramente los errores, no sólo con un campo en rojo, por ejemplo, sino también con simbología clara.
- Añadir los mensajes lo más claro posible, sobre todo a la hora de indicar fallos.
- El ancho del formulario debe estar entre los 500 y los 700 pixeles.

Otros plugins y aplicaciones surgidas durante la charla:

Zapier: Aplicación web de automatización. Ejemplo, supongamos una web de catas, con cada entrada de formulario de catas añade un registro en una excel en drive porque nos manejamos mejor con la excel.
GP Unique ID: para generar identificadores únicos.
Code snippet: para guardar una colección de snippets (trozs de código para functions.php) que se pueden activar y desactivar rápidamente.
Disable Gravity Forms Fields: Permite deshabilitar la edición de campos en Gravity Forms para que el usuario no los pueda modificar.
Gravity Forms: Remove required and add optional string to increase form submits: Para quitar el asterisco de los campos obligatorios y añadir la palabra «opcional» a los que lo son.
Real Time Validation for Gravity Forms: Añade validaciones a cada campo en tiempo real y sugerencia de solución.
Ninja Forms: La alternativa gratuita a Gravity Forms para crear formularios. Es mejor que Contact Form7 porque éste último es más difícil de usar (a través de shortcodes) y no guarda los formularios que se generan.