Generalmente al final de nuestro correos agregamos una firma sencilla o simplemente lo terminamos con un saludos pero tener un firma con información suficiente ayuda a que el destinatario del correo sepa más de nosotros y nuestro trabajo.

Antes de empezar debemos considerar que no todo lo que pongamos en nuestra firma funcionará correctamente en todos los clientes de correo por lo que no podemos emocionarnos con fuentes, transformaciones, efectos de css o plantillas externas por ejemplo por lo que haremos una firma sencilla y usaremos las confiables tablas para hacer un diseño al estilo de la vieja escuela ;), si quieres revisar qué elementos soportan los clientes de correo más comunes puedes consultar CanIEmail.

Creando una firma de correo en HTML

Para este paso podemos guiarnos por alguna firma que hayamos recibido y nos guste o simplemente pensar en qué datos y el formato que le daremos por ejemplo la siguiente:

En este ejemplo solamente se utilizan tablas y las imágenes en svg incrustadas directamente para no tener problemas al momento de ver el correo sin conexión o en caso de que por error borremos las imágenes de nuestro servidor; solamente enlacé algunos puntos básicos como ejemplo, modificando el ejemplo podríamos tener nuestra firma y bastaría con seleccionar el resultado, copiarlo y pegarlo en nuestra firma de GMAIL por ejemplo, pero ahora hagamos más sencillo el proceso ya que hacerlo manualmente nos tomaría tiempo y posiblemente podríamos tener un error, así que solamente tomaremos parte del código como base.

Editando contenido con un formulario y javascript

Ya con nuestro diseño lo hacemos más sencillo y agregamos clases o identificadores que nos ayuden a obtener su información de forma más sencilla con javascript agregamos las siguientes clases por ejemplo:

  • Nombre
  • Puesto
  • Telefono
  • Correo

Pensando con esto que todos los demás datos serán fijos ya que pertenecerían a la empresa, entonces para este ejemplo trabajaremos solo con esos y veremos qué pasa:

Entonces del código que compartimos anteriormente solo tomaremos esta tabla interna quitando las imágenes y estilos para hacerlo más fácil de leer quedando como se ve a continuación:

<table>
        <tbody>
          <tr><td colspan="2"><span>David Miranda</span></td></tr>
          <tr><td colspan="2"><span>Programación y desarrollo</span></td></tr>
          <tr><td></td><td> <span>52 55 5555 5555</span></td></tr>          
          <tr><td></td><td><a href="mailto:correo@algo.com.mx">correo@algo.com.mx</a></td></tr>
        </tbody>
      </table>Lenguaje del código: HTML, XML (xml)

Ya con el código simplificado agregaremos las clases mencionadas arriaba utilizando la etiqueta <span> o agregamos la clase al enlace de acuerdo a donde sea necesaria para poder seleccionarlas después quedando así:

<table>
        <tbody>
          <tr><td colspan="2"><span class="Nombre">David Miranda</span></td></tr>
          <tr><td colspan="2"><span class="Puesto">Programación y desarrollo</span></td></tr>
          <tr><td></td><td> <span class="Telefono">52 55 5555 5555</span></td></tr>          
          <tr><td></td><td><a class="Correo" href="mailto:correo@algo.com.mx">correo@algo.com.mx</a></td></tr>
        </tbody>
      </table>Lenguaje del código: HTML, XML (xml)

Ya con el código que necesitamos agregaremos algunos inputs con los que modificaremos el contenido de nuestra firma, no es necesario que agreguemos el formulario completo ya que solamente utilizaremos los inputs a los cuales les agregaremos un id para identificarlos con javascript y poder hacer cambios directamente en el navegador del visitante quedado algo así:

<label>Nombre Completo</label><br/>
<input type="text" class="form-control" id="Nombre" name="nombrec" placeholder="nombre completo"><br/>
<label>Puesto</label><br/>
<input type="text" class="form-control" id="Puesto" name="puesto" placeholder="puesto"><br/>
<label>Teléfono</label><br/>
<input type="text" class="form-control" id="Telefono" name="Telefono" placeholder="Telefono"><br/>
<label>Correo</label><br/>
<input type="text" class="form-control" id="Correo" name="Correo" placeholder="Correo"><br/>Lenguaje del código: HTML, XML (xml)

Ya con nuestros campos haremos un script que nos permita seleccionar el contenido de nuestra tabla y cambiarlo modificando los inputs en nuestro formulario quedando algo así:

let inputs = document.getElementById('Nombre');
let spans = document.getElementsByClassName("Nombre");

inputs.onkeyup = function() {
for(var i = 0; i < spans.length; i++){
spans.item(i).innerHTML = inputs.value;
}
}Lenguaje del código: JavaScript (javascript)

Esta función podemos utilizarla con la mayoría de los campos compartidos solo haremos un ligero cambio para el caso del correo:

let inputmail = document.getElementById('Correo');
let outmail = document.getElementsByClassName("Correo");
    
input3.onkeyup = function() {
for(var i = 0; i < outs3.length; i++){
    outmail.item(i).innerHTML = inputmail.value;
    outmail.item(i).href = "mailto:"+inputmail.value;
}
}
Lenguaje del código: JavaScript (javascript)

Con esto tenemos la base para que funcione nuestro generador de firmas, solo restaría copiar el código resultante y pegarlo en GMAIL, a continuación les comparto el código funcional en codepen para que puedan modificarlo de acuerdo a sus necesidades:

Espero les sea útil.