Formulario de contacto: qué campos pedir y cómo diseñarlo para que te escriban

Tu formulario de contacto es el último paso entre una visita y un cliente. Si pide demasiado, confunde o falla en el móvil, esa persona se va sin escribirte y tú ni te enteras. En esta guía verás qué campos pedir, cómo ordenarlos y qué revisar hoy mismo, con una plantilla según tu tipo de negocio.

Casi nunca falla por ser bonito o feo. En cambio, suele fallar por fricción: campos que nadie entiende, datos que no hacen falta o errores que aparecen al final sin explicación.

Además, esto está medido. En un experimento presentado en 2014 en CHI, la gran conferencia de interacción persona-ordenador, un equipo de investigación aplicó 20 pautas de usabilidad a formularios de webs reales de empresas. Los formularios mejorados se completaron más rápido, con menos intentos de envío y con más satisfacción.

Por eso merece la pena revisar el tuyo antes de tocar colores o textos. Las pautas son sencillas, y la mayoría se aplican en una tarde.

La regla de oro la resume Nielsen Norman Group en su guía sobre usabilidad de formularios web: mantenlo corto. Quita cualquier dato que puedas deducir, pedir más adelante o simplemente no pedir.

Piénsalo así: ¿necesitas la empresa, el cargo y la provincia para contestar a alguien que pregunta por un presupuesto? Normalmente no. Por eso es mejor preguntarlo en la primera llamada, cuando ya hay conversación.

Los cuatro campos que casi siempre bastan

1. Nombre. Uno solo, sin separar nombre y apellidos.
2. Cómo prefieres que te respondamos. Correo o teléfono, y que baste con uno de los dos.
3. Qué necesitas. Unas pocas opciones para elegir, si te ayudan a clasificar.
4. Mensaje. Un campo abierto, con una pregunta que oriente.

Si algún campo es opcional, márcalo como «opcional». Sin embargo, NN/g recomienda no pasar de uno o dos opcionales: si hay más, probablemente sobran.

Plantilla de formulario de contacto según tu negocio

Usa esta tabla como punto de partida y ajústala a tu caso, pero desconfía de cualquier campo que no sepas para qué usarás.

Fíjate, además, en las dos filas de citas y reservas. Si lo que la gente quiere es una hora concreta, un formulario solo añade una ida y vuelta de mensajes.

Aquí manda la costumbre, no la creatividad. Al fin y al cabo, la gente rellena mejor lo que se parece a lo que ya conoce.

• Una sola columna. Dos columnas obligan a la vista a saltar y rompen el ritmo de arriba abajo.
• Etiqueta encima del campo. Así queda pegada al campo que describe y se lee bien en el móvil.
• Nada de texto de ejemplo como etiqueta. El texto gris de dentro del campo desaparece al escribir y la persona olvida qué le pedías. NN/g desaconseja este recurso.
• El tamaño del campo, acorde a la respuesta. El mensaje necesita varias líneas; el teléfono, no.
• Opciones visibles si son pocas. Con dos o tres opciones, mejor botones de opción que un desplegable.
• Un solo botón, con un verbo claro. «Enviar mensaje» funciona. En cambio, un botón de «Borrar formulario» al lado es una trampa.

Además, cada campo necesita su etiqueta por accesibilidad. Las pautas WCAG 2.2 lo piden en el criterio 3.3.2 de etiquetas o instrucciones, de nivel A, el más básico.

El móvil, primero

Prueba siempre el formulario en un teléfono antes que en el ordenador. Ahí se nota todo.

Por ejemplo, un campo de teléfono bien marcado hace que muchos móviles muestren el teclado numérico. Y el atributo autocomplete indica al navegador qué dato va en cada campo, así que puede rellenarlo solo.

Son dos detalles técnicos que se resuelven en minutos. Por eso, si estás preparando una web nueva, pídelos desde el principio. En nuestra página de diseño web en Valencia explicamos cómo planteamos cada proyecto.

Un error mal explicado frustra justo cuando la persona ya casi había terminado. Por eso conviene seguir tres normas:

