Cuando imaginas un buen diseño para un sitio web probablemente piensas en la página principal, el blog o las páginas de productos.

¿Alguna vez has pensado en la página de contacto?

Para la mayoría de los diseñadores de sitios web, las páginas de contacto ocupan el último lugar en la lista de prioridades en términos de redacción y diseño.

Piensa en cuántas páginas de contacto que has visto parecen haber sido creadas en los 90, aunque el resto del sitio web esté actualizado y tenga un aspecto profesional.

<< Descarga gratis el kit con recursos para diseñar materiales increíbles >> 

Eso es un gran error. La página de contacto es una de las más importantes en tu sitio web. Para la mayoría de las empresas, suele ser una de las páginas más visitadas.

¿Qué características tiene una buena página de contacto?

Por lo general, las mejores páginas de contacto tienen las siguientes características:

  • Explican por qué alguien debería ponerse en contacto:  además describen cómo pueden ayudar a resolver los problemas de los visitantes.
  • Incluyen un correo electrónico y número de teléfono: así los visitantes pueden encontrar la información que necesitan.
  • Incluyen un formulario breve: muestran solo los campos necesarios que ayudarán a la empresa a comprender quién se pone en contacto con ellos.
  • Incluyen un llamado a la acción: así mantienen a las personas en el sitio web y ofrecen otra opción por si no quieren completar el formulario.
  • Demuestran el liderazgo intelectual de la empresa: al incluir una lista de publicaciones del blog o artículos recientes acerca de la empresa en los medios, tu formulario cumplirá con esta característica.
  • Proporcionan enlaces a cuentas de redes sociales: añadir redes como Twitter, Facebook, Instagram o LinkedIn le permite a los visitantes interactuar con la empresa gracias a opciones múltiples.
  • Redireccionan al visitante a la página de agradecimiento: así los usuarios sabrán cuándo y cómo la empresa se pondrá en contacto con él.

¿Buscas inspiración? A continuación, te mostramos 15 ejemplos de algunas de las mejores páginas de contacto que hemos encontrado. Míralos y piensa cómo puedes aplicar algunas de estas ideas a tu propia página de contacto. Si quieres ver más ejemplos, explora la colección de diseños de Crayon aquí.

1. Antevenio

Esta compañía dedicada al marketing y publicidad sabe cómo implementar su estrategia; su página de contacto tiene justo lo necesario para que los clientes sepan cómo y dónde pueden contactar a la empresa. 

La página web se apega a mostrar los mapas de Google de sus diferentes sedes en España, México, Argentina, Colombia, Estados Unidos, Francia e Italia. Cada uno de los mapas es interactivo por lo que puedes hacer zoom para ubicar mejor la zona. 

Si tu empresa cuenta con diferentes sucursales a lo largo del territorio o en otros países, este ejemplo es un buen modelo. Antevenio también incluye la dirección y números telefónicos, así como el formulario de contacto en dos columnas para facilitar el registro. Además, el diseño es simple, pero bastante flexible para que los visitantes no tengan que desplazarse a lo largo de toda la página. 

Ejemplo de páginas de contacto: Antevenio, empresa con varias sucursales globales

Imagen de Antevenio

2. Havas Media 

Esta compañía de marketing muestra otro ejemplo de lo que puedes implementar en tu página de contacto si cuentas con sedes en diferentes países. 

La página de contacto de Havas es minimalista pero bien optimizada para ofrecer la información más importante. Cuenta con un buscador donde puedes teclear el país y encontrar en automático los resultados de las oficinas que se encuentran en ese territorio. De igual forma, si quieres buscar algo más específico puedes seleccionar manualmente la región, país y sucursal deseada. 

Es importante remarcar que este tipo de páginas de contacto son más útiles para compañías grandes con diferentes zonas y sedes, ya que un formulario completo podría ser un tanto complicado de administrar. No obstante, esto no significa que juegue en contra de tu negocio, ya que este tipo de formato te ofrece mayores posibilidades de establecer contacto directo con tu cliente. 

Ejemplo de página de contacto: Havas Media

Imagen de Havas Media 

3. Octopus.mx

Esta agencia de marketing digital tiene una página de contacto básica, pero complementada con los colores característicos de la compañía y su singular pulpo. En su interior contiene un formulario a dos columnas con tan solo seis casillas para llenar; la última de ellas es para que puedas seleccionar el servicio que buscas para tu compañía. 

Los colores en armonía con la identidad de la compañía generan una sensación más amigable para invitar a los clientes a contactarse. Si tu empresa maneja este tipo de conceptos, no dudes en utilizarlos a tu favor para tu página de contacto. 

