9 mejores ejemplos de diseño de páginas de contacto en páginas web (2020) + Tutorial creación

¿Está buscando construir la mejor página de Contacto posible en su sitio web?

Una página de contacto puede parecer bastante simple en la superficie, pero en realidad hay una gran cantidad de factores importantes a considerar antes de crear la suya propia!

La página de contacto perfecta le ayudará..

• Consigue más – y MEJOR – pistas
• Reduzca el spam en su bandeja de entrada
• Ahorre tiempo en correos electrónicos de ida y vuelta
• Reducir los argumentos de venta irrelevantes

¿Buscando los mejores ejemplos de páginas de contacto para la inspiración?

Tanto si es la primera vez que se crea un blog como si ya se tiene un sitio web desde hace tiempo, nunca es demasiado tarde para crear la página de contacto perfecta.

Pasaremos directamente a los ejemplos de la página de contacto, pero si desea pasar a los consejos y las mejores prácticas puede utilizar esta tabla de contenido:

¡Comencemos!

Las 10 mejores páginas de contacto en la Web

A veces, con sólo examinar una buena página de Contacto, puede obtener algo de inspiración para ajustar la suya propia, de modo que pueda aumentar las conversiones o evitar la pérdida de un cliente potencial.

Así que echemos un vistazo a 10 de las mejores páginas de Contacto de toda la web.

1. Grammarly

La página de contacto de Grammarly está en el puesto más alto de nuestra lista de las mejores páginas de contacto porque es limpia y despejada y hace obvio que tienes 3 opciones para elegir: Prensa, Soporte o Ventas.

• La prensa le lleva a una selección de comunicados de prensa y medios de comunicación que pueden responder a su consulta. Si no, hay una dirección de correo electrónico de prensa específica para contactar.
• La opción de Soporte te dirige al portal de soporte donde puedes buscar respuestas en la base de conocimientos, contactar con equipos específicos como Cuentas y Facturación, o ir a una página de contacto general.
• Haciendo clic en Ventas le lleva a una nueva página donde tiene que completar un formulario de contacto:

En general, todo es fácil de seguir y el diseño de la página coincide con la marca de la empresa.

2. Moz

La página de contactos de Moz comienza como un elemento de submenú de la página Acerca de. Pero su mensaje es claro «¡Nos encantaría saber de ti!»

A continuación, la dirección de su oficina física (también hay un mapa en la parte inferior de la página) y un botón para hacer clic si desea ponerse en contacto con el equipo de ayuda de la empresa.

Al hacer clic en el botón se accede al formulario de ayuda de contacto, que incluye una selección desplegable en el primer campo para que su consulta pueda ser dirigida al equipo correcto.

¿Quiere crear un desplegable como ese en su propio formulario? Consulta este tutorial paso a paso sobre cómo permitir que los usuarios seleccionen los destinatarios de tus formularios de WordPress.

¡Muéstrame cómo!

Después de eso, hay un par de campos de dirección de correo electrónico para completar, uno en el que prefieres que te contactemos y otro asociado a tu cuenta de Moz. Y por último, hay un campo para introducir los detalles de su solicitud antes de pulsar el botón Enviar.

3. Brandaffair

La página de contacto de Brandaffair es muy diferente. Pero, por otra parte, son una agencia creativa.

Han diseñado un formulario interactivo para rellenar los espacios en blanco:

Hola, mi nombre es [tu nombre] y mi dirección de correo electrónico es [tu correo electrónico] y me gustaría hablar sobre [este proyecto].

En lugar de completar los campos del formulario en una forma típica como hemos visto en los otros ejemplos, recogen la información rellenando los espacios en blanco de una frase.

Lo que es agradable aquí es que Brandaffair ha mantenido el diseño de la página en línea con el resto del sitio y ha facilitado el acceso a toda la información de contacto.

4. Gill Andrews

La consultora web Gill Andrews comienza su Página de Contacto con un mensaje ligeramente irónico que informa a los visitantes del sitio web que pueden utilizar el formulario de contacto o enviarle un correo electrónico:

Es un comodín para los que no les gusta usar formularios. Y dice claramente que suele responder dentro de las 48 horas para que los visitantes sepan a qué atenerse.

Luego hay una nota sobre lo que no le interesa escuchar, como los mensajes de los invitados y el intercambio de enlaces!

Si se encuentra con demasiados mensajes que no quiere o necesita, puede valer la pena hacer algo similar. Aunque no puedes impedir que los visitantes envíen sus preguntas, al menos puedes decirles a qué no vas a responder.

Por ejemplo, mientras que algunos blogs se alegran de recibir entradas de invitados, otros no, así que puedes dejar claro cuál es tu posición.

5. John Espirian

Para obtener el último formulario de contacto corto, consulte la página de contacto de John Espirian donde le pide sólo su nombre, dirección de correo electrónico y mensaje.

Es un recordatorio de no pedir información que no requiera si desea obtener más conversiones de formularios.

Aunque es corto, el formulario encaja con la marca y el negocio de John como redactor técnico. Y para aquellas personas de la «vieja escuela» que prefieren no usar un formulario, él proporciona su dirección de correo electrónico y su número de teléfono debajo del formulario:

6. Yeti

El Yeti tiene una gran página de contacto que comienza con una encantadora imagen escénica, que encaja perfectamente con su marca exterior.

Debajo hay una divertida línea de introducción que también encaja con su marca «Aunque somos buenos con las señales de humo, hay formas más sencillas para que nos pongamos en contacto y respondamos a sus preguntas»

Luego ofrecen 3 opciones de contacto: teléfono, correo electrónico o un simple formulario de contacto.

7. PayPal

La página de contacto de PayPal utiliza opciones basadas en menús para dirigirle al equipo correcto.

Comienzan la página con una línea de bienvenida que establece las expectativas que pueden ayudarle rápidamente «Háblenos de su problema para que podamos ayudarle más rápidamente.»

Entonces usted tiene la opción de buscar su problema o hacer clic en una de las opciones, como Contraseña y acceso a la cuenta o Perfil de la cuenta y configuración, para que su consulta vaya al equipo correcto.

Debajo del formulario inteligente, hay una opción de otras opciones de contacto, incluyendo Chat, Correo electrónico, Teléfono y un Foro de la Comunidad:

De cualquier manera, han cubierto todos los ángulos.

8. Beardbrand

La página de contacto de Beardbrand está en consonancia con el resto de su sitio, donde utilizan un mínimo de blanco y negro para la navegación y las descripciones, y luego dejan que las imágenes de sus productos brillen a todo color.

Es un recordatorio de que no es necesario tener un diseño elaborado y llamativo y que usar un texto simple con mucho espacio en blanco puede ser igual de efectivo, siempre y cuando esté en consonancia con el resto de su sitio.

9. Wonderlass

La página de contacto de Wonderlass comienza con una cálida bienvenida para animarte a que te pongas en contacto con nosotros.

Rápidamente seguido de un «Pero primero…» mensaje.

Debajo, Allison enumera algunas razones por las que no debería ponerse en contacto.

Por ejemplo, explica que no tiene tiempo para dar consejos personalizados a todo el mundo a través de su página de contacto.

En lugar de ello, dirige a los visitantes que buscan consejo para que vean sus podcasts y cursos. Esto es un excelente ahorro de tiempo para ambas partes y establece expectativas desde el principio.

Allison termina su página de contacto con un formulario de contacto donde pide información típica como su nombre, dirección de correo electrónico y mensaje. Pero también hay un cuadro desplegable para seleccionar la razón de su contacto con ella:

Una vez más, esto implica que sólo debes contactar con ella por una de estas razones, y que cualquier otra cosa será ignorada.

Preguntas frecuentes al crear una página de contacto

¿Todavía tiene algunas preguntas antes de empezar a crear su propia página de contacto? En esta sección abordaremos algunas de las preguntas más comunes sobre las páginas de contacto.

¿Qué es exactamente una página de contacto?

Una página de contacto es una de las páginas principales de un sitio web.

Permite a los visitantes ponerse en contacto con el propietario del sitio o con un departamento específico, como el de ventas o el equipo de soporte.