1. Avisa junto al campo, no solo arriba del todo.
2. Usa varias señales: borde, texto y color. Si solo cambias el color, quien no distingue bien el rojo puede no verlo.
3. Di cómo arreglarlo. «Revisa el correo: falta la @» ayuda más que «Campo no válido».

Además, si un campo necesita un formato concreto, explícalo antes de que la persona escriba, no después.

Para frenar el spam, muchas webs llenan el formulario de obstáculos. Sin embargo, los retos visuales tienen un coste. En su nota sobre la inaccesibilidad de los CAPTCHA, el W3C advierte de que, sin una alternativa accesible, pueden impedir a personas con ciertas discapacidades completar tareas en una web.

Antes de poner un reto, prueba opciones invisibles para quien rellena el formulario. Una de ellas es el campo trampa: un campo oculto que las personas no ven y que muchos robots rellenan de forma automática. El formulario de nuestra propia web usa uno.

En cuanto a la privacidad, la AEPD recomienda informar por capas: unas líneas básicas junto al formulario y el detalle en la política de privacidad. Además, si pides consentimiento, la casilla no puede venir marcada de serie, según su guía sobre el deber de informar. El texto legal concreto conviene que lo revise un profesional.

En este punto, muchos formularios de contacto se quedan cortos. La persona pulsa, ve un mensaje genérico y no sabe si alguien lo leerá.

Cuenta qué pasará y cuándo. En nuestra web, por ejemplo, junto al formulario avisamos de que solemos responder en uno o dos días laborables. Si das un plazo, cúmplelo.

También tienes que enterarte tú. Asegúrate de que cada mensaje llega a un correo que miras de verdad o a tu móvil. Si recibes muchos, puedes automatizar parte de la respuesta, como el acuse de recibo o la clasificación por tipo de consulta.

Este es un ejemplo hipotético para ilustrar el criterio, no un caso real. Imagina un centro de fisioterapia de Valencia con este formulario: nombre, apellidos, correo, teléfono, dirección, fecha de nacimiento, cómo nos conociste y mensaje, más la casilla de privacidad.

Al revisarlo con la regla de NN/g, el resultado cambia bastante:

• Nombre y apellidos se unen en un solo campo.
• Correo y teléfono se quedan, pero basta con uno de los dos.
• Dirección y fecha de nacimiento salen: se piden en la primera cita, si hacen falta.
• Cómo nos conociste pasa a ser una pregunta en la llamada.
• Mensaje se queda, con una pista: «Cuéntanos qué te pasa y desde cuándo».
• Privacidad se queda, con la información básica al lado y sin marcar.

Además, como ese centro trabaja con citas, el botón principal de la página debería llevar a la reserva online. El formulario queda para dudas y casos especiales.

Coge el móvil, abre tu web y rellena tu propio formulario como si fueras un cliente.

• ¿Se encuentra el formulario sin buscarlo?
• ¿Tiene cuatro campos o menos, sin contar la privacidad?
• ¿Cada campo tiene su etiqueta visible encima?
• ¿Está todo en una sola columna?
• ¿Sale el teclado adecuado en el teléfono y el correo?
• ¿El botón dice qué hace, sin un «Borrar» al lado?
• ¿Los errores aparecen junto al campo y explican cómo corregirlos?
• ¿Funciona sin retos visuales que te hagan dudar?
• ¿Ves la información básica de privacidad y la casilla sin marcar?
• ¿Te dice qué pasará después y en qué plazo?
• ¿Te ha llegado el mensaje de prueba?

Este último punto parece obvio, pero conviene comprobarlo. Una actualización o un cambio de correo pueden dejar el formulario enviando a ninguna parte. Por eso, repite la prueba cada pocos meses, igual que revisas por qué tu web tarda en cargar cuando notas que algo va mal.

Un buen formulario de contacto pide poco, se entiende a la primera y te avisa cuando alguien escribe. Empieza por la checklist: si fallan más de tres puntos, merece la pena rehacerlo. Y si prefieres hablar por chat, un asistente de WhatsApp puede complementar el formulario, no sustituirlo.