Email signature generator is one of the important parts for your email campaigns. A signature is something which represents your personality. It lets receiver feel a personal connection with the sender.

So,
A basic email signature contains your contact information and information of your business. It should represent who you are, what you do, and how you can be contacted.

Benefits Of Using Email Signatures –

  • It shows your openness to communicate.
  • Conveys professionalism via your emails.
  • Used as a promotion tool for a business, a website/blog, a book, or a social cause.
  • Helps representing your short biography.
  • Also refers as a social networking tool, like a business card.

You can use this HTML Email Signature Generator to create an email signature for your customized Email Template or with HTML Template generated by an Email Builder.


Create Easy Email Signature Demo


For a quick and complete solution to create amazing and stunning email templates, take a sneak peek on our service MailGet.


Create Your Signature From Email Signature Generator –

(i) Fill up the fields of the email signature generator form.

(ii) Copy the signature from the signature demo or you can copy the HTML of signature by clicking on create signature button.

(iii) Now you can use this signature with any of mail service provider such as Gmail, Yahoo, Hotmail, etc.


Adding Signature To Your Mail Service Provider –

In your email service provider, open the email signature settings and copy the signature from the signature preview and paste it into your email service provider’s signature box.


Code Files To Generate Email Signature Generator –

(i) index.php: This file generates the front view of Email generator.

(ii) ajax_php_file.php: This file uploads the pics of the user.

(iii) script.js: This file contains javascript code.

(iv) style.css: This file is used to make some styling.


PHP File:  index.php

<html>
<head>
<title> Email-Signature-Creator</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$("#copy").click(function() {
$("#div2").html($("#div1").html());
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#copy1").click(function() {
var data = $("#div2").html();
$("#abc_data1").text(data);
});
$("#uploadimg").click(function() {
$('#message1').html('upload image');
});
});
</script>
<style>
.msg{
margin-top: 0;
}
#image_preview1{
margin-bottom:5px;
}
.uinfo{
width:410px;
}
#image_preview1{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- popup box modal starts here for upload image -->
<div class="modal fade demo-popup" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3 class="modal-title">upload your image</h3>
</div>
<div class="modal-body">
<P>
<div class="main">
<h1 id="message1">upload image</h1><br/>
<div id="message" align="center"></div>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="selectImage">
<div></div>
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file"/>
</div>
</form>
</div>
</P>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<!-- /.modal-->
<!-- popup box modal ends -->
<!-- popup box modal starts here to show html code -->
<div class="modal fade demo-popup1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3 class="modal-title">Copy HTML Signature</h3>
</div>
<div class="modal-body">
<P>
<div id="abc1">
<pre id="abc_data1"></pre>
</div>
</P>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal-->
<!-- popup box modal ends -->
</div> <!-- /.row -->
</div> <!-- /.container -->
<div id="wholecont">
<div id="main">
<h1><b>Create Easy Email Signatures</b></h1>
<div class="container">
<div class="row">
<div id="div1" align="center" class="col-md-5">