Normalmente incluirá un formulario de contacto para que los visitantes puedan ponerse en contacto fácilmente con los propietarios del sitio web.

¿Por qué es importante la información de contacto en un sitio web?

Las páginas de contacto son típicamente una de las páginas más visitadas de un sitio web, junto con la página de inicio, la página de información y la página de blog.

Una investigación de Komarketing encontró que el 64% de los visitantes quieren ver los detalles de contacto del sitio web cuando llegan a un nuevo sitio.

Tener una página de contacto infunde confianza en que personas reales manejan el sitio y pueden ser contactadas.

Por lo tanto, asegúrese de que su página de contacto sea fácil de encontrar desde su menú (ya sea en la parte superior o inferior de la página) y que se pueda acceder a ella desde cualquier página de su sitio.

¿Qué debería estar en una página de contacto?

Una página de contacto debe proporcionar una manera para que los visitantes se pongan en contacto con usted. Por lo tanto, debe incluir al menos una de las siguientes opciones:

• Una dirección de correo electrónico. Algunos sitios hacen de este un enlace en el que se puede hacer clic, mientras que otros usan texto simple.
• Una dirección física. Algunos sitios también incluyen un mapa que muestra las direcciones.
• Un formulario de contacto en el que los visitantes introducen su nombre, dirección de correo electrónico y su consulta antes de hacer clic en un botón de envío o de entrega. Algunos sitios agregan más campos, pero tenga cuidado de no pedir demasiada información innecesaria.
• Un número de teléfono (o varios números para diferentes departamentos como ventas y soporte). Algunos sitios ahora incluyen números de teléfono en los que se puede hacer clic para que los usuarios puedan marcar directamente desde su teléfono inteligente.
• Un cuadro de mensajes de chat en vivo. Estos son populares en los sitios de comercio electrónico y en los negocios basados en servicios que necesitan responder rápidamente.
• Enlaces a cuentas de medios sociales. A menudo se muestran como iconos o botones para que los visitantes hagan clic.

Es probable que no necesites TODAS esas opciones en tu sitio. Un simple formulario de contacto es perfecto para la mayoría de los sitios.

También es útil para sus visitantes si establece algunas expectativas y les hace saber cuánto tiempo tendrán que esperar típicamente por una respuesta.

¿Qué campos debe incluir en su formulario de contacto?

Cuantos menos campos tenga, más personas rellenarán su formulario.

Para reducir el abandono de formularios, es inteligente pedir sólo la información que se necesita absolutamente. Para muchos blogueros, sólo tendrás que pedir la visita:

1. Nombre
2. Dirección de correo electrónico
3. Mensaje

¡Eso es todo!

Si se da cuenta de que a menudo tiene que hacer las mismas preguntas de seguimiento, o recibe demasiados mensajes irrelevantes, entonces sería inteligente considerar pedir más información por adelantado.

Por ejemplo, usted podría querer eliminar los malos prospectos pidiendo primero su presupuesto, o preguntar a la gente cuándo es el mejor momento para llamarlos por teléfono si necesita llamarlos para hacer un seguimiento.

Esto le ahorrará tiempo a usted y a sus visitantes.

¿Dónde debería poner un formulario de contacto en su página de contacto?

Para facilitar que sus visitantes se pongan en contacto con usted, debe incluir el formulario en la parte superior de la página para que se pueda encontrar fácilmente sin necesidad de desplazarse o buscar.

Su formulario de contacto debe ser lo primero que vean cuando se cargue la página de contacto.

¿Cómo puedo añadir un mapa de Google a mi sitio web?

Esto es fácil de hacer y será muy útil para sus visitantes si tiene un lugar físico que están buscando para visitar.

También le ahorrará tiempo, ya que no tendrá que lidiar con personas que lo contacten para pedirle direcciones.

Aquí hay un tutorial paso a paso sobre cómo mostrar un mapa en su página de contacto.

Esperamos que te sientas inspirado después de ver todas estas geniales páginas de contacto y ya te sientas capacitado para ponerte manos a la obra.

¡Seguimos!

Cómo crear una página de contacto con formulario en HTML y CSS