Anatomía de una página de contacto que invita a escribir

Hay una pregunta que hacemos en casi todos los talleres de arranque de un proyecto web: «¿Cuál es la página más importante de tu web?». Casi nadie responde «la de contacto». Y, sin embargo, es la página a la que conducen todos los botones, la que termina cada recorrido, la última que ve alguien antes de convertirse en cliente. Si esa página falla, el trabajo de todas las demás se queda a un paso de dar fruto.

Lo curioso es que suele ser la más rápida de diseñar y la menos pensada. Un formulario con cinco campos, un mapa incrustado, un teléfono y un correo. Todo correcto. Pero cuando la miramos con los ojos de quien llega a ella (con una duda, con prisa, con algo de inseguridad sobre si su consulta merece la pena), aparecen muchas oportunidades de hacerla más acogedora.

Esta guía recorre la página de contacto pieza a pieza. Del formulario en sí hablamos a fondo en formularios de contacto que sí se rellenan; aquí miramos la página completa que lo rodea.

01Quién llega a la página de contacto y qué necesita

No todas las personas que llegan a esta página buscan lo mismo. En una web corporativa típica conviven, como mínimo, cinco intenciones:

1. 01Clientes potenciales que quieren pedir presupuesto, información o una cita. Son la prioridad.
2. 02Clientes actuales que necesitan ayuda, hacer un cambio o resolver una incidencia.
3. 03Personas que buscan un dato rápido: el teléfono, la dirección, el horario.
4. 04Candidatos que quieren enviar su currículum.
5. 05Proveedores, prensa y colaboradores.

Una página que trata a todos igual obliga a cada uno a buscar su camino entre información que no le corresponde. Una página que los distingue (con opciones claras al principio, o con un selector de motivo en el formulario) acelera a todos y hace que los mensajes lleguen a la persona adecuada.

02La estructura de una página de contacto completa

Este es el orden que proponemos. En negocios muy sencillos algunas piezas se fusionan, pero la lógica se mantiene: primero invitar, luego facilitar, luego tranquilizar.

El titular: una invitación, no una etiqueta

«Contacto» es el nombre de la página en el menú, pero como titular dice poco. Funciona mejor una frase que invite y concrete: «Cuéntanos tu proyecto y te respondemos en 24 horas», «¿Hablamos de tu reforma?», «Pide tu primera cita». Debajo, una o dos frases que quiten presión: «No hace falta que lo tengas todo claro. Con una idea general podemos orientarte». Ese pequeño texto, del que hablamos en la guía de microcopy, cambia la sensación de la página entera.

Canales: los que atiendes bien

Cada persona tiene su canal preferido. Hay quien prefiere llamar, quien prefiere escribir con calma y quien solo usa WhatsApp. Ofrecer varios canales amplía el número de personas que se animan a contactar, siempre que cada canal esté bien atendido. Pautas prácticas:

• →Teléfono pulsable en móvil, con el enlace tel: y el número con prefijo internacional si tienes clientes de fuera.
• →Correo visible y pulsable, para quien quiere adjuntar documentos o escribir desde su programa.
• →WhatsApp con un enlace directo y un mensaje predefinido que facilite empezar.
• →Reserva online si tu negocio funciona con citas: muchas veces es el contacto más eficaz de todos.
• →Horario de atención junto a los canales en tiempo real (teléfono, WhatsApp).

El plazo de respuesta: la frase que más tranquiliza

Si tuviera que quedarme con un solo detalle de toda la página, sería este: decir cuándo vas a responder. «Respondemos en menos de 24 horas laborables» transforma la incertidumbre de enviar un mensaje al vacío en una expectativa concreta. Y luego, claro, hay que cumplirlo.

La página de contacto en el móvil

En el móvil, la página de contacto se usa de otra manera. Mucha gente llega a ella para llamar o para saber cómo llegar, no para escribir un mensaje largo con el pulgar. Por eso, en pantallas pequeñas, conviene cambiar el orden de prioridades:

1. 01Los canales inmediatos primero: botones grandes de llamar, WhatsApp y cómo llegar, con un área táctil generosa (44 × 44 px como referencia, la recomendación de Apple).
2. 02El formulario después, con los campos a todo el ancho y el teclado adecuado para cada uno: numérico para el teléfono, con arroba para el correo.
3. 03El mapa como enlace, más que como un mapa incrustado que ocupa media pantalla, pesa en la carga y atrapa el scroll al pasar el dedo por encima.
4. 04El horario visible sin desplegar nada, y si puedes, indicando si en ese momento está abierto.

Probar la página en un móvil real, con una mano y caminando, es la forma más honesta de comprobar si funciona.

03El formulario, en el contexto de la página

Sin repetir lo que contamos en la guía dedicada, estos son los puntos que más pesan en una página de contacto:

1. 01Pocos campos y bien elegidos: nombre, una forma de contacto, motivo y mensaje suelen bastar. Cada campo opcional se marca como tal.
2. 02Motivo de contacto como primera pregunta si hay varias intenciones. Puede incluso adaptar los campos siguientes.
3. 03Etiquetas visibles encima de cada campo, nunca solo como texto de ejemplo dentro del campo, que desaparece al escribir.
4. 04Autocompletado con los atributos correctos para que el navegador rellene los datos con un toque en el móvil.
5. 05Botón con un verbo concreto: «Enviar consulta», «Pedir presupuesto».
6. 06Errores claros, junto al campo, explicando cómo corregirlos.