<h2>Your Information</h2>
<hr/>
<div class="row">
<form action="" style="border:none;">
<table class="uinfo">
<div class="row">
<tr>
<div class="col-md-6">
<td><div><b>Name</b></div><input type="text" name="username" onkeyUp="document.getElementById('Uname').innerHTML = this.value" />
</td>
</div>
<div class="col-md-6">
<td>
<div><b>Job Title</b></div><input id="jobtitle" type="text" name="jobtitle" onKeyup="addjobtitle()">
</td>
</div>
</tr>
</div>
<div class="row">
<tr>
<div class="col-md-6"><td>
<div><b>Email</b></div><input id="emailid" type="text" name="emailid" onKeyup="addemailid()"></td></div>
<div class="col-md-6"><td><div><b>Mobile No</b></div><input id="mobileno" type="text" name="mobileno" onKeyup="addmobileno()"></td></div>
</tr>
</div>
<div class="row">
<tr>
<div class="col-md-6">
<td><div><b>Company Name</b></div><input type="text" name="cname" onkeyUp="document.getElementById('companyname').innerHTML = this.value"></td></div>
<div class="col-md-6"><td><div><b>Website</b></div><input id="website" type="text" placeholder="http://www.example.com" name="website" onKeyup="addwebsite()"></td></div>
</tr>
</div>
<div class="row">
<tr>
<div class="col-md-12">
<td colspan="2">
<input type="button" id="uploadimg" class="" data-toggle="modal" data-target=".demo-popup" value="upload image">
</td>
</div>
</tr>
</div>
</table>
<table class="uinfo">
<div class="row">
<tr>
<td><div><b>Address</b></div>
<input type="text" class="inline" name="address" onkeyUp="document.getElementById('address1').innerHTML = this.value">
</td>
</tr>
</div>
<div class="row">
<tr>
<td><div><b>Address Line 2</b></div>
<input type="text" class="inline" name="addressline2" onkeyUp="document.getElementById('addressline2').innerHTML = this.value">
</td>
</tr>
</div>
<div class="row">
<tr>
<td>
<div><b>Facebook Profile Url</b></div>
<input class="inline" id="facebook" type="text" name="facebook" placeholder="https://www.facebook.com/profile.php?id=1000" onKeyup="addfacebook()">
</td>
</tr>
</div>
<div class="row">
<tr>
<td>
<div><b>Twitter Profile Url</b></div>
<input class="inline" id="twitter" type="text" name="twitter" placeholder="https://www.twitter.com/profile" onKeyup="addtwitter()">
</td>
</tr>
</div>
</table>
</form>
</div>
<input type="button" id="copy1" class="" data-toggle="modal" data-target=".demo-popup1" value="Create Signature">
</div>
<div id="div2" class="col-md-7">
<h2>Signature Demo</h2>
<hr/>
<div id="image_preview1">
<img id="previewing1" src="noimage.png" />
</div>
<p class="msg">
<span id="Uname">
</span><span id="jobtitle1"></span>
</p>
<p class="msg">
<a href="" id="emailid1"></a>
<span id="mobileno1"></span>
</p>
<br>
<p class="msg" id="companyname"></p>
<p class="msg" id="address1"></p>
<p class="msg" id="addressline2"></p>
<p class="msg">
<a class="msg" href="" id="website1">
</a>
</p>
<p class="msg">
<a id="fb" href="">
<img id="fbimg" width="16px" style="margin-bottom:2px; border:none; display:none;" height="16px" src="images/facebook.png" alt="Facebook">
</a>
<a id="tw" href="">
<img id="twimg" width="16px" style="margin-bottom:2px; border:none; display:none;" height="16px" src="images/twitter.png" alt="twitter">
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

PHP File: ajax_php_file.php

<?php
if(isset($_FILES["file"]["type"]))
{
$validextensions = array("jpeg", "jpg", "png","JPG","JPEG","PNG");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/JPEG") || ($_FILES["file"]["type"] == "image/JPG") || ($_FILES["file"]["type"] == "image/PNG")
)&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
}
else
{
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
}
else
{
$nme=$_FILES["file"]["name"];
$photo = "newfile_".time().rand(5, 15).".".$nme;
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$photo; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
echo $targetPath;
}
}
}
else
{
echo "Invalid file Size or Type";
}
}
?>

Javascript File:  script.js

 function addjobtitle()
{
var jobtitle = document.getElementById("jobtitle");
var s = " / "+jobtitle.value;
document.getElementById('jobtitle1').innerHTML = s
}
function addemailid()
{
var emailid = document.getElementById("emailid");
var s = emailid.value;
document.getElementById('emailid1').innerHTML= s;
document.getElementById('emailid1').href="mailto:"+s;
}

