├── images
    ├── vimeo.png
    ├── facebook.png
    ├── linkedin.png
    ├── twitter.png
    ├── header_bg.jpg
    ├── instagram.png
    ├── github_logo.png
    └── select-arrow.png
├── README.md
├── style.css
└── index.php


/images/vimeo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/vimeo.png


--------------------------------------------------------------------------------
/images/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/facebook.png


--------------------------------------------------------------------------------
/images/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/linkedin.png


--------------------------------------------------------------------------------
/images/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/twitter.png


--------------------------------------------------------------------------------
/images/header_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/header_bg.jpg


--------------------------------------------------------------------------------
/images/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/instagram.png


--------------------------------------------------------------------------------
/images/github_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/github_logo.png


--------------------------------------------------------------------------------
/images/select-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattlitzinger/Email_Signature_Generator/HEAD/images/select-arrow.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Email Signature Generator
 2 | Create and manage unified email signatures for your entire team. Change the options in `index.php` to fit you company or organization. 
 3 | 
 4 | Demo: <http://projects.mlitzinger.com/demos/email-signature/> 
 5 | 
 6 | Options include:
 7 | - Company name, URL and logo
 8 | - Email domain
 9 | - Three design colors
10 | - Social Links: Facebook, Twitter, Instagram, Vimeo and LinkedIn
11 | - Multiple mailing addresses
12 | - Sample data


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
  2 | 
  3 | /* ========================= */
  4 | 
  5 | *{ margin: 0; padding: 0; border: none; vertical-align: top; }
  6 | 
  7 | body{ 
  8 | 	font: normal 13px/20px 'Lato', Arial, sans-serif; 
  9 | 	background: #f3f3f3; 
 10 | 	color: #888;
 11 | 	-webkit-font-smoothing: antialiased;
 12 | }
 13 | 
 14 | /* ========================= */
 15 | 
 16 | a{ color: #444; text-decoration: none; }
 17 | a:hover{ text-decoration: underline; }
 18 | 
 19 | strong { font-weight: bold; }
 20 | 
 21 | h1{
 22 | 	width: 600px;
 23 | 	font: 300 42px/1 'Lato', Arial, sans-serif;
 24 | 	color: #fff;
 25 | 	letter-spacing: -1px;
 26 | 	/*text-transform: uppercase;*/
 27 | 	margin: 0 auto;
 28 | }
 29 | 
 30 | ol, ul{
 31 | 	padding-bottom: 14px;
 32 | }
 33 | 
 34 | ul{
 35 | 	text-align: center;
 36 | }
 37 | 
 38 | ol li{
 39 | 	margin-left: 20px;
 40 | 	padding-left: 8px;
 41 | }
 42 | 
 43 | .contact-details tr td:first-child{
 44 | 	vertical-align: middle;
 45 | }
 46 | 
 47 | .contact-details .email-user{
 48 | 	width: 51.5%;
 49 | 	display: inline-block;
 50 | 	margin-right: 1%;
 51 | }
 52 | 
 53 | .contact-details .email-domain{
 54 | 	font: normal 16px/16px 'Lato', Arial, sans-serif;
 55 | 	display: inline-block;
 56 | 	margin-top: 14px;
 57 | 	vertical-align: middle;
 58 | }
 59 | 
 60 | form{
 61 | 	width: 600px;
 62 | 	margin: 26px auto;
 63 | 	padding-bottom: 15px;
 64 | }
 65 | 
 66 | form label{
 67 | 	font: bold 14px/14px 'Lato', Arial, sans-serif;
 68 | 	color: #888;
 69 | }
 70 | 
 71 | form select{
 72 | 	width: 100%;
 73 | 	font: normal 16px/19px 'Lato', Arial, sans-serif;
 74 | 	color: #aaa;
 75 | 	background: #fff url('images/select-arrow.png') 97.5% center no-repeat;
 76 | 	border: 1px solid #ccc;
 77 | 	-webkit-border-radius: 0;
 78 | 	-mox-border-radius: 0;
 79 | 	border-radius: 0;
 80 | 	margin: 7px 0;
 81 | 	padding: 6px 26px 5px 16px;
 82 | 	-webkit-box-sizing: border-box;
 83 | 	-moz-box-sizing: border-box;
 84 | 	box-sizing: border-box;
 85 | }
 86 | 
 87 | form select:focus{
 88 | 	color: #444;
 89 | 	border: 1px solid #999;
 90 | }
 91 | 
 92 | form input[type="text"]{
 93 | 	width: 100%;
 94 | 	font: normal 16px/1 'Lato', Arial, sans-serif; 
 95 | 	color: #aaa;
 96 | 	background: #fff;
 97 | 	border: 1px solid #ccc;
 98 | 	margin: 7px 0;
 99 | 	padding: 6px 14px;
100 | 	-webkit-box-sizing: border-box;
101 | 	-moz-box-sizing: border-box;
102 | 	box-sizing: border-box;
103 | }
104 | 
105 | form input[type="submit"]{
106 | 	font: 300 20px/1 'Lato', Arial, sans-serif; 
107 | 	color: #fff;
108 | 	/*text-transform: uppercase;*/
109 | 	letter-spacing: -1px;
110 | 	-webkit-font-smoothing: antialiased;
111 | 	background: #444;
112 | 	padding: 12px 16px 14px;
113 | 	float: right;
114 | 	cursor: pointer;
115 | }
116 | 
117 | form input[type="submit"]:hover,
118 | form input[type="submit"]:focus{
119 | 	background: #333;
120 | }
121 | 
122 | form select,
123 | form input[type="text"]{
124 | 	display: block;
125 | 	-webkit-appearance: none;
126 | 	   -moz-appearance: none;
127 | 			appearance: none;
128 | }
129 | 
130 | form input[type="text"]:focus{
131 | 	color: #444;
132 | 	border: 1px solid #999;
133 | }
134 | 
135 | .page-header{
136 | 	background: #111 url(images/header_bg.jpg) repeat top left;
137 | 	border-bottom: 4px solid #a7a7a7;
138 | 	box-shadow: inset 1px 0px 14px #000;
139 | 	padding: 56px 0 30px;
140 | }
141 | 
142 | .signature-preview{
143 | 	width: 530px; 
144 | 	font-size: 12px;
145 | 	background: #fff;
146 | 	border: 1px solid #ccc;
147 | 	margin: 25px auto 15px; 
148 | 	padding: 26px; 
149 | 	overflow: hidden;
150 | 
151 | 	background-color: #fff; 
152 | 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
153 | 	background-image: -webkit-linear-gradient(top, #fff, #efefef); 
154 | 	background-image:    -moz-linear-gradient(top, #fff, #efefef);
155 | 	background-image:     -ms-linear-gradient(top, #fff, #efefef);
156 | 	background-image:      -o-linear-gradient(top, #fff, #efefef);
157 | }
158 | 
159 | .client-links li{
160 | 	width: 38%;
161 | 	text-align: center;
162 | 	display: inline-block;
163 | 	margin: 5px 0.85%;
164 | }
165 | 
166 | .client-links li a{
167 | 	width: 100%;
168 | 	font: 300 20px/1 'Lato', Arial, sans-serif; 
169 | 	color: #fff;
170 | 	/*text-transform: uppercase;*/
171 | 	letter-spacing: -1px;
172 | 	-webkit-font-smoothing: antialiased;
173 | 	background: #777;
174 | 	display: block;
175 | 	padding: 7px 0 9px;
176 | 	cursor: pointer;
177 | }
178 | 
179 | .client-links li a:hover{
180 | 	text-decoration: none;
181 | 	background: #666;
182 | }
183 | 
184 | :focus{ outline: 0; }


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 	// Modify the values in $options to fit your company/organization.
  3 | 	$options = array(
  4 | 		'company_name' => 'GitHub',
  5 | 		'company_url'  => 'http://github.com', 
  6 | 		'email_domain' => 'gitub.com', // Do not prepend with http://
  7 | 		'logo_url'     => 'https://raw.githubusercontent.com/ltzngr/Email_Signature_Generator/master/images/github_logo.png',  // Must be an absolute path
  8 | 		'colors'       => array(
  9 | 			'primary'   => '#020202', // Name, emal address, phone and address
 10 | 			'secondary' => '#bd5f35', // Title/position
 11 | 			'tertiary'  => '#b4b4b4'  // Horizontal border
 12 | 		),
 13 | 		'social_urls' => array(
 14 | 			'facebook'  => array(
 15 | 				'https://www.facebook.com/github', // Hide by setting this to an empty string
 16 | 				'https://raw.githubusercontent.com/ltzngr/Email_Signature_Generator/master/images/facebook.png'  // Must be an absolute path
 17 | 			),
 18 | 			'twitter'   => array(
 19 | 				'https://twitter.com/github', // Hide by setting this to an empty string
 20 | 				'https://raw.githubusercontent.com/ltzngr/Email_Signature_Generator/master/images/twitter.png'  // Must be an absolute path
 21 | 			),
 22 | 			'instagram' => array(
 23 | 				'http://instagram.com/github', // Hide by setting this to an empty string
 24 | 				'https://raw.githubusercontent.com/ltzngr/Email_Signature_Generator/master/images/instagram.png'  // Must be an absolute path
 25 | 			),
 26 | 			'vimeo'     => array(
 27 | 				'https://vimeo.com/github', // Hide by setting this to an empty string
 28 | 				'https://raw.githubusercontent.com/ltzngr/Email_Signature_Generator/master/images/vimeo.png'  // Must be an absolute path
 29 | 			),
 30 | 			'linkedin'  => array(
 31 | 				'http://www.linkedin.com/company/github', // Hide by setting this to an empty string
 32 | 				'https://raw.githubusercontent.com/ltzngr/Email_Signature_Generator/master/images/linkedin.png'  // Must be an absolute path
 33 | 			)
 34 | 		),
 35 | 		'address_list' => array(
 36 | 			array( 'United States', '88 Colin P Kelly Jr St, San Francisco, CA 94107, USA' ),
 37 | 			array( 'Australia', 'Homemaker City, Castlereagh Street, Sydney NSW 2000, Australia' ),
 38 | 			array( 'Japan', '1-10-５ Akasaka, Minato, Tokyo 107-0052, Japan' ),
 39 | 			array( 'United Kingdom', '24 Grosvenor Square, London W1A 2LQ, United Kingdom' )
 40 | 		),
 41 | 		'hide_address_field' => false,
 42 | 		'sample_data' => array(
 43 | 			'full_name' => 'Matt Litzinger',
 44 | 			'position'  => 'Front-End Web Developer',
 45 | 			'email_address'  => 'matt.litzinger@github.com',
 46 | 			'phone_number'  => '(000) 000-0000'
 47 | 		)
 48 | 	);
 49 | ?>
 50 | 
 51 | <?php if( $_POST['create-signature'] ) : 
 52 | 
 53 | 	$full_name = $_POST['full-name'];
 54 | 	$position = $_POST['position'];
 55 | 	$country = $_POST['country'];
 56 | 	$address = $_POST['mailing-address'];
 57 | 	$email_address = $_POST['email'];
 58 | 	$primary_number_prefix = $_POST['primary-number-type'];
 59 | 	$secondary_number_prefix = $_POST['secondary-number-type'];
 60 | 	$primary_number = $_POST['primary-number'];
 61 | 	$secondary_number = $_POST['secondary-number'];
 62 | ?>
 63 | 
 64 | <!-- EMAIL SIGNATURE OUTPUT -->
 65 | <table style="width:550px; font-size:11px; font-family:Arial; margin:0; padding:0;">
 66 | 	<tr>
 67 | 		<td style="border-bottom: 1px solid <?php echo $options['colors']['tertiary']; ?>; padding-bottom: 14px;">
 68 | 			<h2 id="full-name" style="font:bold 18px/22px Arial, sans-serif; letter-spacing:-1px; text-transform:uppercase; color:<?php echo $options['colors']['primary']; ?>; margin:0; padding:0;"><?php echo $full_name; ?></h2>
 69 | 			<h3 id="position" style="font:bold 14px/16px Arial, sans-serif; letter-spacing:-1px; text-transform:uppercase; color:<?php echo $options['colors']['secondary']; ?>; margin:0; padding:0;"><?php echo $position; ?></h3>
 70 | 		</td>
 71 | 	</tr>
 72 | 	<tr>
 73 | 		<td>
 74 | 			<a style="width:125px;; margin:16px 0 8px; display:block;" href="<?php echo $options['company_url']; ?>" target="_blank" title="<?php echo $options['company_name']; ?>">
 75 | 				<img src="<?php echo $options['logo_url']; ?>" alt="<?php echo $options['company_name']; ?>" width="125px;" />
 76 | 			</a>
 77 | 		</td>
 78 | 	</tr>
 79 | 	<tr>
 80 | 		<td colspan="2">
 81 | 			<address id="email-address" style="font: normal 10px/15px Arial, sans-serif; color:<?php echo $options['colors']['primary']; ?>;">
 82 | 				<?php
 83 | 					if($email_address != ''){
 84 | 						$print = 'Email: <a href="mailto:'.$email_address.'@'. $options['email_domain'] .'" target="_blank" style="color:'. $options['colors']['primary'] .'; text-decoration:none;">'.$email_address.'@'. $options['email_domain'] .'</a>';
 85 | 						echo $print;
 86 | 					}
 87 | 				?>
 88 | 			</address>
 89 | 			<address style="font: normal 10px/15px Arial, sans-serif; color:<?php echo $options['colors']['primary']; ?>;">
 90 | 				<?php
 91 | 					if($secondary_number != ''){
 92 | 						$print = $primary_number_prefix.': '.$primary_number.' | '.$secondary_number_prefix.': '.$secondary_number;
 93 | 					}
 94 | 					else{
 95 | 						$print = $primary_number_prefix.': '.$primary_number;
 96 | 					}
 97 | 					echo $print;
 98 | 				?>
 99 | 			</address>
100 | 			<?php if( !$options['hide_address_field'] ) : ?>
101 | 				<address style="font: normal 10px/15px Arial, sans-serif; color:<?php echo $options['colors']['primary']; ?>;">
102 | 					<?php 
103 | 						if($address != ''){
104 | 							echo $address;
105 | 						}
106 | 					?>
107 | 				</address>
108 | 			<?php endif; ?>
109 | 		</td>
110 | 	</tr>
111 | 	<tr>
112 | 		<td style="padding-top: 10px;">
113 | 			<?php if( $options['social_urls']['facebook'][0] != '' ) : ?>
114 | 				<a href="<?php echo $options['social_urls']['facebook'][0]; ?>" target="_blank" title="Facebook" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
115 | 					<img src="<?php echo $options['social_urls']['facebook'][1]; ?>" alt="Facebook" width="18px" height="18px" />
116 | 				</a>
117 | 			<?php endif; ?>
118 | 			<?php if( $options['social_urls']['twitter'][0] != '' ) : ?>
119 | 				<a href="<?php echo $options['social_urls']['twitter'][0]; ?>" target="_blank" title="Twitter" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
120 | 					<img src="<?php echo $options['social_urls']['twitter'][1]; ?>" alt="Twitter" width="18px" height="18px" />
121 | 				</a>
122 | 			<?php endif; ?>
123 | 			<?php if( $options['social_urls']['instagram'][0] != '' ) : ?>
124 | 				<a href="<?php echo $options['social_urls']['instagram'][0]; ?>" target="_blank" title="Instagram" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
125 | 					<img src="<?php echo $options['social_urls']['instagram'][1]; ?>" alt="Instagram" width="18px" height="18px" />
126 | 				</a>
127 | 			<?php endif; ?>
128 | 			<?php if( $options['social_urls']['vimeo'][0] != '' ) : ?>
129 | 				<a href="<?php echo $options['social_urls']['vimeo'][0]; ?>" target="_blank" title="Vimeo" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
130 | 					<img src="<?php echo $options['social_urls']['vimeo'][1]; ?>" alt="Vimeo" width="18px" height="18px" />
131 | 				</a>
132 | 			<?php endif; ?>
133 | 			<?php if( $options['social_urls']['linkedin'][0] != '' ) : ?>
134 | 				<a href="<?php echo $options['social_urls']['linkedin'][0]; ?>" target="_blank" title="LinkedIn" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
135 | 					<img src="<?php echo $options['social_urls']['linkedin'][1]; ?>" alt="LinkedIn" width="18px" height="18px" />
136 | 				</a>
137 | 			<?php endif; ?>
138 | 		</td>
139 | 	</tr>
140 | </table>
141 | 
142 | <?php else : ?>
143 | <!DOCTYPE HTML>
144 | <head>
145 | 	<meta charset="utf-8">
146 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
147 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
148 | 	<title>Email Signature Generator</title>
149 | 
150 | 	<link rel="stylesheet" href="style.css" type="text/css" />
151 | </head>
152 | <body>
153 | 	<div class="page-header">
154 | 		<h1>Email Signature Generator</h1>
155 | 	</div>
156 | 
157 | 	<!-- EMAIL SIGNATURE DETAILS -->
158 | 	<form id="email-signature-form" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" target="_blank" autocomplete="off">
159 | 		<br>
160 | 		<p>Please use the form below to create your email signature. Follow the instructions at the bottom of this page to add the signature into your email client. The <strong>*</strong> symbol denotes a required field.</p><br>
161 | 
162 | 		<table class="contact-details" width="100%" cellspacing="8" style="margin: 0 auto;">
163 | 			<tr>
164 | 				<td width="200px"><label for="full-name">Full Name *</label></td>
165 | 				<td colspan="2"><input type="text" name="full-name" /></td>
166 | 			</tr>
167 | 			<tr>
168 | 				<td><label for="position">Title/Position *</label></td>
169 | 				<td colspan="2"><input type="text" name="position" /></td>
170 | 			</tr>
171 | 			<?php if( !$options['hide_address_field'] ) : ?>
172 | 				<tr>
173 | 					<td><label for="country">Country *</label></td>
174 | 					<td colspan="2">
175 | 						<select name="country">
176 | 							<option selected disabled>-- Select --</option>
177 | 							<?php foreach( $options['address_list'] as $address ) : ?>
178 | 								<option value="<?php echo $address[0]; ?>"><?php echo $address[0]; ?></option>
179 | 							<?php endforeach; ?>
180 | 						</select>
181 | 						<input name="mailing-address" type="hidden" value="" />
182 | 					</td>
183 | 				</tr>
184 | 			<?php endif; ?>
185 | 			<tr>
186 | 				<td><label for="email">Email Address *</label></td>
187 | 				<td colspan="2">
188 | 					<input class="email-user" type="text" name="email" maxlength="50" />
189 | 					<span class="email-domain">@<?php echo $options['email_domain']; ?></span>
190 | 				</td>
191 | 			</tr>
192 | 			<tr>
193 | 				<td><label for="primary-number">Primary Phone *</label></td>
194 | 				<td width="95px">
195 | 					<select name="primary-number-type" style="background-position: 92% center;">
196 | 						<option value="Phone" selected>Phone</option>
197 | 						<option value="Office">Office</option>
198 | 						<option value="Mobile">Mobile</option>
199 | 						<option value="Fax">Fax</option>
200 | 					</select>
201 | 				</td>
202 | 				<td><input type="text" name="primary-number" /></td>
203 | 			</tr>
204 | 			<tr>
205 | 				<td><label for="secondary-number">Secondary Phone</label></td>
206 | 				<td width="95px">
207 | 					<select name="secondary-number-type" style="background-position: 92% center;">
208 | 						<option value="Phone">Phone</option>
209 | 						<option value="Office">Office</option>
210 | 						<option value="Mobile" selected>Mobile</option>
211 | 						<option value="Fax">Fax</option>
212 | 					</select>
213 | 				</td>
214 | 				<td><input type="text" name="secondary-number" maxlength="30" /></td>
215 | 			</tr>
216 | 		</table>
217 | 
218 | 		<!-- EMAIL SIGNATURE PREVIEW -->
219 | 		<div class="signature-preview">
220 | 			<table style="width:100%;">
221 | 				<tr>
222 | 					<td style="border-bottom: 1px solid <?php echo $options['colors']['tertiary']; ?>; padding-bottom: 14px;">
223 | 						<h2 id="full-name" style="font:bold 18px/22px Arial, sans-serif; letter-spacing:-1px; text-transform:uppercase; color:<?php echo $options['colors']['primary']; ?>; margin:0; padding:0;"><?php echo $options['sample_data']['full_name']; ?></h2>
224 | 						<h3 id="position" style="font:bold 14px/16px Arial, sans-serif; letter-spacing:-1px; text-transform:uppercase; color:<?php echo $options['colors']['secondary']; ?>; margin:0; padding:0;"><?php echo $options['sample_data']['position']; ?></h3>
225 | 					</td>
226 | 				</tr>
227 | 				<tr>
228 | 					<td>
229 | 						<a style="width:125px; margin:16px 0 8px; display:block;" href="<?php echo $options['company_url']; ?>" target="_blank" title="<?php echo $options['company_name']; ?>">
230 | 							<img src="<?php echo $options['logo_url']; ?>" alt="<?php echo $options['company_name']; ?>" width="125px" />
231 | 						</a>
232 | 					</td>
233 | 				</tr>
234 | 				<tr>
235 | 					<td colspan="2">
236 | 						<address id="email-address" style="font: normal 10px/15px Arial, sans-serif; color:<?php echo $options['colors']['primary']; ?>;">
237 | 							<?php echo 'Email: ' . $options['sample_data']['email_address']; ?>
238 | 						</address>
239 | 						<address id="phone-number" style="font: normal 10px/15px Arial, sans-serif; color:<?php echo $options['colors']['primary']; ?>;">
240 | 							<?php echo 'Phone: ' . $options['sample_data']['phone_number']; ?>
241 | 						</address>
242 | 						<?php if( !$options['hide_address_field'] ) : ?>
243 | 							<address id="address" style="font: normal 10px/15px Arial, sans-serif; color:<?php echo $options['colors']['primary']; ?>">
244 | 								<?php echo $options['address_list'][0][1]; ?>
245 | 							</address>
246 | 						<?php endif; ?>
247 | 					</td>
248 | 				</tr>
249 | 				<tr>
250 | 					<td style="padding-top: 10px;">
251 | 						<?php if( $options['social_urls']['facebook'][0] != '' ) : ?>
252 | 							<a href="<?php echo $options['social_urls']['facebook'][0]; ?>" target="_blank" title="Facebook" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
253 | 								<img src="<?php echo $options['social_urls']['facebook'][1]; ?>" alt="Facebook" width="18px" height="18px" />
254 | 							</a>
255 | 						<?php endif; ?>
256 | 						<?php if( $options['social_urls']['twitter'][0] != '' ) : ?>
257 | 							<a href="<?php echo $options['social_urls']['twitter'][0]; ?>" target="_blank" title="Twitter" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
258 | 								<img src="<?php echo $options['social_urls']['twitter'][1]; ?>" alt="Twitter" width="18px" height="18px" />
259 | 							</a>
260 | 						<?php endif; ?>
261 | 						<?php if( $options['social_urls']['instagram'][0] != '' ) : ?>
262 | 							<a href="<?php echo $options['social_urls']['instagram'][0]; ?>" target="_blank" title="Instagram" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
263 | 								<img src="<?php echo $options['social_urls']['instagram'][1]; ?>" alt="Instagram" width="18px" height="18px" />
264 | 							</a>
265 | 						<?php endif; ?>
266 | 						<?php if( $options['social_urls']['vimeo'][0] != '' ) : ?>
267 | 							<a href="<?php echo $options['social_urls']['vimeo'][0]; ?>" target="_blank" title="Vimeo" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
268 | 								<img src="<?php echo $options['social_urls']['vimeo'][1]; ?>" alt="Vimeo" width="18px" height="18px" />
269 | 							</a>
270 | 						<?php endif; ?>
271 | 						<?php if( $options['social_urls']['linkedin'][0] != '' ) : ?>
272 | 							<a href="<?php echo $options['social_urls']['linkedin'][0]; ?>" target="_blank" title="LinkedIn" style="text-align: center; display: inline-block; margin: 0px 8px 0 0;">
273 | 								<img src="<?php echo $options['social_urls']['linkedin'][1]; ?>" alt="LinkedIn" width="18px" height="18px" />
274 | 							</a>
275 | 						<?php endif; ?>
276 | 					</td>
277 | 				</tr>
278 | 			</table>
279 | 		</div>
280 | 
281 | 		<table width="100%" cellspacing="8" style="padding-top:20px;">
282 | 			<tr>
283 | 				<td width="65%">
284 | 					<p>In the new window, press <strong>CTL + A</strong> (Windows) or <strong>CMD + A</strong> (Mac) to select the content. <strong>Copy/paste</strong> this content into your email client using one of the links listed below.<p>
285 | 				</td>
286 | 				<td width="35%">
287 | 					<input type="submit" name="create-signature" value="Create Signature" />
288 | 				</td>
289 | 			</tr>
290 | 			<tr>
291 | 				<td colspan="2">
292 | 					<br><br>
293 | 					<ul class="client-links">
294 | 						<li><a href="http://mydesignpad.com/how-to-install-html-email-signature-for-google-gmail/" target="_blank">Gmail</a></li>
295 | 						<li><a href="http://mydesignpad.com/how-to-install-html-email-signature-for-microsoft-outlook-2010-windows/" target="_blank">Outlook</a></li>
296 | 						<li><a href="http://mydesignpad.com/create-a-html-email-signature-for-mac-os-x-mountain-lion-10-8/" target="_blank">Mac Mail</a></li>
297 | 						<li><a href="http://mydesignpad.com/how-to-create-complex-html-email-signatures-for-mozilla-thunderbird/" target="_blank">Thunderbird</a></li>
298 | 					</ul>
299 | 				</td>
300 | 			</tr>
301 | 		</table>
302 | 	</form>
303 | </body>
304 | 
305 | <!-- JavaScript Files Go Here -->
306 | <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
307 | <script>
308 | 	$(function(){
309 | 
310 | 		//FORM SUBMISSION
311 | 		$('#email-signature-form').submit(function(){
312 | 			var full_name = $('#email-signature-form input[name="full-name"]').val();
313 | 			var position = $('#email-signature-form input[name="position"]').val();
314 | 
315 | 			<?php if( !$options['hide_address_field'] ) : ?>
316 | 			var country = $('#email-signature-form select[name="country"]').val();
317 | 			<?php endif; ?>
318 | 
319 | 			var email_address = $('#email-signature-form input[name="email"]').val();
320 | 			var primary_number_prefix = $('#email-signature-form select[name="primary-number-type"]').val();
321 | 			var primary_number = $('#email-signature-form input[name="primary-number"]').val();
322 | 			var secondary_number_prefix = $('#email-signature-form select[name="secondary-number-type"]').val();
323 | 			var secondary_number = $('#email-signature-form input[name="secondary-number"]').val();
324 | 
325 | 			if(full_name != '' && position != ''){
326 | 				if(country != null){
327 | 					if(email_address != ''){
328 | 						if(primary_number != ''){
329 | 							if(secondary_number == ''){
330 | 								return true;
331 | 							}
332 | 							else{
333 | 								if(primary_number_prefix != secondary_number_prefix && primary_number != secondary_number){
334 | 									return true;
335 | 								}
336 | 								else{
337 | 									alert('You may not use the same phone number/type twice.');
338 | 									return false;
339 | 								}
340 | 							}
341 | 						}
342 | 						else{
343 | 							alert('Please enter a primary phone number.');
344 | 							return false;
345 | 						}
346 | 					}
347 | 					else{
348 | 						alert('Please enter an email address.');
349 | 						return false;
350 | 					}
351 | 				}
352 | 				else{
353 | 					alert('Please select a country.');
354 | 					return false;
355 | 				}
356 | 			}
357 | 			else{
358 | 				alert('Please fill in your name and job title/position.');
359 | 				return false;
360 | 			}
361 | 		});
362 | 
363 | 		// SIGNATURE PREVIEW LISTENER
364 | 		$('input[name="full-name"], input[name="position"], input[name="address"], input[name="email"], input[name="primary-number"], input[name="secondary-number"]').keyup(function(){
365 | 			input_field_callback();
366 | 		});
367 | 
368 | 		$('select[name="country"], select[name="primary-number-type"], select[name="secondary-number-type"]').change(function(){
369 | 			input_field_callback();
370 | 		});
371 | 
372 | 		function input_field_callback(){
373 | 			var full_name = $('#email-signature-form input[name="full-name"]').val();
374 | 			var position = $('#email-signature-form input[name="position"]').val();
375 | 			
376 | 			<?php if( !$options['hide_address_field'] ) : ?>
377 | 			var country = $('#email-signature-form select[name="country"]').val();
378 | 			<?php endif; ?>
379 | 
380 | 			var email_address = $('#email-signature-form input[name="email"]').val();
381 | 			var primary_number_prefix = $('#email-signature-form select[name="primary-number-type"]').val();
382 | 			var primary_number = $('#email-signature-form input[name="primary-number"]').val();
383 | 			var secondary_number_prefix = $('#email-signature-form select[name="secondary-number-type"]').val();
384 | 			var secondary_number = $('#email-signature-form input[name="secondary-number"]').val();
385 | 
386 | 			var email_domain = '<?php echo $options['email_domain']; ?>';
387 | 
388 | 			if(full_name != ''){
389 | 				$('#full-name').text(full_name);
390 | 			}
391 | 			else{
392 | 				$('#full-name').text('<?php echo $options['sample_data']['full_name']; ?>');
393 | 			}
394 | 
395 | 			if(position != ''){
396 | 				$('#position').text(position);
397 | 			}
398 | 			else{
399 | 				$('#position').text('<?php echo $options['sample_data']['position']; ?>');
400 | 			}
401 | 
402 | 			<?php if( !$options['hide_address_field'] ) : ?>
403 | 				<?php foreach( $options['address_list'] as $address ) : ?>
404 | 
405 | 					if(country == '<?php echo $address[0]; ?>'){
406 | 						mailing_address = '<?php echo $address[1]; ?>';
407 | 						$('#address').text(mailing_address);
408 | 						$('#email-signature-form input[name="mailing-address"]').val(mailing_address);
409 | 					}
410 | 
411 | 				<?php endforeach; ?>
412 | 			<?php endif; ?>
413 | 
414 | 
415 | 			if(email_address != ''){
416 | 				$('#email-address').html('Email: <a href="mailto:' + email_address + '@'+ email_domain +'" target="_blank">' + email_address + '@'+ email_domain +'</a>');
417 | 			}
418 | 			else{
419 | 				$('#email-address').html('<?php echo "Email: " . $options["sample_data"]["email_address"]; ?>');
420 | 			}
421 | 
422 | 			if(primary_number != ''){
423 | 				if(secondary_number != ''){
424 | 					$('#phone-number').html(primary_number_prefix + ': ' + primary_number + ' | ' + secondary_number_prefix + ': ' + secondary_number);
425 | 				}
426 | 				else{
427 | 					$('#phone-number').text(primary_number_prefix + ': ' + primary_number);
428 | 				}
429 | 			}
430 | 			else{
431 | 				$('#phone-number').html('<?php echo "Phone: " . $options["sample_data"]["phone_number"]; ?>');
432 | 			}
433 | 		}
434 | 	});
435 | </script>
436 | </html>
437 | <?php endif; ?>


--------------------------------------------------------------------------------