Signature

HTML

<h1>
Générateur de signature ENSG pour Zimbra
</h1>
<h3>
1 - Saisissez vos informations :
</h3>
<form id="formulaire">Prénom et NOM :
  <br>
  <input type="text" name="petn" id="petn">
  <br> Informations supplémentaires : (bureau, tel, fax, mobile, etc.)
  <br>
  <textarea name="isup" id="isup"></textarea>
  <br> Adresse email :
  <br>
  <input type="text" name="eadr" id="eadr">
</form>
<h3>
2 - Prévisualisez la signature en temps réel :
</h3>
<div id="code"><table style="background: rgb(243, 243, 243) url(http://ensg.univ-lorraine.fr/fileadmin/templates/site/skin/img/backgrounds/wrap-background.jpg); border: 1px solid rgb(224, 224, 224);"><tbody><tr><td valign="top"><a href="http://ensg.univ-lorraine.fr/" target="_blank" class=""><img title="Site web ENSG" alt="Site web ENSG" style="padding: 4px 0px 4px 4px;" src="http://ensg.univ-lorraine.fr/fileadmin/signature/logo-ensg-web.png"></a><br></td><td><div style="float: left; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; font-stretch: normal; font-size: 13px; line-height: 1.5; font-family: sans-serif; color: rgb(85, 85, 85); padding: 8px 15px 0px;"><strong><span id="nom">Vos Prénom et NOM</span></strong><br><span id="data">Vos Informations<br>sur plusieurs<br>lignes</span><br><a href="mailto:Votre email valide" style="color: rgb(9, 81, 157)" id="email">Votre email valide</a></div><div style="float: left; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 1.5; font-family: sans-serif; color: rgb(146, 146, 146); padding: 8px 15px 0px;"><span id="adresse">Adresse</span><br><a href="http://ensg.univ-lorraine.fr/" target="_blank" style="text-decoration: none;"><img title="Site web ENSG" alt="Site web ENSG" style="padding: 3px 10px 4px 0px;" src="http://ensg.univ-lorraine.fr/fileadmin/signature/web.png"></a><a href="https://fr-fr.facebook.com/ecoledegeologienancy"...

CSS

body {
  background-color: white;
  font-family: sans-serif;
}

#petn,
#eadr {
  width: 50%;
}

#txta,
#isup {
  width: 90%;
  min-height: 100px;
}

JavaScript

$("#adresse").html("École nationale supérieure de géologie<br>2 Rue du Doyen Marcel Roubault - BP 10162<br>54505 Vandœuvre-les-Nancy cedex");
$('#formulaire').bind('keyup keypress change input search', () => {
  $('#nom').text($('#petn').val());
  var infos = $('#isup').val().replace(/(?:\r\n|\r|\n)/g, '<br>');
  $('#data').html(infos);
  $('#email').text($('#eadr').val());
  $('#email').attr("href", "mailto:" + $('#eadr').val());
  $('#txta').val($('#code').html());
});