Ejemplo de página de contacto de agencia Octopus.mx

Ejemplo de páginas de contacto: Octopus.mx

Imágenes de Octopus.mx

4. Novicom

La página de contacto de esta empresa es más elaborada y el diseño es más completo y llamativo. 

Al ingresar a esta página de contacto podrás encontrar un mensaje e imagen que reflejan la frescura de la compañía y su jovialidad. Al navegar, verás que su formulario solo consta de cuatro casillas a completar, así como el correo y un número de contacto. 

Es importante destacar los detalles que te hacen decidir entre un negocio y otro. Por ejemplo, Novicom incluye en su página de contacto el número de campañas que realiza anualmente, su número de clientes y certificados de marketing, los países donde tienen presencia y los nativos digitales con los que cuentan. Estos datos pueden favorecer a tu negocio y facilitar información importante a los clientes sobre tu valor. 

Ejemplo de páginas de contacto: Novicom

Ejemplo de páginas de contacto: página de Novicom

Ejemplo de páginas de contacto: Novicom, ofrece cifras sobre la empresa

Imágenes de Novicom

5. Tune

La página de contacto de Tune tiene muchos elementos eficaces: un diseño con estilo, llamados a la acción, información de contacto claramente visible y hasta un formulario para los visitantes que quieran realizar consultas específicas.

Sin embargo, lo que más destaca de su página es que es muy acogedora. La frase «Comencemos una conversación» logra que los visitantes confíen. Muchas páginas de contacto de empresas son bastante frías, pero cuanto más amistoso sea el texto, mejor se sentirán los visitantes. Después de todo, quieres que se pongan en contacto contigo para poder ayudarlos y comenzar a entablar una relación.

Tune, ejemplo de página de contacto amigable

Imagen de Tune

6. Achieve3000

Como sucede en muchas empresas, el sitio web de Achieve3000 tiene una audiencia muy variada y los motivos por los que los usuarios se ponen en contacto pueden diferir ampliamente. Por eso, han decidido ir más allá del enfoque universal.

Debajo de la imagen principal y tras algunas palabras que explican la ayuda que recibirán los clientes, encontrarás dos opciones. Puedes solicitar hablar con un representante de ventas o contactar con el departamento de atención al cliente. Cada una de estas opciones, te lleva a una página de destino separada, como la que te mostramos debajo de la captura de pantalla a continuación. Definitivamente es una manera increíble de satisfacer las necesidades más comunes de los distintos visitantes de la web.

Ejemplo de página de contacto para distinto tipo de usuarios

 

Formulario de contacto en Achieve3000

Imágenes de Achieve3000

Este es el formulario de la landing page hecho específicamente para consultas de atención al cliente:

Ejemplos de páginas de contacto: Achieve3000

Imagen de Achieve3000

7. Choice Screening

Sin duda lo mejor de la página de contacto de Choice Screening es el texto. Comienza con un encabezado conciso y eficaz: «Habla con un humano».

Después de esta gran introducción, encontramos una página bien organizada con información de contacto que incluye los correos electrónicos de cada departamento y un formulario. El formulario es un poco largo, pero para una empresa que realiza verificaciones de antecedentes de todo tipo, los campos son necesarios para organizar todas las consultas.

Al considerar la longitud que deben tener tus propios formularios, piensa si preferirías tener un mayor número de consultas o consultas de mejor calidad. Siempre que tengas otros medios de contacto más sencillos disponibles para los visitantes, un formulario largo puede ser adecuado para algunas empresas.

Ejemplo de página de contacto de Choice Screening

Ejemplo de página de contacto de Choice Screening

Ejemplo de página de contacto extendida: formulario de Choice Screening

Ejemplo de páginas de contacto: Choice Screening, formulario

Formulario de página de contacto de Choice Screening

Imágenes de Choice Screening

8. Atlas 1031 Exchange

A primera vista la página de contacto de Atlas 1031 Exchange no tiene el diseño más atractivo. Sin embargo, si la analizas atentamente verás que incluye todo lo que debe tener una buena página de contacto, en especial funcionalidad.

La página explica detalladamente su capacidad de respuesta: «Estamos siempre atentos a tus solicitudes y valoramos tus preguntas». Después describen lo que obtendrán los visitantes cuando hagan una pregunta y la promesa de una respuesta dentro de las siguientes 12 horas o antes. La página también incluye información de contacto fácil de leer, botones de redes sociales, enlaces a ofertas y hasta una lista de publicaciones del blog recientes. Han hecho un excelente trabajo.

Ejemplo de página de contacto: Atlas 1031 Exchange

