Como crear un enlace mailto

enlace mailto

Como crear un enlace mailto es la primera preocupación de cualquier persona al crear su sitio web, esto es debido a que estamos en constante contacto por este medio, pero queremos que este proceso se realice lo más directo posible.

Quién no ha querido contactar con algún sitio web de forma directa sin necesidad de estar redirigiendo a otra web o en casos extremos tener que dirigirnos a nuestro correo para redactarlo.

Es muy importante mantener el contacto con nuestros usuarios, ya sea por enlace de llamada, contacto vía redes sociales, comentarios o el muy utilizado correo electrónico, este último es un medio de mucha utilidad ya que por medio de él podemos transmitir una idea de forma inmediata.

El correo electrónico es un medio que con el tiempo es utilizado por todos, ya que con los móviles inteligentes, cada persona tiene acceso a sus cuentas de e-mail de forma inmediata y constante.

Así que lo mejor que podemos hacer cuando creamos un sitio web es establecer las herramientas para mantenernos en contacto con nuestros usuarios, lo principal es establecer la opción de que puedan enviar un correo electrónico sin necesidad de salir del sitio, asegurando que su estancia sea prolongada.

Hay diferentes opciones para realizarlo, en este artículo nos enfocaremos en darte todas las alternativas para crear un enlace mailto en tu sitio web, si te preguntas ¿debo ser programador experto para hacer esto?, la respuesta es no, no es necesario contar con amplio conocimiento.

Aquí te diremos todo paso a paso, además de que resolveremos todas tus dudas a lo largo de todo el texto pues nos enfocaremos en darte las herramientas para que tengas tu sitio web preparado para la comunicación constante con tus usuarios, así que continua leyendo no te arrepentirás.

  1. Creación de un enlace mailto
  2. Proceso para crear un enlace mailto
  3. Estiliza tu enlace mailto
  4. ¿Cómo dar estilo a tu enlace mailto?
  5. Estilos con HTML y CSS
  6. Darle estilo al enlace mailto con CSS
  7. Utiliza gestores web para crear tu enlace mailto
  8. Agregar enlace de mailto en un CMS
  9. Mantenerse comunicado directamente con tus usuarios 

Creación de un enlace mailto

Existen varias formas de realizar este enlace, lo primero que debes saber es que no es necesario ser un experto en programación web para realizar este procedimiento, solo con tener conocimientos básicos es suficiente.

Otro punto importantes es que el grado de dificultad de esta tarea es muy bajo, ya que son comandos sencillos que varían según sea el tipo de ejecución que desees utilizar, lo importante es que tengas integrado en tu sitio web la opción para que se puedan contactar contigo a través del correo electrónico.

Si te preguntas ¿Qué es mailto?, estás en el sitio adecuado pues aquí disparemos todas tus dudas, mailto es el atributo que se le da dentro de la sintaxis del enlace para hacer una acción en nuestro correo electrónico.

Al momento de programar un enlace este puede ir dirigido a diferentes lugares o ejercer una acción a diferentes sitios, ya que esta etiqueta como tal indica que se está haciendo un enlace, este puede ser a:

  • Otro sitio web.
  • Un fichero dentro del ordenador.
  • Una página dentro del mismo sitio.
  • Llamada telefónica.
  • Imagen.
  • Correo electrónico.
  • Y mucho más.

Es muy útil y por eso mismo es muy utilizada, lo que hace que con el avance cada día sea más fácil usar la sintaxis donde incluya esta etiqueta, además de que recordemos que las páginas web tiene como base el código HTML es por eso que tendrás garantizada la compatibilidad del atributo con el cuerpo del sitio.

Es bueno saber antes de comenzar el procedimiento que existen gestores de contenido web que realizan estos enlaces de una forma rápida y fácil, no tendrás necesidad de ingresar el código, sin embargo siempre es bueno que sepas cada paso del proceso.

Proceso para crear un enlace mailto

Si vamos a utilizar el código HTML para crear un enlace, se usará la etiqueta <a>, pero se usará el atributo correspondiente al e-mail conocido como mailto, dentro de la etiqueta se coloca el correo electrónico y luego el texto que será mostrado dentro del sitio web, quedaría de la siguiente forma:

<a href=»mailto:correo@correo.com»> Texto para hacer clic </a>

