Los formularios es uno de los elementos más importantes de tu web. Junto a los comentarios, es una de las formas que tienen tus visitantes de ponerse en contacto contigo. Además, también sirven para, por ejemplo, puedan facilitarte sus datos para que reciban tu newsletter. Pero, ¿es tu formulario lo suficientemente accesible y eficiente?
En SiloCreativo hemos hablado en alguna que otra ocasión sobre la creación de formularios, ya sea con servicios externos como Mailchimp, como con plugins disponibles para WordPress como Contact Form 7. Estas herramientas nos permiten construir desde cero un formulario, o incluso nos facilitan un código para que lo insertemos en nuestra web, y no tengamos que hacer nada más.
Esto puede resultar un problema. Si diseñamos un formulario, puede que no tengamos claro cuales son los campos correctos o necesarios a añadir. Y si nos dan un formulario ya definido, quizás tenga elementos que, o bien sobren para nuestras necesidades, o echemos en falta.
Por este motivo, queremos enseñaros algunos puntos a tener en cuenta en el momento de crear un formulario. Este artículo no pretende ser un tutorial de como hacer un formulario paso a paso. Más bien son unas pautas que deberíamos aplicar siempre, de cara a que los usuarios de nuestra web tengan las máximas facilidades para poder completar nuestro formulario. Y pueden aplicarse sea cual sea tu web.
Veamos cuales son estos puntos que siempre deberíamos tener en consideración.
1. Diseña tu formulario en una sola columna
A veces, por motivos de diseño, lo lógico es que pensemos en disponer nuestro formulario en dos o más columnas. Quizás no tanto cuando estamos maquetando para pantallas en formato vertical, como la de los smartphones. Pero en escritorio, lo habitual es disponer de mucho espacio en sentido horizontal.
Pero siempre deberíamos ceñirnos a que nuestro formulario se muestre en una columna. Y los motivos son tan sencillos como facilitar su lectura. Al menos en occidente, leemos los documentos de izquierda a derecha, y de arriba a abajo. Si el formulario tiene dos o más columnas, existe la duda de si el orden de lectura es primero en horizontal, o en vertical. Quizás en esta imagen quede mejor explicado.
Aunque pueda parecer algo con poca importancia (solo queremos que se rellene el formulario), entronca directamente con el siguiente punto.
2. Ordena los campos de tu formulario de forma lógica e intuitiva
El formulario no deja de ser un texto más. Con la diferencia de que hay que rellenar los huecos. Si no disponemos cada uno de los campos de forma lógica, puede provocar que la persona que lo rellena se pueda confundir. Esto puede conducir a que, o no rellene los campos de forma correcta, o que incluso no llegue a completar el formulario.
En primer lugar, agrupar según los tipos de datos que queremos que nos faciliten: datos personales, encuestas, comentarios… Y después que cada uno de estos grupos tengan un orden lógico. Si estamos pidiendo datos personales, no empecemos pidiendo Nombre + Email + Apellidos + Teléfono. Este orden no tiene lógica alguna, y campos que deberían estar juntos (Nombre + Apellidos), provocan rechazo y extrañamiento si no están en su orden correcto.
3. Intenta posicionar las etiquetas sobre los campos
Antes hemos hablado de que la disposición de nuestro formulario esté en una sola columna. Tanto etiquetas como campos. Si cada una está en una columna, y tenemos una etiqueta muy larga, podemos hacer que nuestros visitantes se confundan cuando tengan que dilucidar a que campo corresponde.
No queremos que llegar al punto en el que haya una persona rellenando nuestro formulario, y tenga que ir con el dedo, haciendo una línea en la pantalla para adivinar donde tiene que escribir. Un ridículo mayor para quien vea a esa persona. Además de que puede dejar marcas en la pantalla.
4. Distingue entre los campos obligatorio y opcionales
Ante todo, deberíamos evitar los campos opcionales. Nuestro formulario debería ser lo más simple y conciso posible. Pero si creemos que es necesario añadir campos opcionales (no más de uno o dos por formulario), hay que hacerlo saber.
Lo ideal es que pongamos el texto opcional directamente en la etiqueta, con otro estilo de texto, para no dar lugar a confusiones. También hay que evitar el ponerle a la etiqueta un asterisco, y poner al pie del formulario en letra pequeña que ese campo es opcional. Esto ya es una petición personal. Evitemos la letra pequeña. Somos gente seria, no entidades bancarias.
5. Visibiliza los mensajes de error de tu formulario
En más de una ocasión habrás rellenado un formulario, y cuando crees que has terminado y pulsas el botón de enviar, obtienes un mensaje diciéndote que alguno de los campos contiene un error. Perfecto, ¿pero a que campo se está refiriendo?
Posiblemente sea uno de los motivos por los que alguien, finalmente, no rellene un formulario. Los malditos mensajes de error que no se explican. Si hay un error, hay que mostrar en que campo en particular es. Y a ser posible, que sea bien visible. Que de un simple vistazo, veamos donde está ese error. Mejor ser evidentes a perder un visitante por este tipo de tonterías.
6. No sitúes en el placeholder información vital
Sobre este punto hablaba uno de los artículos que compartimos en nuestro último SiloMag. Y es que los placeholder son un instrumento perfecto para dar información extra en un formulario sin ocupar espacio extra. Estos placeholder están en los campos, y en cuanto clicamos en ellos, desaparecen para que podamos escribir. Pero, a veces, colocamos en estos placeholder información importante para rellenar el formulario.
El típico ejemplo es cuando, en el campo de Contraseña, tenemos un placeholder que diga la contraseña debe disponer de más de 8 letras, y al menos una mayúscula. Perfecto para que nuestros visitantes usen una contraseña segura. Pero, se clica en el campo, y desaparece esta info. Pero, ¿cómo era la contraseña que debía poner?
Para esto, existen varias soluciones. Una de las que más nos gustan son las que están en estás demos que compartieron desde Codrops. Una vez hacemos clic en el campo, el texto del placeholder se desplaza. El campo queda libre para escribir, y la información que teníamos en el placeholder sigue siendo visible.
Con estos consejos, tendremos unos formularios mucho más accesibles y eficientes, y ninguno de nuestros usuarios se quedarán a mitad de camino cuando lo rellenen. Algo esencial para mantenernos en contacto con ellos, y que reciban todas nuestras novedades y noticias.
