Diseño web
Me equivoqué con mis formularios: el correo primero y lo demás, después
Siete campos para apuntarse a un aviso que solo necesitaba un correo. Cómo he partido el formulario en dos pasos, sin perder datos ni seguridad, y qué revisar en los de tu web.
Me he equivocado. He hecho justo lo que siempre digo a mis clientes que no hagan: poner un formulario largo delante de algo que solo necesitaba un correo.
En esta web tengo listas de espera para las ayudas a la digitalización: la del Kit Digital, la del Bono de IA del Plan IA360 y la de Kit Consulting. Quien se apunta quiere una cosa: que le avise cuando se abra la convocatoria. Para eso me basta su correo. Y, sin embargo, el formulario le pedía nombre, empresa, correo, teléfono, municipio y un texto libre, además de las dos casillas del consentimiento.
En un móvil corriente, de 390 píxeles de ancho, aquel formulario medía unos 1.130 píxeles de alto. No cabía en la pantalla: para llegar al botón había que bajar, y por el camino ibas viendo todo lo que te quedaba por escribir. El de ahora mide 530 y se ve entero.
Lo que siempre les digo a mis clientes
Cada campo que añades a un formulario es una razón más para no rellenarlo. Unos se van porque no tienen el dato a mano; otros, porque no quieren darlo (¿para qué quiere mi teléfono, si solo me va a avisar?); y otros, simplemente, porque es largo y lo dejan para luego. Y luego no vuelven.
Por eso, cuando reviso la web de una empresa, sobre cada campo hago la misma pregunta: ¿lo necesitas para dar el siguiente paso, o solo te gustaría tenerlo? Lo que solo te gustaría tener se puede pedir después, cuando la persona ya ha dicho que sí.
Google lo explica igual en su guía de buenas prácticas para formularios de registro: pedir lo menos posible, y el resto solo cuando haga falta y quien lo rellena vea para qué. Yo lo sabía, lo recomiendo y, aun así, en mis propias listas hice lo contrario. Quería llegar a la convocatoria sabiendo a quién escribía, y pensé más en lo que me venía bien a mí que en lo que le costaba a quien se apuntaba.
Qué he cambiado
Primero, solo el correo
Ahora el formulario pide el correo y las dos casillas: la de los avisos, que es obligatoria porque sin ella no te puedo escribir, y la de las ofertas, que es opcional. Pulsas «Apuntarme a la lista» y ya estás dentro: en ese momento te llega el correo para confirmar la dirección, igual que antes.
Después, si quieres, lo demás
En la misma página, en lugar de un «gracias» a secas, aparece un segundo formulario. Arriba, «Ya estás en la lista de espera», con tu correo escrito para que veas si se ha colado una errata. Debajo, «Me gustaría saber un poco más de ti»: nombre, empresa, teléfono, municipio y un espacio para contarme lo que quieras. Todo opcional. Si lo rellenas, completo tu ficha; si cierras la página, no pasa nada, porque ya estás en la lista.
Cambiar el orden cambia la sensación. Antes, los datos eran el precio de entrada. Ahora son algo que das, si quieres, cuando ya tienes lo que venías a buscar. Y quien los da lo hace sabiendo para qué: con su nombre y el de su empresa, cuando se abra la convocatoria sabré a quién escribo y qué le puede encajar.
Que el navegador lo rellene por ti
Escribir un correo en el teclado del móvil es justo lo que más pereza da. Por eso cada campo le dice al navegador qué dato espera, con el atributo autocomplete del HTML: el correo es un correo (y el móvil enseña un teclado con la arroba a mano), el nombre es un nombre, la empresa es una empresa, el teléfono es un teléfono y el municipio es una localidad. Con eso, el navegador te ofrece rellenarlo con lo que ya tiene guardado, y con un toque está hecho.
No existe ninguna etiqueta que obligue al navegador a rellenar un campo: es una pista, y cada navegador decide cuándo la usa. Lo que sí está en tu mano es ponérselo fácil: cada campo con su etiqueta visible, del tipo que le corresponde y marcado con lo que es. Si al tocar el campo del correo en tu móvil no te ofrece el tuyo, algo de eso falta.
Sin abrir una puerta a nadie
Partir un formulario en dos tiene una trampa que no se ve: si el segundo paso completara la ficha buscándola solo por el correo, cualquiera podría escribir la dirección de otra persona y cambiarle los datos. Y la respuesta podría delatar si esa dirección ya estaba en la lista.
Por eso el segundo paso solo puede completar la ficha que acaba de crear ese mismo primer paso, y una sola vez. Si alguien escribe el correo de otra persona que ya estaba apuntada, no cambia nada, y lo que ve en la pantalla es exactamente lo mismo. Y nada de eso viaja en la dirección de la página ni en una cookie: esta web no instala ninguna.
Medir para saber si ha servido
Las estadísticas de la web cuentan por separado las altas del primer paso y los datos que llegan en el segundo. Así sabré cuántas personas se apuntan ahora y cuántas se animan a contarme algo más. Todavía no tengo cifras: el cambio es de esta semana, y no voy a inventármelas.
Lo mismo vale para tu web
Esto no va solo de listas de espera. Pasa con el formulario de contacto que pregunta el cargo, el tamaño de la empresa y el presupuesto antes de saber qué necesitas; con el de presupuesto que obliga a elegir entre opciones que no encajan; o con la tienda que exige crear una cuenta para comprar. Algunas preguntas para revisar los tuyos:
- ¿Cada campo hace falta para el siguiente paso? Si no, fuera, o para después.
- ¿Lo opcional dice que es opcional? Mejor aún si va aparte de lo obligatorio.
- ¿El navegador sabe qué es cada campo? Pruébalo en tu móvil: el correo, el nombre y el teléfono deberían rellenarse con un toque.
- ¿Se rellena bien con el pulgar? Campos grandes, el teclado que toca en cada uno y el botón a la vista.
- ¿Qué pasa cuando algo está mal? El aviso tiene que decir qué campo falla y por qué, sin borrar lo que ya estaba escrito.
Mi formulario de contacto pasó por lo mismo hace unas semanas: dejé fuera cinco campos, el cargo, el tamaño de la empresa, el servicio, el presupuesto y el plazo. Todo eso sale igual en la primera conversación, y mejor explicado.
¿Quieres que revise los formularios de tu web?
Hago diseño web en Santander para empresas de toda Cantabria, y en cada proyecto los formularios se piensan así: lo justo para el siguiente paso, accesibles, fáciles de rellenar desde el móvil y protegidos contra el spam sin pedirte que señales semáforos. Lo que incluye cada web lo tienes en páginas web para empresas. Si ya tienes una y sospechas que pierdes contactos por el camino, cuéntamelo en la página de contacto.
Y si lo que te interesa es el Kit Digital, apuntarte a la lista de espera ya solo cuesta un correo.