Ejemplo de páginas de contacto: formulario Atlas 1031 Exchange

Imágenes de Atlas 1031 Exchange

9. Media Proper

Seamos honestos, hoy en día la mayoría de las personas prefiere completar un formulario antes que hablar con alguien. Al elegir las preguntas para los formularios, asegúrate de optar por las que ayuden a tu empresa a comprender a la persona que lo completa e incluso te ayuden a calificarla como oportunidad de venta.

Por supuesto, a algunas personas les gusta hablar y a esto se debe la graciosa ocurrencia que acompaña al número telefónico («También aceptamos llamadas telefónicas a la antigua»). 

Ejemplo de página de contacto creativo: Morroni

Ejemplo de página de contacto: Morroni

Imágenes de Media Proper

10. Pixpa

Te sorprendería ver cuántas páginas de contacto no incluyen un llamado a la acción. Aunque el propósito principal de tu página de contacto es ayudar a las personas a contactar con la empresa, siempre habrá alguna que llega a tu página sin intenciones de completar el formulario. Aquí es donde un pequeño CTA secundario puede ser de gran ayuda.

Puede ser algo tan simple como un botón que dirija a tu blog o que dirija a las personas a la demostración de tu producto, la descarga de un manual de instrucciones o un video. El sitio también incluye una CTA en la parte inferior de la página de contacto para una prueba gratuita, lo que resulta sumamente útil para los usuarios que visitan la página y quieren hablar directamente con un representante de ventas.

Ejemplo de página de contacto con llamada a la acción: Pixpa

Imagen de Pixpa

11. PeopleMetrics

A veces lo más simple es lo más relevante. La página de contacto de PeopleMetrics está organizada, bien redactada y cumple exactamente con su objetivo. Saben que la mayoría de los usuarios que visitan su página buscan la manera más fácil y eficiente de ponerse en contacto, y facilitaron esta tarea evitando un diseño cargado.

Ejemplo de página de contacto sencilla pero efectiva: PeopleMetrics

Imagen de PeopleMetrics

12. 9dB

Esta es otra página de contacto con un diseño claro y funcional. Toda la información que necesitas, incluido un formulario breve, se consolida en un espacio pequeño que no luce abarrotado. Además, la empresa ha agregado sus contactos principales en caso de querer llamar directamente o visitar las oficinas. 

Ejemplo de página de contacto con diseño funcional y claro: 9dB

Imagen de 9dB

13. Belmont Village México

La página de contacto de Belmont Village (residencia para personas mayores en México) es muy clara en cuanto a la información que solicita a los clientes. Estos datos facilitan la creación de la base de datos de la empresa para saber quiénes están verdaderamente interesados en contratar sus servicios. 

En cuanto al diseño, cuenta con los colores representativo de la marca e incluyen un mapa y dirección por si las personas desean hacer una visita a la casa de retiro. 

Ejemplo de página de contacto: Belmont Village México

Imagen de Belmont Village México

14. Weifield Group Contracting

La navegación en dispositivos móviles es cada vez más común y Google favorece notablemente a los sitios compatibles con dispositivos móviles en las páginas de resultados de su motor de búsqueda, por eso es importante que todas las páginas en tu sitio, incluida la página de contacto, sean compatibles.

Esto incluye simplificar la navegación, usar formularios cortos y concisos, e incluir botones de CTA grandes que se puedan tocar fácilmente con el pulgar y campos de formulario grandes que sean fáciles de completar en los dispositivos móviles en vez de tener que ampliar la pantalla para llenar los datos.

La página de contacto de Weifield Group es un excelente ejemplo de diseño adaptable y compatibilidad con dispositivos móviles. Compara la versión de escritorio y la versión móvil de su página de contacto, y observa cómo han optimizado cada uno de sus componentes para esta última: el texto es grande, los campos del formulario se pueden completar fácilmente y el botón de CTA es amplio y fácil de tocar; todo esto contribuye a una experiencia móvil óptima.

Esta es la versión de escritorio:

Ejemplo de página de contacto adaptable: Weifield Group Contracting

Imagen de Weifield Group Contracting

Y esta es la versión móvil:

Ejemplo de páginas de contacto versión móvil: Weifield Group Contracting

Ejemplo de página de contacto para celular

Imágenes de Weifield Group Contracting

¿Eres cliente de HubSpot? Si tu sitio web forma parte de un sistema de optimización de contenidos (COS), entonces es apto para dispositivos móviles desde el punto de vista técnico. HubSpot COS usa un diseño adaptable a cualquier dispositivo móvil y pasa la prueba de rastreo del nuevo algoritmo de Google.