function addmobileno()
{
var mobileno = document.getElementById("mobileno");
var s = " / "+mobileno.value;
document.getElementById('mobileno1').innerHTML = s
}
function addwebsite()
{
var website = document.getElementById("website");
var s = website.value;
document.getElementById('website1').innerHTML= s;
document.getElementById('website1').href="http://"+s;
}
function addoffice()
{
var office = document.getElementById("office");
var s =office.value;
document.getElementById('office1').innerHTML = s
}
function addfax()
{
var fax = document.getElementById("fax");
if(fax.value)
{
var s = " / "+fax.value;
document.getElementById('fax1').innerHTML = s
}
}
function addfacebook()
{
var facebook = document.getElementById("facebook");
var s =facebook.value;

document.getElementById("fbimg").style.display= "inline";
document.getElementById("fb").href= s;
}
function addtwitter()
{
var twitter = document.getElementById("twitter");
var s =twitter.value;

document.getElementById("twimg").style.display= "inline";
document.getElementById("tw").href=s;
}
$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
$("#message").empty();
$('#loading').show();
$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
if(data=="Invalid file Size or Type")
{
$('#message1').html(data);
$("#message").css("color","red");
$("#message").html("(size should be less then 2 mb)");
}
else{
$('#previewing1').attr('src',data);
$('#message1').html('image uploaded successfully');
$('#image_preview1').css('display', 'inline-block');
/*$('#previewing').attr('src',data);
$('#previewing').attr('src',"upload/DSC_0126.jpg");
$('#previewing').attr('src',"http://localhost/Create-Email-Signature/upload/DSC_0126.jpg");*/
}
}
});
}));
// Function to preview image after validation
$(function() {
$("#file").change(function() {
$("#message").empty(); // To remove the previous error message
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewing').attr('src','noimage.png');
$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
return false;
}
else
{
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$( "#uploadimage" ).submit();
}
});
});
function imageIsLoaded(e) {
$("#file").css("color","green");
$('#image_preview').css("display", "block");
/*$('#previewing').attr('src', e.target.result);*/
$('#previewing').attr('width', '250px');
$('#previewing').attr('height', '230px');
$('#previewing1').attr('width', '81');
$('#previewing1').attr('height', '80');
};
});

CSS File: style.css

@import url(http://fonts.googleapis.com/css?family=Raleway);
h1{
text-align:center;
//color: black;
font-size: 2em;
//margin-left: 15%;
}
#main{
margin: 25px 13%;
font-family: 'Raleway', sans-serif;
}
h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: 0 -40px;
padding: 30px 40px;
color: black;
font-weight: bolder;
font-size: 1.5em;
margin-top: -1px !important;
margin-bottom: -10px !important;
}
hr{
border:0;
margin-left: -40px;
margin-right: -40px;
margin-top: 10px;
margin-bottom: 14px;
border-bottom:1px solid #ccc;
margin-bottom: 30px;*/
}
#div1{
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 0px 40px 0px;
margin-top: 70px;
margin: 50px;
//margin-left: 27%;
background-color: F6F7F6;
}
#div2{
width:450px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 0px 40px 0px;
margin-top: 70px;
margin: 50px;
//margin-left: 27%;
}
input[type=text],input[type=email],input[type=button]{
width:99.5%;
padding: 5px;
margin-top: 0;
margin-bottom: 10px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=button]#uploadimg{
width:99.5%;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
input[type=submit]{
width: 450px;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 12px;
}
#login{
width:550px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 0px 40px 0px;
margin-top: 70px;
margin: 50px;
margin-left: 27%;
}
input[type=text].inline{
width:99.5%;
}
table{
border-spacing: 80% 0;
}
td{
padding-right:6px;
padding-left:6px;
}
#image_preview1{
margin-bottom:5px;
}
input[type=button]#copy1{
width:97%;
padding: 5px;
margin-top: 0;
margin-bottom: 27px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
background-color: #FFBC00;
color: white;
border: 2px solid #FFCB00;
}

tips: Here is the source code of email generator with this blog  just download it and use it.

Note: In above code you must also have to include some bootstrap file such as bootstrap.min.css, bootstrap.min.js.


Conclusion –

I hope that at this point you must be feeling comfortable with generating email signature. Please comment for any query. Keep visiting our website.