Esta simple etiqueta está compuesta por 4 partes, las cuales si no se colocan adecuadamente no van a cumplir la función de manera correcta haciendo que se muestre un mensaje de error, estas partes son:

  • El principio de la etiqueta: <a href= se utiliza para indicar que se va a realizar un enlace y dicha dirección estará ubicada después del símbolo =.
  • La dirección: «mailto:correo@correo.com»> esta dirección estará ubicada luego del símbolo =, irá entre comillas y comenzará con el atributo mailto seguido del correo electrónico al que se hará la acción.
  • Texto del enlace: este texto en el ejemplo fue Texto para hacer clic  pero HTML te da la oportunidad de que este texto pueda ser presentado de diferentes maneras.
  • Cierre de la etiqueta: </a>  no puede faltar pues con él se indica que ya el enlace está listo para ser utilizado.

Así de simple es colocar un enlace mailto dentro de tu código HTML para que aparezca en tu sitio web, solo es el uso de una etiqueta corta y precisa, lo mejor de todo es que este enlace puede ser presentado de diferentes maneras para hacerlo más atractivo para todos los usuarios que ingresen en tu web.

Estiliza tu enlace mailto

Si utilizas un simple enlace puede que llame la atención, pero que desentone con el tipo de sitio que tienes, lo mejor que puedes hacer es estilizar tu enlace mailto para que este sea llamativo y adecuado.

Puede ser colocando un botón, haciendo que cambie de color cuando el cursor pasa sobre él, colocando una imagen y muchas opciones más que harán de tu enlace algo llamativo.

Otro punto que tienes a favor es que si usas un gestor de contenidos o CMS tendrás la opción de agregar cualquier cantidad de botones o ubicar el enlace en el sitio que mejor te parezca, pero no debes exagerar ya que puede llegar a tener el efecto contrario al deseado.

Te daremos algunos tips que te ayudarán para que muestres tú enlace mailto lo mejor posible:

  • Puedes colocarlo en el área de la cabecera para que sea lo primero que vea tu cliente.
  • Por lo general está ubicado en el área del pie de la página junto con la información de tu sitio.
  • Puedes colocarlo al final de algún post especial.
  • Hacer un apartado específico para colocarlo.
  • Crear una página que sea de contacto donde muestres todas las opciones que tienen para contactar contigo.
  • Puedes colocar un botón flotante que aparezca en cada página, así estarás incitando a tus usuarios a hacer clic en él.

Cada una de estas opciones puede ser utilizada rindiendo frutos, está de tu parte saber cuál es la que mejor le conviene a tu sitio, no dudes un segundo que esta herramienta será beneficiosa para ti pues a los usuarios les gusta saber que pueden contactar con los creadores del sitio web donde se encuentran.

¿Cómo dar estilo a tu enlace?

Hay varias opciones, utilizando las hojas de estilo CSS, usando el mismo código HTML o usando las opciones del editor o gestor de contenidos de tu preferencia, en caso de que no seas un programador experto lo más recomendable es utilizar un gestor que te ayude a instalar las opciones que harán de tu web la mejor de todas.

Estas 3 opciones principales que te mostramos serán explicadas detalladamente a lo largo de este artículo, esto es debido a que nos interesa que utilices todas las herramientas que te brinda la web.

Además de que tengas las opciones claras, de esa forma te darás cuenta de que la programación web es más fácil de lo que creías, pues este es el miedo que tienen muchos que desean empezar en el mundo del diseño y desarrollo web..

No puedes tener miedo, nosotros estamos apoyándote con toda la información que necesitas, así que continua leyendo detalladamente lo que tenemos para ti, ya aprendiste cuál es la sintaxis que debe tener la etiqueta de enlace.

También sabes que este tipo de etiquetas no solo es usada para enlazar a un correo electrónico, también es muy utilizada para crear enlaces a web externas, imágenes, llamadas y mucho más.

En este caso estamos totalmente enfocados en lo que es el enlace mailto, a continuación te explicaremos ¿Cómo dar estilo a tu enlace mailto?, para que todos tus usuarios puedan comunicarse contigo.

Estilos con HTML y CSS

Básicamente si deseas que al comento de que hagan clic en el enlace aparezca un mensaje con asunto y una caja de texto tienes la opción de agregar dentro de la etiqueta este atributo, la sintaxis quedaría así:

<a href=»mailto:correo@correo.com?subject=Email%20Subject&body=Email%20Body%20Text»> Texto para hacer clic 

</a>

