La página de contacto de un sitio web NO es una página de relleno. Habitualmente, es a través de esta página donde se producen las conversiones de una web corporativa.
Por este motivo, la página de contacto no puede ser una página más. Si no, que ha de ser una página que transmita credibilidad y de el empujón final al visitante para contactar.
Vamos a ver todos los aspectos que has de tener en cuenta para crear una página de contacto de calidad.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
CLAVES PARA CREAR UNA PÁGINA DE CONTACTO PERFECTA
- 1.- Funciones de la página de contacto de un sitio web
- 2.- Desde donde enlazar la página de contacto en nuestra web
- 3.- Elementos que puede contener la página de contacto
- 4.- Ejemplos de diseños de la página de contacto con la plantilla Divi de Wordpress
- 5.- Cuida la versión móvil de la página de contacto
- 6.- ¿interesa poner el email y/o teléfono en el header de nuestro sitio web?
- 7.- Cómo evitar el Spam del email publicado en la página de contacto
- 8.- Datos de contacto en el footer de la web
- 9.- ¿Es conveniente indexar la página de contacto de la web?
- 10.- ¿Es conveniente poner un mapa en el footer de la web?
- 11.- Añadir el botón de llamada en móviles (clic to call)
1.- Funciones de la página de contacto de un sitio web
La principal funcionalidad de una buena página de contacto es empujar a los visitantes de tu sitio web a contactar contigo.
Es cierto, que existen determinados sitios web como tiendas online y otros, donde las conversiones se realizan a través de la venta online de productos o servicios y la página de contacto solo tiene funciones de atención al cliente. También te puede servir lo aquí expuesto en esos casos, pero en este post nos vamos a centrar más en páginas de contacto de webs corporativas (empresas, autónomos) y blogs.
La página de contacto ha de servir para generar confianza al usuario que facilite la acción de contactar. Por este motivo, debemos diseñarla al detalle y analizar muy mucho los elementos que vamos a incluir en ella.
La página de contacto no deber ser una página más, diseñada en 10 minutos. Debe ser una página estudiada y analizada con detalle y dedicación.
2.- Desde donde enlazar la página de contacto en nuestra web
No es solo importante el diseño y contenido de la página de contacto, sino también es muy importante analizar los lugares de la web desde los cuales pondremos enlaces a dicha página.
En mi opinión, el visitante debe poder acceder a la página de contacto desde cualquier otra página del sitio web. Por este motivo, los lugares más utilizados para poner enlaces a la página de contacto son: el header (cabecera de la web) y el footer (pie de la web). El footer y header se muestra en todas las páginas de la web.
i.- Enlace desde el header: el header o cabecera es un sitio ideal para poner un enlace a la página de contacto. Habitualmente se utiliza el anchor text (texto del enlace): “Contacto” para el enlace, ya que es un anchor text ampliamente reconocido entre los internautas.
A veces en el header o cabecera tenemos varios menús. En la mayoría de las webs corporativas o blogs el enlace a la página de se muestra en el menú principal.
Enlace a página de contacto desde el header o cabecera
Pero también existen sitios web cómo son las tiendas online, cuyo menú principal está reservado a las categorías de la tienda. En estos casos, la página de contacto y resto de páginas corporativas (nosotros, etc.) se colocan en un menú secundario, que habitualmente se coloca en la parte superior.
Enlace a página de contacto desde el menú secundario del header
También puede suceder que queramos destacar una serie de servicios en el menú principal de la web corporativa y tengamos que relegar el enlace a la página de contacto en el menú secundario.
Enlace a página de contacto relegado a un segundo plano
ii.- Enlace desde el footer: en muchas ocasiones se coloca un enlace a la página de contacto desde el footer o parte inferior de la web.
En algunos casos se coloca en vez de el enlace del header, en otros casos, se coloca además del enlace del header.
Enlace a páginas de contacto desde el footer de una web
Si tenemos un menú flotante, es decir, un menú que NO desaparece cuando hacemos scroll hacia abajo en la página, podríamos prescindir del enlace del footer.
Si, por el contrario, no hemos puesto enlace a la página de contacto en el header o el menú situado en dicho header NO es flotante, mi recomendación sería poner un enlace en el footer.
iii.- Otros lugares: además del header y el footer, de manera opcional podremos colocar enlaces a la página de contacto desde entradas, páginas o fichas de productos, en las cuales hagamos algún tipo de mención a la acción de contactar o al servicio de atención al cliente.
Este tipo de enlaces son complementarios a los del header y footer, pero nunca pueden sustituirlos.
3.- Elementos que puede contener la página de contacto
En la página de contacto se pueden utilizar multitud de recursos o elementos que vamos a ir viendo de manera individualizada.
3.1.- Texto de llamada a la acción
Una de las funcionalidades de la página de contacto es conseguir ese empujón definitivo sobre el visitante para que contacte con nosotros. Un texto que llame a la acción puede ser sin duda un punto fundamental de la página de contacto.
El texto puede estar formado por un título y un breve texto. El texto ha de reforzar el mensaje de venta, conectar con el cliente y atraer su atención.
¿Por qué no? Puedes utilizar una pregunta en el título del texto que recuerde al visitante por qué está en tu página y que capture su interés de manera definitiva.
Ejemplo de página de contacto con Texto e imagen
3.2.- Una imagen personal, de calidad profesional
Añadir una imagen nuestra o de alguien de la empresa puede aumentar sensiblemente la confianza del cliente. El cliente percibe que hay alguien de carne y hueso detrás de la empresa esperando para contestar a nuestras consultas.
Es imprescindible utilizar una imagen de calidad, ya que en caso contrario la imagen podría provocar el efecto contrario. Es decir, disminuir la confianza. Tienes un ejemplo en la imagen anterior.
Si no queremos utilizar una imagen nuestra o de nuestro equipo, también podemos utilizar una imagen de un banco de imágenes.
3.3.- Datos de contacto
En la página de contacto habitualmente se ubican datos cómo el número de teléfono, dirección física y email.
No siempre, es necesario contar con todos estos elementos en nuestra página de contacto. Esto va a depender mucho del tipo de web que tengamos y de aplicar un poco el sentido común. No tiene nada que ver los datos de contacto que habitualmente publica un Blogger en su página de contacto con respecto a los que publica una empresa en su web corportativa.
Aunque bien es cierto, que cuantos más datos ofrezcamos mayor será la confianza que transmitamos al visitante.
Aunque esto ha cambiado un poco en los últimos tiempos, el teléfono fijo transmite más confianza que un número de teléfono móvil. Disponer de teléfono fijo y móvil aún transmiten más confianza que disponer solo de uno de ellos.
Desde hace tiempo es posible contratar un número fijo y redireccionarlo a un teléfono móvil, por lo que disponer de un número fijo no debería ser un problema en caso de que queramos contar con uno.
Un email corporativo transmite más confianza que un email tipo Gmail, Hotmail, yahoo, etc. Es decir, un email que incluye el nombre de dominio de nuestra empresa o sitio web transmite más confianza (aunque esto también está cambiando un poco).
Poner nuestro email en la página de contacto casi seguro que provocará que recibamos mucho spam en nuestro buzón de correo. En un apartado más adelante, veremos qué podemos hacer para publicar nuestro email en la web y no recibir spam.
3.4.- Formulario de contacto
El formulario de contacto es una forma de contacto habitual en páginas web. A veces, sustituye a otras formas de contacto y en otras ocasiones las complementa.
Ten en cuenta que cada persona está más predispuesta a contactar de una determinada manera. Personas más introvertidas prefieren el contacto vía email o formulario de contacto, mientras que personas más extrovertidas prefieren el contacto telefónico.
En general, cuantas más formas de contacto ofrezcamos a nuestros clientes más contactos recibiremos.
En algunos negocios habrás visto que sólamente se ofrece el formulario como forma de contacto. Puede ser más habitual en blogueros y autónomos. También sucede que algunas personas para evitar el Spam a su buzón de correo solo publican el formulario de contacto y NO su email.
Para que un formulario sea efectivo debemos limitar el número de campos. Cuantos menos campos tenga el formulario más contactos recibiremos.
El formulario solo debe estar formado por los campos que sean imprescindibles. También debemos estudiar con detenimiento, en función del tipo de negocio, que campos queremos que sean obligatorios y cuáles no.
En principio, con el campo nombre, email y asunto podría ser más que suficiente. En algunas ocasiones es interesante añadir un campo teléfono (opcional u obligatorio), pero esto va a depender mucho del tipo de negocio.
No te olvides de probar el formulario. A veces, por determinadas configuraciones del hosting u otros asuntos, el formulario puede no funcionar.
Si añadimos un Captcha al formulario evitaremos recibir Spam. Asegúrate, que el Captcha no sea demasiado complejo, ya que esto puede provocar que el formulario no sea rellenado por algunas personas. El captcha a modo de suma que incluye el módulo formulario de contacto de la plantilla Divi (que es la plantilla para wordpress que uso y recomiendo) funciona muy bien y es sencillo.
3.5.- Mapa de localización
Es habitual en páginas web incluir un mapa de localización además de la dirección. Habitualmente se utilizan los mapas interactivos de Google Maps.
Si solo ponemos la dirección, y el visitante no conoce la calle en la que estamos ubicados, no sabrá realmente nuestra localización y tendrá que depender de otras aplicaciones para encontrarnos.
Si, por el contrario, incluimos un mapa interactivo de Google Maps, además de la dirección de ubicación, el visitante podrá ver donde estamos localizados visualizando puntos y zonas conocidas de los alrededores y, en definitiva, no solo saber donde estamos sino también saber cómo llegar a nuestra localización.
Habitualmente tendrás que utilizar una API Key de Google Maps para utilizar algún bloque tipo Mapa en WordPress, ya sea a través de un plugin o con un elemento de un page builder.
Yo uso habitualmente el módulo map que incluye la plantilla Divi para insertar un mapa en la página de contacto con WordPress.
Puede ser interesante incluir iconos con enlaces a las redes sociales en las que estamos presentes o en las que está presente nuestra empresa.
Estos enlaces también pueden contribuir a aumentar la confianza del usuario en nuestra empresa y propiciar otras formas de seguir nuestra actividad a través de redes sociales comunes.
La plantilla Divi para wordpress también incluye un módulo para poder añadir iconos de redes sociales.
3.7.- Preguntas frecuentes
En algunas ocasiones y en determinados tipos de negocio, puede ser interesante incluir una serie de preguntas frecuentes o FAQs en la página de contacto.
Este recurso es más habitual en páginas de contacto utilizadas para dar soporte o atención al cliente, que en páginas de contacto puras y duras. Aunque, puede ser interesante en cualquier tipo de web.
Las preguntas frecuentes, en este tipo de páginas de contacto que brindan soporte, sirven para disminuir la carga de consultas relacionados con determinadas cuestiones. Esta disminución se produce porque hay determinadas preguntas que son recurrentes, y de esta manera, quedan respondidas en las preguntas frecuentes evitándose dicha consulta.
3.8.- Tiempo estimado de respuesta
Puedes poner un tiempo estimado de respuesta, para evitar que el cliente que rellena el formulario se haga una idea preconcebida que le pueda crear una mala predisposición hacia nosotros.
Es decir, hay personas que piensan que cuando rellenan un formulario se les va a contestar de manera inmediata. Podría ser el caso, pero también podría no serlo.
Por lo que, especificar un tiempo de respuesta aproximado puede evitar malentendidos y aportar cierta confianza en el visitante.
Por ejemplo, podemos poner: “recibirá una respuesta por parte de nuestro equipo en un plazo aproximado de 24 horas” o el tiempo que consideremos oportuno.
3.9.- Chat online
Hoy en día es bastante habitual encontrar chats online en muchos sitios web. El chat online se suele mostrar en cualquier página del sitio y no solo en la página de contacto. Pero, vamos a hablar de él aquí, ya que es una forma de contacto con el cliente.
El chat online es una forma de contacto muy interesante si somos capaces de tener los recursos necesarios disponibles, que no es más que la posibilidad de disponer de una persona que gestione el chat en un horario determinado.
Para tener un chat online en el que de manara habitual aparecemos desconectados, es mejor no implementar un chat, pues puede provocar un efecto de pérdida de confianza.
4.- Ejemplos de diseños de la página de contacto con la plantilla Divi de WordPress
La plantilla Divi, que es la que recomiendo y utilizo habitualmente, incluye un montón de diseños predefinidos de páginas de contacto que podemos importar en nuestra web.
En el momento de escribir este post, la plantilla Divi cuenta con 518 diseños gratuitos agrupados en 68 packs, que podemos utilizar en las páginas de nuestra web. Además, cada semana se añade un nuevo pack de diseños.
Cada pack contiene diseños para la home, páginas de servicios, página de contacto, página de nosotros, etc. Podemos reutilizar diseños de packs diferentes en las páginas de nuestra web.
En el momento de escribir este post, la plantilla Divi cuenta con 67 diseños diferentes específicos de páginas de contacto.
Para ver los diseños específicos de páginas de contacto escribe: “contact” en la barra de búsqueda que hay en la interface de visualización de diseños de páginas predefinidos como te muestro en la siguiente imagen.
Diseños reutilizables de páginas de contacto que incluye la plantilla Divi
MEGA GÚIA DIVI DESCUENTOS DIVI
Vamos a ver algunos pocos ejemplos de diseños de páginas de contacto que incluye la plantilla Divi. Haz clic en la imagen para ir a la demo del diseño de la página.
5.- Cuida la versión móvil de la página de contacto
La página de contacto es una de las páginas que por naturaleza tiende a ser más visitada a través de dispositivos móviles.
Cuando realizamos una navegación móvil, normalmente, vamos directos al grano y no nos gusta el recargo y el relleno sin motivo. El móvil es una forma de visualización web que se usa muchas veces cuando estamos en movimiento, desplazándonos de un sitio a otro. Por lo que, en muchas ocasiones, con el móvil, accedemos a la página de contacto de empresas que estamos buscando en tiempo real.
Debemos asegurarnos, que en la visualización móvil de la página de contacto se muestra el formulario de contacto y el mapa de situación a anchura completa. De otra manera no se visualizaría correctamente para interactuar con un dispositivo móvil.
Visualización de mapa y formulario en móviles
6.- ¿interesa poner el email y/o teléfono en el header de nuestro sitio web?
Habrás visto que en muchos sitios web aparecen algunos datos de contacto en el header o cabecera.
Habitualmente se muestran en la cabecera o header de la web, elementos de contacto como el email o el número de teléfono.
En mi opinión, y de manera general, para páginas web de empresa me parece correcto e interesante. Ya que el visitante tendrá al alcance de la vista en cualquier página de la web y en un lugar destacado los datos de contacto más relevantes.
La única pega que le veo es el tema del Spam, pero bueno de eso hablaremos en el apartado siguiente.
7.- Cómo evitar el Spam del email publicado en la página de contacto
El spam a nuestro buzón de correo se produce por tener publicado nuestro email en nuestro sitio web. Cuanto mayor sea el número de lugares de nuestra web en el cual tengamos publicado nuestro email mayor será el número de correos tipo spam que recibamos.
Los emails son recogidos por bots (robots) que navegan por internet y van recopilando estos correos en listas, que luego son vendidas a empresas con no demasiados escrúpulos. Estas empresas nos spamean mandándonos emails de temas que no nos interesan y que no hemos solicitado.
Está claro, que la forma más eficaz de acabar con el Spam es NO publicar nuestro email y sustituirlo por un formulario de contacto con Captcha.
Pero también existen diferentes formas de poner freno a estos correos a pesar de publicar nuestro email.
i.- Imagen del email: una opción es añadir una imagen en la cual aparezca la dirección de correo electrónico. Al aparecer la dirección en una imagen los bots no podrán recopilarlo y añadirlo a sus listas.
Este método es muy efectivo para el correo publicado en la página de contacto, footer o páginas de información legal.
ii.- Espacio entre el prefijo y el signo “@”: otra forma consiste en dejar un espacio entre el prefijo del email y el signo “@”. Por ejemplo, en vez de poner info@miweb.es poner info @miweb.es
Esta forma no me convence tanto, ya que también puede provocar que sea copiado de esta forma por personas que quieran realmente contactar y el correo nunca llegue por no estar la dirección correctamente copiada.
Esta forma puede ser útil para el header, donde difícilmente podremos poner una imagen.
Si conoces más formas, coméntalas en los comentarios. Gracias
Otro lugar habitual para incluir los datos de contacto más significativos es el footer o pie de página. Ten en cuenta, que el footer se mostrará en todas las páginas del sitio web.
Por costumbre y norma general, los internautas que acceden a un sitio web buscan los datos de contacto en el header, página de contacto y footer.
Es habitual ver en el footer los datos principales de contacto como: email, teléfono e incluso dirección. Por este motivo, puede ser interesante incluirlos aquí, independientemente de disponer de una página de contacto o de datos en el header.
En WordPress se suele usar un widget de texto para incluir los datos de contacto en un bloque del footer.
9.- ¿Es conveniente indexar la página de contacto de la web?
Por regla general, es conveniente permitir la indexación de una página por parte de Google cuando sea posible que alguien busque dicha página en el buscador.
Si alguien busca una página de nuestra web a través de Google y ésta no está indexada, nunca podrá aparecer en los resultados de búsqueda.
Habitualmente no se indexan páginas como: el aviso legal, política de privacidad, etc.
En el caso de la página de contacto, en mi opinión, si es muy interesante que se permita la indexación de esta página.
No es la primera vez que busco directamente los datos de contacto de una empresa buscando en Google: “contacto + nombre de la empresa”. Por ejemplo, “contacto el pozo”
Por este motivo, y de manera general, mi recomendación es SI permitir la indexación de la página de contacto.
Me parece interesante incluir, de manera general, los datos de contacto en el footer de un sitio web. Por el contrario, NO me parece interesante incluir un mapa interactivo en el footer o pie de la web.
Debemos tener en cuenta que la carga de un mapa de Google es lenta y produce un retardo general en la carga de la página.
En la página de contacto nos lo podemos permitir porque es una página normalmente bastante ligera de recursos y porque es un elemento muy importante de dicha página.
Pero ¿tiene algún sentido retardar la carga de TODAS las páginas de nuestra web para poner un mapa en el footer? En mi opinión, desde luego que NO.
En su lugar, siempre podemos poner un enlace en el footer que vaya a la página de contacto con un anchor text del tipo: “Ver localización” o similar.
11.- Añadir el botón de llamada en móviles (clic to call)
Cómo ya he comentado antes, cuando navegamos con un móvil nos gusta ir mucho más al grano que cuando navegamos a través de PC.
Una opción interesante es añadir un icono en forma de teléfono, que permanezca flotante en la página al hacer scroll y que realice una llamada directamente al pulsar dicho icono en el móvil.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Me parece muy útil y me parece excelente lo detallado del artículo, lo que hace que se diferencie del común que comentan todo por encima.
Hola Rafael.
Me alegro que te haya gustado este post sobre los detalles de una página de contacto
gracias