Related
I have had some help from here and a few places to build out a wonderful email signature generator. Currently any filled in info goes into the live preview. What I am trying to do now is fill out the live preview via dropdown.
In this example I am trying to allow a user to choose "fax" or "mobile" for a phone type. The goal being that it simply fills in the "f:" or "m:" in the live preview. I broke the code down just to this key element so you can see. The dropdown is the only thing I am trying to solve.
Hoping someone can guide me to where to at least look for a solution. I have experimented quite a bit with no luck.
// We wrap our segment in an anonymous wrapper function to mitigate potential conflicts with any potential third party stuff.
(function() {
// Loading animation
window.onload = function() {
setTimeout(function() {
document.querySelector('.loading-screen').style.display = 'none';
}, 1000);
}
// Adding the error validation
const inputs = document.querySelectorAll('input,select'),
submitBtn = document.getElementById('generateButton'),
signatureForm = document.getElementById('signatureForm'),
mobileselectPhoneInput = document.getElementById('mobileselect_phone'),
mobilePhoneInput = document.getElementById('mobile_phone'),
mobileBlock = document.getElementById('mobile_phone_block'),
faxPhoneInput = document.getElementById('fax_phone'),
faxBlock = document.getElementById('fax_phone_block'),
inputFields = document.querySelectorAll('[data-field]'),
socialFields = document.querySelectorAll('[data-social]'),
awardFields = document.querySelectorAll('[data-award]'),
outputBox = document.getElementById('output-code-box'),
previewBox = document.getElementById('signature-block'),
getColumn = (id) => document.querySelector(`[data-column="${id}"]`);;
for (let i = 0, x = inputs.length; i < x; i++) {
inputs[i].addEventListener('blur', function(ev) {
if (!this.classList.contains('blurred')) {
this.classList.add('blurred');
}
mobileBlock.style.display = mobilePhoneInput.value !== '' ? 'inline' : 'none';
faxBlock.style.display = faxPhoneInput.value !== '' ? 'inline' : 'none';
socialFields.forEach(social => {
getColumn(social.id).style.display = social.value !== '' ? 'inline-block' : 'none';
})
}, false);
}
inputFields.forEach(field =>
field.addEventListener('keyup', (ev) => {
mobileBlock.style.display = ev.target.id === 'mobile_phone' || mobilePhoneInput.value !== '' ? 'inline' : 'none';
getColumn(ev.target.id).innerText = ev.target.value;
faxBlock.style.display = ev.target.id === 'fax_phone' || faxPhoneInput.value !== '' ? 'inline' : 'none';
getColumn(ev.target.id).innerText = ev.target.value;
switch (ev.target.id) {
case 'email':
getColumn(ev.target.id).href = `mailto:${ev.target.value}`;
break;
case 'office_address':
getColumn(ev.target.id).href = `https://maps.google.com/maps?q=${ev.target.value}`;
break;
case 'web_address':
getColumn(ev.target.id).href = `https://${ev.target.value}`;
break;
case 'office_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
case 'mobile_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
case 'fax_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
}
}, false)
);
handleForm = (ev) => {
if (signatureForm.checkValidity()) {
// minify the html to tidy up and present it for user.
outputBox.value = previewBox.innerHTML.replace(/>\s+|\s+</g, function(m) {
return m.trim();
});
document.getElementById('output-code').style.display = 'block';
} else {
// Todo - do something less obnoxious to hold their hand and tell them something is wrong maybe disable the button until valid.
alert('Missing required fields in the form.')
console.log('Missing required fields, no soup for you.')
}
};
copyCode = () => {
outputBox.select();
document.execCommand('copy');
}
})();
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
</head>
<body>
<main role="main">
<section class="expository" role="region" aria-label="expository">
<section id="generator-container" role="group">
<div style="background-color: #F2F2F2; padding: 20px; margin-right: 60px;">
<h2>1. Enter as much of the below information as you can for your email signature.</h2>
<form method="POST" action="." enctype="application/x-www-form-urlencoded" role="form" id="signatureForm">
<p id="formErrorContainer"></p>
<span class="required-mark">Name</span>
<label for="name">
<input data-field type="text" id="name" name="name" title="Enter name" placeholder="e.g. John Doe" pattern="^([^0-9]*)$" autofocus required>
<span>Enter valid name</span> <span class="success-validation-check"></span>
</label>
<span class="required-mark">Job Title</span>
<label for="position">
<input data-field type="text" id="position" name="position" title="Enter position" placeholder="e.g. Care Planner" pattern="^([^0-9]*)$" required>
<span>Enter valid title</span> <span class="success-validation-check"></span>
</label>
<span role="presentation" class="required-mark">Office Phone Number</span>
<br><br>
<p style="text-align: left; color: #373737; font-size: 12px;"></p>
<br>
<label for="office_phone">
<input data-field type="tel" id="office_phone" name="office_phone" title="Enter office phone number" placeholder="e.g. 1.855.983.4663">
<span>Enter valid phone number</span> <span class="success-validation-check"></span>
</label>
<span style="font-weight: bold">Phone type</span>
<label for="mobileselect_phone">
<select data-field type="text" id="mobileselect_phone" name="mobileselect_phone" title="Mobile/fax">
<option value="None" selected>None</option>
<option value="m:">mobile</option>
<option value="f:">fax</option></select>
<span>mobile or fax?</span> <span class="success-validation-check"></span>
</label>
<label for="mobile_phone">
<input data-field type="tel" id="mobile_phone" name="mobile_phone" title="Enter phone number" placeholder="e.g. 555.123.4567">
<span>Enter valid phone number</span> <span class="success-validation-check"></span>
</label>
<div id="generator-output">
<h2>2. Live Signature Preview</h2>
<br>
<br>
<hr style="height:0;border:0;border-bottom: #ddd 1px solid"><br>
<aside id="generator-output-window">
<figure id="signature-block">
<table width="525" style="width: 525px; color: #063852; font-size: 10pt;" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td style="width: 200px;" align="center" valign=middle width="200">
<img width="200" height="79" border=0 src="assets/logo.gif"><br>
<br>
</td>
<td style="width: 325px; padding-left: 20px; border-left: #888a8d 1px solid" valign=top>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td height="25" style="font-size: 14pt; font-weight: 600; font-family: georgia; color: #063852" data-column="name"></td>
</tr>
<tr>
<td style="color: #063852; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-weight: 600;" data-column="position">
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr style="vertical-align: middle;">
<td>
<a data-column="email" style="font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important; color: #063852 !important;"></a>
</td>
</tr>
<tr height="23" style="vertical-align: middle;">
<td>
<span style="font-size: 10pt !important; font-weight: 600;">t:</span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="office_phone"></a>
<span id="mobile_phone_block" style="display: none">
| <span style="font-size: 10pt !important; font-weight: 600;" data-column="mobileselect_phone"></span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="mobile_phone"></a>
</span>
<span id="fax_phone_block" style="display: none">
<br><span style="font-size: 10pt !important; font-weight: 600;">f: </span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="fax_phone"></a>
</span>
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr style="text-align: left; vertical-align: middle;">
<td style="font-weight: 600; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #063852 !important;" data-column="office_name">
<font size="2">
</td>
</tr>
<tr height="23" style="vertical-align: middle;">
<td>
<a style="text-decoration:none !important; color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';" data-column="office_address"></a>
</td>
</tr>
<tr style="vertical-align: middle;">
<td>
<a style="text-decoration: none !important; color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';" data-column="web_address"></a>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px">
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="525" data-column="corporate" style="display:none; width: 525px; margin-bottom: 20px;"><img src="./assets/images/Awards_Corporate.gif" alt="Franchisees Choice 2020" width=525 style="width: 525px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="vertical-align: bottom;">
<td style="padding-left: 10px; padding-right: 0px;" colspan="2">
<p><span style="text-decoration:none !important; color: #063852 !important; font-size: 10pt; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-bottom: 80px;" colspan="2" data-column="extra_legal"></span></p>
<br>
</td>
</tr>
</tbody>
</table>
</figure>
<!-- <button type="button" onclick="handleForm()" style="width:100%;max-width:100%" id="generateButton">Generate Email Signature</button> -->
<div id="output-code" style="margin-top: 2rem;display:none">
<label style="text-align:left">Copy and paste the code into your email signature:</label>
<button type="button" form="signatureForm" onclick="copyCode()" style="width:100%;max-width:100%">Copy The Code</button>
<textarea id="output-code-box" name="output-code" rows="8" style="width: 100%">
</textarea>
</div>
</aside>
</div>
</form>
</div>
</section>
</section>
<!--/ End Main Form -->
</main>
<script></script>
</body>
</html>
How it shows in Gmail
How it shows in Yahoo
Accurate Design
I've been having a problem with an email not formatting correctly for some platforms. It seems to remove images and background colors in yahoo, and just messes everything up in Gmail. Apple it is perfectly fine.
I'm not super knowledgable in code, I can just make changes but not sure what exactly to add or change to be compatible with all platforms. I think it has to do with the way background colors and pictures are coded.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting">
<!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<!-- CSS Reset : BEGIN -->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style type="text/css">
html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} .primary{
background:#f5564e;
}
.bg_white{
background:#ffffff;
}
.bg_light{
background:#fafafa;
}
.bg_black{
background:#000000;
}
.bg_dark{
background:rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding:12px 20px;
display:inline-block;
text-transform:uppercase;
letter-spacing:2px;
font-weight:600;
}
.btn.btn-primary{
border-radius:30px;
background:#36b1ce;
font-size:13px;
color:#ffffff;
}
.btn.btn-white{
border-radius:5px;
background:#ffffff;
color:#000000;
}
.btn.btn-white-outline{
border-radius:5px;
background:transparent;
border:1px solid #fff;
color:#fff;
}
h1,h2,h3,h4,h5,h6{
font-family:'Raleway',sans-serif;
color:#000000;
margin-top:0;
}
body{
font-family:'Raleway',sans-serif;
font-weight:400;
font-size:15px;
line-height:1.8;
color:rgba(0,0,0,.4);
}
a{
color:#f5564e;
}
.logo h1{
margin:0;
}
.logo h1 a{
color:#000;
font-size:20px;
font-weight:700;
text-transform:uppercase;
font-family:'Raleway',sans-serif;
}
.navigation{
padding:0;
}
.navigation li{
list-style:none;
display:inline-block;
margin-left:5px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}
.navigation li a{
color:rgba(0,0,0,.6);
}
.hero{
position:relative;
z-index:0;
}
.hero .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.hero .icon a{
display:block;
width:60px;
margin:0 auto;
}
.hero .text{
color:rgba(255,255,255,.8);
padding:0 4em;
}
.hero .text h2{
color:#ffffff;
font-size:40px;
margin-bottom:0;
line-height:1.2;
font-weight:300;
}
.heading-section h2{
color:#000000;
font-size:30px;
margin-top:0;
line-height:1.4;
font-weight:300;
}
.heading-section .subheading{
margin-bottom:20px !important;
display:inline-block;
font-size:13px;
text-transform:uppercase;
letter-spacing:2px;
color:rgba(0,0,0,.4);
position:relative;
}
.heading-section .subheading::after{
position:absolute;
left:0;
right:0;
bottom:-10px;
content:'';
width:100%;
height:2px;
background:#f5564e;
margin:0 auto;
}
.heading-section-white{
color:rgba(255,255,255,.8);
}
.heading-section-white h2{
line-height:1;
font-weight:300;
font-size:30px;
padding-bottom:0;
}
.heading-section-white h2{
color:#ffffff;
}
.heading-section-white .subheading{
margin-bottom:0;
display:inline-block;
font-size:30px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:300;
color:rgba(255,255,255,.4);
}
.icon{
text-align:center;
}
.services{
background:rgba(0,0,0,.03);
}
.text-services{
padding:20px 10px 0;
text-align:center;
background:#fafafa;
}
.text-services h4{
font-size:15px;
text-transform:uppercase;
letter-spacing:.5px;
color:#36b1ce;
font-weight:600;
}
.services-list{
padding:0;
margin:0 0 10px;
width:100%;
float:left;
}
.services-list .text{
width:100%;
float:right;
}
.services-list h3{
margin-top:0;
margin-bottom:0;
font-size:15px;
}
.services-list p{
margin:0;
}
.text-tour{
padding-top:10px;
}
.text-tour h3{
margin-bottom:0;
}
.text-tour h3 a{
color:#000;
}
.text-services .meta{
text-transform:uppercase;
font-size:14px;
}
.text-testimony .name{
margin:0;
}
.text-testimony .position{
color:rgba(0,0,0,.3);
}
.counter{
width:100%;
position:relative;
z-index:0;
}
.counter .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.counter-text{
text-align:center;
}
.counter-text .num{
display:block;
color:#ffffff;
font-size:34px;
font-weight:700;
}
.counter-text .name{
display:block;
color:rgba(255,255,255,.9);
font-size:13px;
}
ul.social{
padding:0;
}
ul.social li{
display:inline-block;
}
.footer{
color:rgba(255,255,255,.5);
}
.footer .heading{
color:#ffffff;
font-size:20px;
}
.hidden{
display:none;
}
.footer ul{
margin:0;
padding:0;
}
.footer ul li{
list-style:none;
margin-bottom:10px;
}
.footer ul li a{
color:rgba(255,255,255,1);
}
#media screen and (max-width: 500px){
.icon{
text-align:left;
}
} #media screen and (max-width: 500px){
.text-services{
padding-left:0;
padding-right:20px;
text-align:left;
}
}</style></head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center style="width:100%;background-color:#f1f1f1;">
<div style="display:none;font-size:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">
</div>
<div style="max-width:600px;margin:0 auto;" class="email-container">
<!-- BEGIN BODY -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="top" class="bg_white" style="padding:1em 2.5em;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="40%" class="logo" style="text-align:left;">
<h1>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/beabaa6f-844f-4ffa-9080-6391df1c3ef6.png" style="max-width:200px" alt="beabaa6f-844f-4ffa-9080-6391df1c3ef6.png">
</h1>
</td>
<td width="60%" class="logo" style="text-align:right;">
<ul class="navigation">
<li>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/ee34875d-ab9f-480d-a11e-150f8027462c.png" style="max-width:25px" alt="ee34875d-ab9f-480d-a11e-150f8027462c.png">
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td valign="middle" class="hero bg_white" style="background-image:url('https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg');background-size:cover;height:400px;">
<table>
<tr>
<td>
<div class="text" style="text-align:center;">
<h2></h2>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td class="bg_dark email-section" style="text-align:center;">
<div class="heading-section heading-section-white">
<h2>We have a new website!</h2>
<p>We're so excited to unveil our new website! Our website is now easy to navigate to our services, get a quote, and schedule your move. We're excited to give our customers a new, top notch experience to make their move as easy as possible.</p>
<p>visit the site
</p>
</div>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>All New Service Pages</h2>
<p>We've redesigned and reinvented how deliver our services. We have a general breakdown of each service, plus a detailed service page for those of you who want to learn more specific details.</p>
</div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6a5e0310-9a5a-4b52-8487-4702c8cf4fb3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Residential
</h3>
<span class="price">Services include Local Moving, Long Distance and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/e5542099-d033-42ae-8f32-c9198cdc6e00.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Collegiate
</h3>
<span class="price">Services include Dorm Store, Lease Layover, Local Moving, and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/22fec672-03f3-4285-a75c-9dc4e1ef78f3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Commercial
</h3>
<span class="price">Services include FF&E, Employee Relocation, Corporate Relocation, and Instutional Moving.</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- end:tr -->
<tr>
<td class="bg_white email-section" style="width:100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6f23aa84-082e-4dba-9d2f-ca5c9fd414af.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
</td>
</tr>
</table>
</td>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="text-services" style="text-align:left;padding-left:25px;">
<div class="heading-section">
<h3>Moving Tips</h3>
</div>
<div class="services-list">
<div class="text">
<h4>1. Pack up your things</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>2. Search for Destination</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>3. Be Responsible</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- Leave a Review -->
<tr>
<td class="bg_light email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>Leave us a Review!</h2>
<p>Had a good moving experience in the past? Please leave us a review on Google!</p>
<p>Leave a Review
</p>
</div>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
</table>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="60%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<h3 class="heading">Follow Us</h3>
<p>Get the latest updates!</p>
<ul class="social">
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/31d75ed2-3027-49aa-b9f2-1969b2cb1f4b.png" alt="" style="width: 30px; padding-right:10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1f92f2b1-2e26-4add-acf8-b4f8c2056309.png" alt="" style="width: 30px; padding-right: 10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/63ede42c-5969-4eb5-8f64-5aa9add11cf6.png" alt="" style="width: 30px; max-width: 600px; height: auto; display: block;">
</li>
</ul>
</td>
</tr>
</table>
</td>
<td valign="top" width="40%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-left:5px;padding-right:5px;">
<h3 class="heading">Contact Info</h3>
<ul>
<li>
<span class="text">130 Industrial Drive<br>Birmingham,AL 35211</span>
</li>
<li>
<span class="text">205-624-4537</span>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<p>© 2019 Move & Store. All Rights Reserved.</p>
</td>
</tr>
</table>
</td>
<td valign="top" width="33%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:right;padding-left:5px;padding-right:5px;">
<p>Unsubscribe
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I'm not sure why your hero image is a background image, but if you make it into a regular image, the hero will display in every major email client, including Gmail and Yahoo.
Try this instead:
<tr>
<td valign="middle" class="hero bg_white" style="">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg" width="600" />
</td>
</tr>
I pulled out the empty h2 below the image to make it simpler to display the relevant code.
Before I did this, your email hero did not display in Outlook 2007-2019. Even with changing the hero to an img, you have serious issues with this email in Outlook and other clients. I suggest more testing and development to help make sure your customers see your message.
Good luck.
Sometimes when I sent emails I receive answers stating that my email was empty. It seems very random and so far I have not been able to reconstruct this problem (have tested it on Gmail, Yahoo, AOL, Outlook, Mozilla Thunderbird, ... to no avail). It seems that only my email signature and/or sometimes also just the beginning of my email is displayed.
I've checked for font problems and problems within the html code of the mail, etc.
Where should I start?
Here's some sample code of the template I use that seems to create this error at random:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
...
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]>
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<![endif]-->
<style>
html, body{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
<table align="center" bgcolor="#0568A6" width="588" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:588px">
<![endif]-->
<tbody>
<tr>
<td style="display:block;width:100%;max-width:588px;margin:0 auto;padding:0;background-color:#0568a6">
<img src="logo.jpg" alt="Logo" width="125" height="26" border="0" align="right" style="float: right;border:0px !important" />
</td>
</tr>
</tbody>
<!--[if mso]>
</table>
<![endif]-->
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;" align="center" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; width:98%; max-width: 588px; margin: 0 auto; padding:35px 1% 28px; color: #111111;">
<table style="border-collapse: collapse; width: 100%;">
<!--[if mso]>
<table align="center" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-family:Verdana,Geneva,sans-serif; color: #222222; margin-bottom: 15px; font-weight: normal; font-size: 13pt; line-height: 1.25;">
Content
</p>
</td>
</tr>
<!--[if mso]>
</table>
<![endif]-->
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 588px;width:98%; margin: 0 auto; padding: 6px 1% 16px;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef">
<!--[if mso]>
<table align="center" bgcolor="#efefef" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-size: 8.5pt; color: #999999;font-family:Verdana,Geneva,sans-serif; line-height: 1.2; border: 0;">
Footer
<br>
<br>
<a target="_blank" href="%UNSUBSCRIBELINK%" style="font-size: 8.5pt; color: #278ac8 !important; line-height: 1.2; text-decoration: none; border: 0;font-family:Verdana,Geneva,sans-serif;">
<span style="color: #278ac8; text-decoration: none;">
CLICK TO UNSUBSCRIBE
</span>
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I found the answer to this problem. It seems to be a bug in (earlier) versions of IE (who guessed it...).
The key part of the problem is the 1% padding right and left in the DIV element that serves as a container.
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
// this DIV has right and left padding of 1% which causes a bug in IE
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
... and so on
The result was that in some mail clients (Gmail, AOL, Comcast, maybe some others) the container of the message was rendered with a HUGE width (approx. 100,000px, for no obvious reason of course) of which the padding took ca. 1000px on each side.
As the content was centered, it was simply out of view for the person opening the message (no normal person has such a wide screen)
I replaced the 1% padding with a 3px padding and that solved the problem.
Below is a screen shot to show the problem, rendered in IE8. The solution is to change the padding as described above.
I'm working on an HTML email signature. It displays properly when you send it, but when a recipient replies to or forwards the email, the spacing gets messed up and there are some other problems.
Before (yay):
After (boo):
Here's the code that the signature is generated from:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- 569 when finalizing (don't include px sufix)-->
<table border-collapse="collapse" width="569" style="border-width: 0; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Image table -->
<table border-collapse="collapse" width="83px" align="left" border="0" cellspacing="0" cellpadding="0" style="border: #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<!-- 1. Headshot image (src and alt) -->
<img src="http://www.levelfunded.com/email/russ_carpel.jpg" alt="Russ Carpel headshot" style="display: block;"/>
</p>
</td>
</tr>
</table>
<!-- Contact info table -->
<table border-collapse="collapse" width="329" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" align="right" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; vertical-align: top; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<p style="font-size: 14px; margin: 0px; margin-top: 8px;">
<b>
<!-- 2. Name -->
<span>Russ Carpel</span>
</b>
<!-- 3. Title -->
<span style="font-size: 13px;">CEO</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 4. Mobile number (href and copy) -->
<span>(888) 888-8888 m</span>
<span style="color: #bababa;"> | </span>
<!-- 5. Email (href and copy) -->
<span>
address#domain.com
</span>
<span>
<!-- 6. LinkedIn profile -->
<a href="https://www.linkedin.com/in/profile" target="_blank">
<img src="http://levelfunded.com/email/linkedIn.jpg" alt="LinkedIn" style="vertical-align: top; margin-top: 1px"/>
</a>
</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 7. Office number -->
<span>(888) 888-8888 o</span>
<span style="color: #bababa;"> | </span>
<span>levelfunded.com</span>
</p>
</p>
</td>
</tr>
</table>
<!-- Logo table -->
<table border-collapse="collapse" width="107" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" valign="bottom" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com" target="_blank">
<img src="http://levelfunded.com/email/levelfundedLogoCities.jpg" alt="LevelFunded Logo"/ style="display: block;">
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<!-- Speech carrot table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-top: 10px; padding-left: 22px; border-width: 0;">
<tr>
<td>
<img src="http://www.levelfunded.com/email/triangle.jpg" alt="Speech carrot" style="display: block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Gray box cell -->
<td colspan="3" style="padding-left: 8px; padding-top: 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #e8e8e8;">
<!-- Video link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com/video.html">
<img src="http://levelfunded.com/email/videoLinkImg-trimmed.jpg" alt="Immediately reduce health benefits costs by $50K, possibly $250K or more. Click to watch video." style="display: block; padding: 0px; margin: 0px;"/>
</a>
</p>
</td>
</tr>
</table>
<!-- Article link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://www.chicagotribune.com/business/ct-small-business-insurance-1214-biz-20141214-story.html">
<img src="http://levelfunded.com/email/articleLinkImg-trimmed.jpg" alt="Click to read Chicage Tribune article" style="display: block;"/>
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #7e7e7e; font-size: 10px; line-height: 12px; border-width: 0;">
<tr>
<td>
This email is confidential communication from Level Funded Health Partners LLC and may not be forwarded without the expressed written consent of the company. Level Funded Health Partners LLC is a DE LLC, File #8888888. The company is a U.S. based licensed insurance agency entity. Delaware insurance agency entity license #8888888.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I understand that when the recipient composes and sends their reply, their email client has to re-encode the email and that creates the possibility for these formatting errors. (More on that here.)
To be clear, here are the errors I'm talking about:
Extra space above and below the speech carrot graphic
Link formatting is lost (on the blurred section, but you can see that the green is turning into blue
The background color on the gray rectangle is getting dropped
Padding on the two big graphics is getting decreased
Font styling on the disclaimer text is getting dropped
Disclaimer copy is getting truncated after the second # character.
I know trying to answer all of that is too broad. So here's my question:
I've found lots of resources for coding a good html email. However, I haven't been able to find resources on good practices to make it more resilient against these kinds of errors when it is replied to or forwarded. Can anybody point me to any such resources?
Unfortunately you can't account for all of the different email clients out there with regards to email forwarding. They all handle them differently. You can almost certainly count on your HTML formatting being somehow broken when someone forwards an email to someone else with the forward button. (You can do your best though; I commented earlier with some suggestions.)
The alternative is to use a "Forward to a friend" functionality available in some email service providers such as Salesforce (formerly ExactTarget) for example. You would encourage people to click on a link which would take the user to a page to fill in an email address, then the message would be sent to them on the user's behalf. In ET you could also show/hide certain information depending on the context. So, if someone was sending the message via FTAF, any sensitive information could be removed, for example. This all of course depends on your email service provider's offerings.
I would like to know who can I retrieve the date from a file.
This is how I open my file:
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("checkno_2211.html"), 1)
'Need something here to find the first date MM/DD/YYYY in the file
f.Close
Set f=Nothing
Set fs=Nothing
The code above will open the .html file now I would like to find the first date that is in that file but I don't know how to do it. :-(
The .html file will have multiple dates in it, but I only need to grab the first one.
The html and format of the date is like this:
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
The source code of the .html file is
<HTML>
<HEAD>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
textarea {
font-size: 14px;
font-weight: bold;
font-family: Arial;
}
.style1 {
text-align: center;
}
.style2 {
border-style: solid;
border-width: 1px;
}
.style3 {
color: #FFFFFF;
background-color: #000000;
}
.style4 {
background-color: #000000;
}
.style5 {
color: #FFFFFF;
}
.style7 {
vertical-align: text-bottom;
}
.style8 {
font-family: Arial, Helvetica, sans-serif;
}
.style9 {
background-color: #C0C0C0;
}
.style10 {
vertical-align: middle;
}
.auto-style30 {
text-align: center;
margin-left: 0px;
}
.auto-style32 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style35 {
background-color: #000000;
}
.auto-style36 {
border-top-style: solid;
border-top-width: 1px;
}
</style>
<script language="javascript" type="text/javascript">
function GetURL_Alpha(){
document.getElementById("currentURL").value= location.href;
}
</script>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
</HEAD>
<BODY onload="printIt();GetURL_Alpha();" style="margin: 0 5">
<input name="currentURL" ID="currentURL" type="hidden" style="width: 1528px">
<CENTER>
<head>
<style type="text/css">
.auto-style36 {
text-align: center;
}
</style>
</head>
<TABLE border=0 style="width: 100%">
<TR>
<TD class="auto-style36">
<font face="Century Gothic">
<img src="logopro2.jpg"><BR>
</font>
<strong>
<font face="Century Gothic" size="1">111 Test Main St Los Angeles,
CA 12345 </font></strong><font face="Century Gothic" size="1">
<strong><BR>
</strong>
</font> <STRONG><FONT face="Century Gothic" size=1>PHONE: (888) 111-2222 FAX: (877)
111-2233</FONT></STRONG>
<br><br>
</TD>
</TR>
</TABLE>
</CENTER>
<table style="width: 100%">
<tr>
<td style="width: 408px"><font face="Arial">
<strong>
<h3 class="auto-style30" style="width: 492px">
FULL NAME<BR>
123 Test Ave<BR>
MIAMI, FL<BR>
</h3>
</strong>
</font>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<P align = center>
<FONT face="Comic Sans MS" size=5><span class="style8">
<HR>
<P align=center>
<TABLE border=0 style="width: 100%" cellspacing="0">
<tr>
<FONT face="Comic Sans MS" size=5><span class="style8">
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
<td style="height: 31px">Name: Someone</td>
<td class="style1" colspan="2" style="height: 31px">
<FONT face="Comic Sans MS" size=5><span class="style8">
<strong>STATEMENT</strong></td>
<TD colspan=3 align=right style="height: 31px">
Check #: 11008
</TD>
</span></font>
</tr>
<TR>
<TD colspan=7 align=center class="auto-style35">
<span class="style5"></span>
<STRONG><FONT face="Arial" size=2 color="white">
<img src="more_images/ContainerRed.png" class="style10">
MORE INFORMATION</FONT></STRONG>
</TD>
</TR>
As always,
Thanks for any help...
You could try something like this -
Dim ParseDate, NextLineIsDate
NextLineIsDate = False
Set fso = Server.CreateObject("Scripting.FileSystemObject")
set fs = fso.OpenTextFile(Server.MapPath("Saved\checkno_2211.html"), 1, true)
Do Until fs.AtEndOfStream
If NextLineIsDate Then
ParseDate = Replace(Replace(fs.ReadLine," ",""),"</TD>","")
Exit Do
End If
If Instr(fs.ReadLine,"Date:") > 0 Then NextLineIsDate = True
Loop
Response.Write ParseDate
fs.close: set fs = nothing
The code above should output the date you're searching for to the screen.
This will work providing the text Date: only appears directly above dates in your text file. If it doesn't you might need some thing more complicated but it's hard to tell without seeing all the contents of your file.