<html lang="en-ZA" class=" video csspointerevents no-touchevents flexbox objectfit object-fit backgroundcliptext"><head>
<meta charset="UTF-8">
<meta name="twitter:widgets:csp" content="on">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="https://www.saratoga.co.za/xmlrpc.php">
<title>Generate Signature | Saratoga</title>
<link rel="stylesheet" id="wp-block-library-css" href="https://www.saratoga.co.za/wp-includes/css/dist/block-library/style.min.css?ver=5.3.2" type="text/css" media="all">
<link rel="stylesheet" id="rs-plugin-settings-css" href="https://www.saratoga.co.za/wp-content/plugins/revslider/public/assets/css/settings.css?ver=5.4.6.4" type="text/css" media="all">
<style id="rs-plugin-settings-inline-css" type="text/css">
#rs-demo-id {}
</style>
<link rel="stylesheet" id="kallyas-styles-css" href="https://www.saratoga.co.za/wp-content/themes/kallyas/style.css?ver=4.17.5" type="text/css" media="all">
<link rel="stylesheet" id="th-bootstrap-styles-css" href="https://www.saratoga.co.za/wp-content/themes/kallyas/css/bootstrap.min.css?ver=4.17.5" type="text/css" media="all">
<link rel="stylesheet" id="th-theme-template-styles-css" href="https://www.saratoga.co.za/wp-content/themes/kallyas/css/template.min.css?ver=4.17.5" type="text/css" media="all">
<link rel="stylesheet" id="zion-frontend-css" href="https://www.saratoga.co.za/wp-content/themes/kallyas/framework/zion-builder/assets/css/znb_frontend.css?ver=1.0.28" type="text/css" media="all">
<link rel="stylesheet" id="kallyas-child-css" href="https://www.saratoga.co.za/wp-content/themes/kallyas-child/style.css?ver=4.17.5" type="text/css" media="all">
<link rel="stylesheet" id="th-theme-print-stylesheet-css" href="https://www.saratoga.co.za/wp-content/themes/kallyas/css/print.css?ver=4.17.5" type="text/css" media="print">
</head>
<body style="background-color:white;" data-rsssl="1" class="page-template-default page page-id-2448 res1170 kl-follow-menu kl-skin--light" itemscope="itemscope" itemtype="https://schema.org/WebPage">
<div style="overflow: hidden !important;" class="zn_pb_wrapper clearfix zn_sortable_content" data-droplevel="0"><div id="page_header" class="page-subheader maskcontainer--mask4 mask4r page-subheader--custom site-subheader-cst uh_zn_def_header_style eluida4c4407f psubhead-stheader--absolute sh-titles--right sh-tcolor--light">
<div class="bgback" style='background-image: url("https://www.saratoga.co.za/wp-content/uploads/2018/03/Hexagons-010-1920.jpg"); background-repeat: no-repeat; background-position: right bottom; background-size: cover; transform: translate3d(0px, 0px, 0px);'></div>
<div class="th-sparkles"></div>
<div class="ph-content-wrap">
<div class="ph-content-v-center">
<div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="subheader-titles">
<h2 class="subheader-maintitle" itemprop="headline">Saratoga</h2><h4 class="subheader-subtitle" itemprop="alternativeHeadline">Generate email signature</h4> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="kl-mask kl-bottommask kl-mask--mask4 mask4r kl-mask--light">
<svg width="5000px" height="27px" class="svgmask svgmask-right" viewBox="0 0 5000 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-mask4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<path d="M3.63975516e-12,-0.007 L2418,-0.007 L2434,-0.007 C2434,-0.007 2441.89,0.742 2448,2.976 C2454.11,5.21 2479,15 2479,15 L2492,21 C2492,21 2495.121,23.038 2500,23 C2505.267,23.03 2508,21 2508,21 L2521,15 C2521,15 2545.89,5.21 2552,2.976 C2558.11,0.742 2566,-0.007 2566,-0.007 L2582,-0.007 L5000,-0.007 L5000,27 L2500,27 L3.63975516e-12,27 L3.63975516e-12,-0.007 Z" class="bmask-bgfill" filter="url(#filter-mask4)" fill="#f5f5f5" style="fill:#ffffff"></path>
</svg>
</div></div>
<div id="eluid1a3eee38" class="zn_anchor_point "></div>
<section class="zn_section eluid62e85582 section-sidemargins section--no " id="eluid62e85582">
<div class="zn_section_size container zn-section-height--auto zn-section-content_algn--top ">
<div class="row ">
<div class="eluide778ac54 col-md-12 col-sm-12 znColumnElement" id="eluide778ac54">
<div class="znColumnElement-innerWrapper-eluide778ac54 znColumnElement-innerWrapper znColumnElement-innerWrapper--valign-top znColumnElement-innerWrapper--halign-left ">
<div class="znColumnElement-innerContent">
<div class="kl-title-block clearfix tbk--text- tbk--center text-center tbk-symbol--line tbk--colored tbk-icon-pos--after-title eluid4fc9d132 ">
<span class="tbk__symbol "><span></span></span>
</div>
<div style="margin-top: 7%;" class="kl-title-block clearfix tbk--text- tbk--left text-left tbk-symbol-- tbk-icon-pos--after-title eluidabb74176 ">
<form id="inputForm">
<div style="float:left; width:50%">
<label for="fullname">Full name</label>
<input
required
class="zn_form_input zn-field-text form-control kl-fancy-form-input zn_validate_not_empty"
style="width:50%"
type="text"
id="fullname"
placeholder="Enter full name" />
<br/>
<label for="jobposition">Job position</label>
<input
required
class="zn_form_input zn-field-text form-control kl-fancy-form-input zn_validate_not_empty"
style="width:50%"
type="text"
id="jobposition"
placeholder="Enter job title"
/>
<br/>
<label for="cellnumber">Cellphone excl +27 (0)</label>
<input
required
class="zn_form_input zn-field-text form-control kl-fancy-form-input zn_validate_not_empty"
style="width:50%;"
type="text"
id="cellnumber"
placeholder="Enter cellphone number"
/>
<br/>
<input
type="submit"
id="init"
name="init"
value="Generate"
class="zn_contact_submit btn btn-fullcolor btn--rounded"
style="background-color: #00a9e0;"
/>
</div>
<div style="float:left; width:40%">
<label for="cellnumber">Copy the source code below by clicking <a href="" id="copyHTML"> here</a></label>
<textarea style="width:100%; height:30%" id="output">
</textarea>
<br/>
<label>Or select and copy markup below</label>
<br/>
<div id="preview" style="color:black"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="grid-ibx__item grid-ibx__item--type-icon text-center grid-ibx__item-2">
<div class="grid-ibx__item-inner">
<div class="grid-ibx__icon-wrp">
</body>
<script>
var text = `<div><b>{fullName}</b></div><div><br></div><div><b>{jobposition}</b></div><div><br></div><div><font face="Microsoft Sans Serif" size="1">Tel: </font> <font size="1"><a href="tel:+27216584100" target="_blank"><font color="#3d85c6">+27 (0) 21 658 4100</font></a></font> | Cell: <font size="1"><a href="tel:+27{cellnumber}" target="_blank"><font color="#3d85c6">+27 (0) {cellnumber}</font></a></font></div><div><br></div><div> <img id="3833e350-95a6-4793-86fd-dcb12828d2d1" src="http://www.saratoga.co.za:80/wp-content/uploads/2018/03/Saratoga_Email_Signature_2018_Grey.jpg?random=637214199584800975" width="auto"></img></div><div><br></div><div> <font size="1"> 4 Greenwich Grove, Station Rd, Rondebosch, 7700 </font></div><div><a href="http://www.saratoga.co.za" target="_blank"><font color="#3d85c6" size="1"> www.saratoga.co.za </font> </a> <font size="1">| <a href="http://www.saratoga.co.za/confidentiality-notice/" target="_blank"><font color="#3d85c6"> Confidentiality notice </font> </a> </font></div>`;
function GenerateSignature() {
var nameInput = document.getElementById("fullname").value;
var cellnumber = document.getElementById("cellnumber").value;
var jobposition = document.getElementById("jobposition").value;
var preview = document.getElementById("preview");
var inputForm = document.getElementById("inputForm");
var output = document.getElementById("output");
if(inputForm.checkValidity()){
var signature = text.replace("{fullName}", nameInput)
.replace("{cellnumber}",cellnumber)
.replace("{cellnumber}",cellnumber)
.replace("{jobposition}",jobposition);
preview.innerHTML="";
preview.insertAdjacentHTML('beforeend',signature);
output.value= signature;
}else{
alert("Please fill in all fields")
}
}
document.getElementById("init").addEventListener("click", function(event){
event.preventDefault();
GenerateSignature();
});
document.getElementById('copyHTML').addEventListener('click', function(e){
e.preventDefault();
var preview = document.getElementById("output").select();
document.execCommand('copy');
alert("copied to clipboard..")
});
</script>
</html>