15. Survicate

La página de contacto de Survicate es otro ejemplo de diseño simple y atractivo, combinado con texto cordial y amigable. El subtítulo entre la imagen y el formulario lo dice todo: «Hablemos acerca de tu proyecto». Ese tipo de lenguaje conversacional y coloquial es justo el tipo de mensaje que acerca a los visitantes a una marca.

El formulario en sí es simple, con campos y botones de CTA grandes que lo hacen apto para dispositivos móviles. Debajo de esto se encuentra toda la información de contacto típica (dirección de la oficina, número de teléfono, correo electrónico, horario de atención, etc.) en un formato fácil de leer y examinar.

Por último, sus iconos y CTA principal reflejan el color amarillo del logotipo, lo cual es una buena idea para realizar tu formulario. Todos estos detalles conforman un diseño visualmente atractivo.

Ejemplo de página de contacto con lenguaje coloquial: Survicate

Imagen de Survicate

Cómo hacer una página de contacto con HubSpot

Si no cuentas con un diseñador o programador que te ayude en el diseño de tu página de contacto puedes utilizar nuestro creador gratuito de formularios y crearla de una manera fácil y rápida. 

A continuación te compartimos los pasos a seguir: 

1. Accede al creador de formularios desde tu navegador. 

Creador gratuito de formularios de HubSpot

2. Haz clic en el apartado «Comenzar gratis» y crea tu cuenta. 

Cómo utilizar el creador gratuito de formularios: crea tu cuenta

En este apartado tendrás que agregar un poco de información básica, la industria en la que te desarrollas, el dominio de tu sitio y seleccionar cuántas personas trabajan en tu empresa. 

3. Comienza a crear tu formulario 

Una vez que hayas creado tu cuenta, entra al sitio y dirígete a Marketing > Captación de oportunidades de venta > Formularios. 

En la parte superior derecha haz clic en Crear formulario. Luego, en el panel izquierdo, selecciona la opción Formulario regular. En la parte superior derecha, haz clic en Siguiente. 

En la barra lateral izquierda selecciona Plantilla en blanco o Plantilla hecha previamente. La vista previa del formulario podrás verla en el panel derecho. Cuando esto esté listo, da clic en Comenzar y en la parte superior del editor de formularios, haz clic en el icono de lápiz para editar el nombre de tu formulario. 

4. Agrega y edita los campos del formulario

En el panel izquierdo, utiliza la barra de búsqueda para explorar los campos o grupos de propiedad. Para crear una nueva propiedad de contacto, tan solo haz clic en Crear nuevo junto a la barra de búsqueda. 

Cuando esto esté listo, arrastra y suelta los campos en la vista preliminar del formulario para incluirlos; estos pueden colocarse de la forma que creas más óptima, ya sea encima, abajo o junto a otros campos. 

Creador gratuito de formularios de HubSpot: cómo añadir campos

5. Personaliza las opciones del formulario 

En la parte superior haz clic en la pestaña Opciones y personaliza la configuración de tu formulario tanto como creas necesario. Algunas de las cosas que puedes personalizar son las siguientes: 

  • Qué debe suceder luego de que un visitante envía tu formulario. 
  • Opciones de seguimiento. 
  • Envío de notificaciones por correo electrónico.
  • Idioma del formulario y del mensaje de error. 
  • Llenar previamente los campos con valores conocidos. 

6. Da los últimos retoques y haz una vista previa de tu formulario

En la parte superior da clic en la pestaña Estilo y vista preliminar para ajustar lo que consideres necesario. En la opción de Temas podrás seleccionar uno de los cuatro disponibles para los estilos de campo y de botón. 

Cómo crear páginas de contacto con el creador de formularios de HubSpot: vista previa

En Estilo podrás personalizar el ancho, las fuentes y los colores de tu formulario y en Prueba podrás comprobar cómo se le presentará a tus visitantes. 

7. Publica tu formulario 

En la parte superior derecha da clic en Publicar y listo, ya tienes tu propio formulario. 

Eso es todo. Te mostramos algunas de las mejores páginas de contacto que existen. Revisa la página de contacto de tu empresa y comprueba si hay cambios que puedas hacer para brindar a tus visitantes una mejor experiencia, más sencilla, agradable y útil.

Descarga el KIT con los recursos de diseño que necesita todo profesional de Marketing. Diseña materiales increíbles, originales, efectivos y GRATIS.

 New Call-to-action

Publicado originalmente el 02 de febrero de 2021, actualizado el 02 de febrero de 2021

Topics:

Diseño Web