Lo que se agregó es para colocar el asunto del correo que vendría a ser la parte ?subject=Email%20, lo que le sigue que es 20Subject&body=Email%20Body%20Text es la sintaxis para agregar cuerpo de texto luego de que se coloque el asunto. Debes tener en cuenta esto:

  • Colocar el 20% después de cada palabra para establecer el espacio.
  • Lo que está después de subject= o subject&body= es el texto que será mostrado, dentro de la caja que le aparecerá al usuario.

Si puede que este tipo de código se te haga difícil de asimilar, el beneficio del código HTML es que las etiquetas no van a ver el contenido, lo que quiere decir es que siempre que vayas a utilizarla puedes copiarla exactamente igual, pégala en el código fuente y ver cómo funciona perfectamente.

Solo es cuestión de cambiar el espacio de la dirección y el texto que aparecerá como enlace, ahora ya cambiaste una parte del estilo que se muestra luego de hacer clic en el enlace, ahora solo queda darle un estilo apropiado.

Es conocido por todos que las hojas de estilo CSS van de la mano con el código HTML, estas son utilizadas para dar el mismo estilo a un grupo de etiquetas que contengan los mismos atributos.

Quiere decir que si en mi hoja de estilo coloca que los enlaces aparezcan de color rojo, en el sitio web todo lo que use la etiqueta <a> saldrá de ese color, de esta forma nos ahorramos mucho tiempo al momento de programar un sitio, es como tener cubiertos los pequeños detalles.

Dentro de CSS puedes usar atributos para diferentes opciones de estilo, te mencionaremos que puedes hacer con el estilo para que veas lo que mejor se adapta a ti:

  • Cambiar la fuente: tamaño, estilo, grosor, inclinación, tipo, y ancho.
  • Cambios en el texto: espacio entre letras, alineación, color del texto y dirección del texto.
  • Cambios de estilo fuera del texto: colocación de bordes, cambio de forma de esquinas, color, grosor, y estilo.
  • También puedes: cambiar el margen interno, cambiar margen externo y cambios en la imagen de fondo.

Todo esto lo logras utilizando el código CSS, pero debes siempre tener en cuenta de que los cambios que realices aquí serán aplicados a todas las etiquetas de enlace dentro del sitio web.

Darle estilo al enlace con CSS

Ya te dijimos anteriormente que puedes cambiar ahora te vamos a indicar cómo lo vas a realizar, en el documento donde está el código CSS de tu sitio web solo debes agregar los cambios que deseas añadir para el enlace (los cambios son aplicados a todos los elementos que tengan esa etiqueta).

Sabemos que el enlace se expresa con la etiqueta <a>, es por eso que ella será el objeto de todos los cambios, quiere decir que debes comenzar tu línea de la siguiente manera: 

a {

}