<form action="/api/contacto" method="post">
  <label for="motivo">¿En qué podemos ayudarte?</label>
  <select id="motivo" name="motivo" required>
    <option value="presupuesto">Quiero un presupuesto</option>
    <option value="cliente">Ya soy cliente</option>
    <option value="otros">Empleo, prensa u otros</option>
  </select>
  <label for="nombre">Nombre</label>
  <input id="nombre" name="nombre" autocomplete="name" required>
  <label for="email">Correo electrónico</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  <label for="tel">Teléfono <span>(opcional)</span></label>
  <input id="tel" name="tel" type="tel" autocomplete="tel">
  <label for="mensaje">Cuéntanos un poco</label>
  <textarea id="mensaje" name="mensaje" rows="5"></textarea>
  <p class="privacidad">Usaremos tus datos solo para responder a tu consulta. <a href="/privacidad">Más información</a>.</p>
  <button type="submit">Enviar consulta</button>
</form>

Los atributos autocomplete, además de comodidad, son un requisito de accesibilidad: el criterio 1.3.5 de WCAG 2.2 pide identificar el propósito de los campos que recogen datos personales.

04Privacidad y confianza junto al botón

La protección de datos forma parte del diseño de la página. El Reglamento General de Protección de Datos (RGPD) obliga a informar a la persona de quién trata sus datos, para qué y cuáles son sus derechos. La fórmula que recomienda la Agencia Española de Protección de Datos es la información por capas: un texto breve junto al formulario (la primera capa) con un enlace a la política completa.

• →Primera capa breve y clara, justo antes del botón: responsable, finalidad, derechos y enlace.
• →Casilla separada y sin marcar si además quieres enviar comunicaciones comerciales, porque eso requiere un consentimiento específico.
• →Protección antispam discreta: un campo trampa oculto o una verificación invisible molestan mucho menos que un captcha de imágenes.

En RGPD y cookies en tu web repasamos el marco completo. Para dudas de un caso concreto, las guías de la AEPD son la referencia.

05Ubicación y presencia local

Si atiendes en persona (una clínica, un restaurante, una tienda, un despacho), la ubicación es parte esencial del contacto.

• →Dirección completa en texto, no solo en el mapa, para que se pueda copiar y la lean buscadores y lectores de pantalla.
• →Mapa con enlace a «Cómo llegar», que abra la aplicación de mapas del móvil.
• →Indicaciones prácticas: aparcamiento cercano, transporte público, accesibilidad del local, planta o puerta.
• →Una foto de la entrada, que ayuda mucho a reconocer el lugar al llegar.
• →Mismos datos que en tu ficha de Google: nombre, dirección y teléfono idénticos en la web y en Google Business Profile refuerzan tu presencia local. En la guía de Google Business Profile explicamos cómo cuidarla.

Para que los buscadores entiendan esos datos, la página puede incluir datos estructurados de tipo LocalBusiness con dirección, teléfono, horario y coordenadas.

Empleo, prensa y proveedores: un carril propio

Al final de la página, un bloque breve con «Otros motivos» ordena mucho la bandeja de entrada. Un correo específico para candidaturas (o un enlace a la página de empleo), un contacto de prensa con el nombre de la persona responsable y una dirección para proveedores. Quien busca esos canales los encuentra a la primera, y los mensajes comerciales llegan limpios a quien tiene que responderlos. Es un detalle pequeño que transmite organización y respeto por el tiempo de todos.

06Después de enviar: la página de gracias

El momento después de pulsar «Enviar» es pequeño, pero muy delicado. La persona acaba de dar un paso y quiere saber que ha salido bien. Una buena página o mensaje de confirmación incluye:

1. 01Confirmación inequívoca: «Hemos recibido tu mensaje».
2. 02Qué pasa ahora: «Te escribiremos antes de mañana a las 14:00 desde hola@…».
3. 03Una alternativa si es urgente: el teléfono o WhatsApp.
4. 04Algo útil mientras espera: proyectos, una guía relacionada o vuestras redes.
5. 05Un correo de acuse automático con copia del mensaje enviado.

Esa página también es el lugar ideal para medir. Registrar el envío como conversión en la analítica (por ejemplo, con el evento generate_lead de Google Analytics 4) te permite saber qué páginas y qué campañas traen contactos de verdad, y no solo visitas.

07Una puerta abierta

Una buena página de contacto se siente como una puerta entreabierta con alguien amable detrás. Invita, explica cómo es el siguiente paso y deja claro que tu mensaje importa. Todo lo demás de la web conduce aquí, así que merece el mismo cuidado que la portada.

En SIMA diseñamos la página de contacto como parte de cada proyecto de diseño web y experiencia digital, con sus canales, sus textos, su medición y su página de gracias. Y si quieres ver cómo lo resolvemos nosotros, nada mejor que escribirnos: te respondemos encantados.