Todo lo que esté dentro de estos símbolos {} representa el cambio en el estilo de cada elemento que tenga la etiqueta <a>, a continuación de { que indica que están abiertos los cambios solo debes colocar los atributos con sus especificaciones.

Comenzaremos dándote un ejemplo del cambio de fuente, en este caso cambiaremos el tipo de fuente a “Arial”, con un tamaño medio, y que aparezca en cursiva, esto se expresaría así:

a {

font-family: Arial;

font-style: italic;

font-size: medium;

}

Luego de cada atributo se debe colocar ; para indicar que se terminó el comando, de esta forma se utiliza para todos los cambios que se van a realizar dentro de esta etiqueta, te mostramos cuáles serán los atributos que puedes utilizar según sean los cambios:

  • Cambios en el texto: 
    • color: color del texto.
    • direction: dirección del texto.
    • letter-spacing: espacio entre caracteres.
    • line-height: espaciado entre líneas.
    • text-align: alineación del texto.
    • text-decoration: decoración del texto.
  • Cambios de estilo fuera del texto: 
    • border: cuatro bordes simultáneamente.
    • border-radius: esquinas redondeadas.
    • border-color: color de los bordes.
    • border-width: grosor de los bordes.
  • También están:
    • margin: cuatro márgenes exteriores simultáneamente.
    • padding: cuatro márgenes interiores simultáneamente.
    • background-color: color de fondo .
    • background-image: imagen de fondo.
    • background-position: posición de la imagen de fondo.

Utilizando cada una de estas propiedades correctamente lograrás darle un estilo único y diferente a cada uno de los enlaces que aparezcan en tu web, de todas maneras puedes indagar más en el mundo de las hojas de estilos te darás cuenta de que esto es solo el principio de todas las opciones que hay.

Puedes realizar cambios indescriptibles, si la programación es tu pasión no te detengas y busca todas las formas que te ofrecen las hojas de estilo para darle tu toque personal al sitio web que estás creando.

Utiliza gestores web para crear tu enlace mailto

Los gestores de sitios web conocidos también como CMS son de gran utilidad para las personas que desean indagar en el mundo de las páginas web pero no poseen un conocimiento técnico a nivel de programación.

Encontraras muchos que te pueden ayudar con el diseño y creación de tu sitio web fácilmente, pues están hechos precisamente para eso, para facilitarte el proceso de creación de tu sitio, los más conocidos son:

  • WordPress.
  • Magento.
  • Drupal.
  • Joomla.
  • Silverstripe.
  • Prestashop.
  • Entre otros.

La ventaja de utilizar un CMS es que tienes todas las opciones a la mano a través de editores, temas y plugin, solo debes escoger con calma cuál es el mejor tema que se adapta a ti.

Además de que a través de estos gestores también puedes contratar el servicio de hosting, si nos ponemos a mencionar todas las ventajas de los CMS un solo artículo no será suficiente.

Sí que vamos a enfocarnos en lo importante que es como añadir un enlace mailto a través de un gestor de contenidos, para esto comencemos desde el principio, al ingresar en un gestor de contenidos debes crear tu usuario y escoger el tema que se adapta al diseño que llevas en mente.

Luego de esto debes instalar un editor que te ayudará a introducir la información adecuadamente si necesidad de ingresar código, ya que lo hace automáticamente, sin embargo también tienes opción de ingresar códigos HTML, CSS y JavaScript, lo que hace que sean muy completos, ¿quieres saber más?, continúa la lectura.

Agregar enlace de mailto en un CMS

Es bueno saber que tienes dos opciones para agregar un enlace al correo electrónico dentro del gestor de sitios web, la primera es agregando el código de HTML y la segunda es con un plugin.

CMS como wordpress tienen diferentes opciones que incluyen el correo electrónico, como la suscripción del usuario al mensaje instantáneo cada vez que sube contenido o el enviar un correo electrónico directamente al creador del sitio web.

Esto es muy fácil de realizar a través de un plugin que es agregado a los widgets del CMS, de esta manera solo con seleccionar esta aplicación lo que debes hacer es indicar que quieres que aparezca, como quieres que aparezca y donde quieres que aparezca.

En pocos y simples pasos podrás estar en constante contacto con tus usuarios y tus usuarios podrán contactarte a través del e-mail. ¿Cómo sé cuál es el plugin adecuado?, sabemos que esta pregunta puede estar rondando tu cabeza y la respuesta es que por cada tema existen plugins programados para ellos.

Además de que siempre por defecto tiene instalada la aplicación del correo electrónico debido a la importancia de mantenerse comunicados, sin embargo también tienes la opción de agregar la etiqueta directo al código, recuerdas la etiqueta:

<a href=»mailto:correo@correo.com?subject=Email%20Subject&body=Email%20Body%20Text»> Texto para hacer clic

</a>

Para hacer esto solo debes ubicar en el editor la pestaña que dice HTML, ya una vez dentro de ella solo debes ingresar el código y ya tu enlace al correo electrónico está creado, ten presente que también puedes ingresar el código CSS de tu preferencia haciendo el mismo procedimiento.

Mantenerse comunicado directamente con tus usuarios 

A lo largo de este artículo te hemos explicado las diferentes formas de añadir un enlace mailto a tu sitio web, esto es porque debes estar al tanto de como poder establecer un contacto constante y directo con tus usuarios.

Esta es la base de la nueva tecnología, que a pesar de estar alejados sentirnos en contacto, nada mejor que este contacto sea a través de un solo clic, facilitando así el proceso de comunicación.

No puedes dejar de lado que el comercio electrónico en todos los sentidos está tomando cada día más fuerza, es por eso que cada vez observamos más sitios interactivos donde los usuarios tienen contacto con los creadores de la web a través de las redes sociales, números telefónicos y correos electrónicos.

El ser humano necesita estar en contacto si es a través de una pantalla, no olvides que desde hace mucho utilizamos nuestros móviles más a menudo que un ordenador, así que lo mejor es establecer contacto a través de un enlace.

Con todas las herramientas que te dimos podrás añadir un enlace y aplicarle el estilo que más te guste para hacerlo llamativo, así cuando hagan clic en él se abrirá automáticamente la ventana de correo electrónico.

Esperamos que este artículo haya sido de vuestro agrado, si tienen alguna duda no duden en escribirnos.

Comparte

NUESTRO BLOG

Artículos similares