I'm using Amazon AWS SES. This is how I send emails:
$request = array();
$request['Source'] = $row['emailfromname'] . " <{$verifyemail[0]}>";
$request['Destination']['ToAddresses'] = $to;
$request['Message']['Subject']['Data'] = $row['emailsubject'];
$request['Message']['Body']['Html']['Data'] = $row['emailbody'];
try {
$result = $client->sendEmail($request);
$messageId = $result->get('MessageId');
...
So it's pretty basic.
My problem is that some emails are sending as HTML. Here is an example of an offender:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p><span style="font-family: Calibri, sans-serif; line-height: 11pt; font-size: 11pt; color: #333333;">Hi Name,</span></p>
<hr><span style="font-size:11pt;font-family:'Calibri',sans-serif"><b>From:</b> sender#sender.com.au<br><b>Sent:</b> Thursday, 9 March 2017 10:51 AM<br><b>To:</b> receiver#receiver.com.au<br><b>Subject:</b> Enquiry for ID: 98419081886, 123 Fake Street,
Docklands, Vic 3008, Listing Agent Leasing Consultant</span><br><br><div id="message" style="width: 600px; margin: 0 auto;">
<h1 class="header">
<img src="http://www.test.com/logo.png" style="border: 0; width: 258px;"><div class="header-separator" style="height: 4px; background-color: #e4002b; width: 100%; margin-top: 17px;"></div>
</h1>
<p style="margin: 0;">You have received a new enquiry for</p>
<br><p style="margin: 0;"> id: 98419081886</p>
<div class="footer" style="margin-top: 1em; padding: 5px; background: #999999; color: #fff;">
Message sent from www.test.com.au </div>
</div></body></html>
It sends in plain text as HTML code with the weird header info. This is my Outlook 2010 email received:
Docklands, Vic 3008, Listing Agent Leasing Consultant
MIME-Version: 1.0
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 7bit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p><span style="font-family: Calibri, sans-serif; line-height: 11pt; font-size: 11pt; color: #333333;">Hi Name,</span></p> <hr><span style="font-size:11pt;font-family:'Calibri',sans-serif"><b>From:</b> sender#sender.com.au<br><b>Sent:</b> Thursday, 9 March 2017 10:51 AM<br><b>To:</b> receiver#receiver.com.au<br><b>Subject:</b> Enquiry for ID: 98419081886, 123 Fake Street, Docklands, Vic 3008, Listing Agent Leasing Consultant</span><br><br><div id="message" style="width: 600px; margin: 0 auto;">
<h1 class="header">
<img src="http://www.test.com/logo.png" style="border: 0; width: 258px;"><div class="header-separator" style="height: 4px; background-color: #e4002b; width: 100%; margin-top: 17px;"></div>
</h1>
<p style="margin: 0;">You have received a new enquiry for</p>
<br><p style="margin: 0;"> id: 98419081886</p>
<div class="footer" style="margin-top: 1em; padding: 5px; background: #999999; color: #fff;">
Message sent from www.test.com.au </div>
</div></body></html>
The thing that's really confused me, however, is that other very similar emails send with no issues at all!
I'm guessing there's a clue in that the first line of the output reads Docklands, VIC 3008 ... But even if I remove that line-break, the space and the comma (so it reads 123 Fake StreetDocklands), the output stills starts with Docklands... including the space at the beginning!
Feeling sheepish and annoyed... After leading myself on a wild goose chase, I found my problem. It's so trivial that I was going to delete this question, but I won't in the hope it helps other SES users.
My subject had a line-break in it!
I'm not sure how or why Amazon lets this cause a problem for the email body, but it does.
Related
I've automated the sending of my e-mails in PHP using PHPMailer:
$mail->isSMTP();
$mail->SMTPAuth = true;
$mail->Host = $host; // verified with my host
$mail->Port = 465;
$mail->Username = 'mymail#example.com'; // verified with my host
$mail->Password = 'mypassword'; // verified with my host
$mail->SMTPSecure = 'ssl';
$mail->SMTPAutoTLS = true;
$mail->setFrom( 'mymail#example.com', 'This is the Header of the E-Mail' );
$mail->addAddress( 'recipientsmail#hisexample.com', '' );
$mail->isHTML( true );
$mail->Subject = 'This is the Subject of the E-Mail';
$mail->CharSet = 'UTF-8';
$mail->Body = 'HTML Content of the E-Mail';
$mail->send();
$mail->SmtpClose();
First, many emails sned via this script dropped into the SPAM of my clients. I checked back with the host, and they helped me to add an SPF record:
Type: TXT
TTL: 300
Value: "v=spf1 redirect=shared_host_mail_server"
This improved the non-spam delivery rate a lot, but especially for gmail, significant portion still drops into spam. An example of the source of an email that dropped into the email spam is:
Delivered-To: my.secret#gmail.com
Received: by 2002:a17:906:f12:0:0:0:0 with SMTP id secret;
Mon, 21 Mar 2022 06:58:32 -0700 (PDT)
X-Google-Smtp-Source: ABdhPJz6F29tChwOYHMaPAlJC0D9QTnj/JMhktHDZEuWjHBWU7x/ZdnkZS7MccoMwSxrMjrZec73
X-Received: by 2002:a5d:4ad2:0:b0:203:d56d:9c82 with SMTP id secret;
Mon, 21 Mar 2022 06:58:30 -0700 (PDT)
ARC-Seal: i=1; a=rsa-sha256; t=1647871110; cv=none;
d=google.com; s=arc-20160816;
b=K3FgBLtaiFZEsUAPiR2dBpquBEVEKZ2A82PhG+nCN7I7NRTxE8KDueotg3pndOeoQQ
IaCxIO8uYvkka1BmdSz8RuL0H/+OuXh+UMTpuy5tnhteTy3IR5Ub8vfl2eCl5AsCUj1R
ZLkysapUMphblFlZnSz4JObVz0jgN8P4uAE39ObN1YVpLZ9bT//BXuVjyYbKuHyhDUoP
AnZ+cjey7I4dyuvaaUWyrIMC7xEnLratGSN4mtIBWhEuWrMokXZtnbVZMHtNh+W7d5d1
HGmWzWdnWftGZJFI8e2fnNSRosRE0pwzblCNAkGd+PmJHOEDlq5pmaLla1I9yZpxZa3z
dx4w==
ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com; s=arc-20160816;
h=content-transfer-encoding:mime-version:message-id:subject:from:to
:date;
bh=NCbhFSalLdDA2HAK57ps0Gy6VG+hTVJz6G8PW0XPkpo=;
b=TuIDSDjGMJOISTWTkb8iaOA1qJ3QYFLU6adhuG2kbyzpICBc0EC5MNvkGDWcEH9znp
UjYJ0Uug/79c6ZSzLaXuv3THIwuO7MJTuM5r7YXTbFvGnwNlO/Qc1xO/bo63rIN1ZS8y
aKRtpzjO0hMqjxlbltnZPcNice0DqZZcX0BlaU8kkgKFGw96vpBj9A0ZZbAyvmK2Lyws
oGYdKUmcOhosxXIxM8AAu1JVtM0bI2EncDo5UvwBIXVitvgcmORTfS1u3RBsKakk9tXI
bBCer6hxpjjn+hRxMOsdjqFdLa0EIIxnuW/z05Yh4CYSPBi1RZM0q/hWCMPvjDqBRFY5
8vVQ==
ARC-Authentication-Results: i=1; mx.google.com;
spf=pass (google.com: domain of secret.sender#example.com designates 2a00:d70:0:e::313 as permitted sender) smtp.mailfrom=secret.sender#example.com
Return-Path: <secret.sender#example.com>
Received: from host_out_mail_server (host_out_mail_server. [2a00:d70:0:e::313])
by mx.google.com with ESMTPS id secret
for <my.secret#gmail.com>
(version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256);
Mon, 21 Mar 2022 06:58:30 -0700 (PDT)
Received-SPF: pass (google.com: domain of secret.sender#example.com designates secret_ip as permitted sender) client-ip=secret_ip;
Authentication-Results: mx.google.com;
spf=pass (google.com: domain of secret.sender#example.com designates secret.sender#example.com as permitted sender) smtp.mailfrom=secret.sender#example.com
Received: from [10.0.2.46] (helo=host_mail_server) by host_out_mail_server with esmtps
(TLS1.3) tls TLS_AES_256_GCM_SHA384 (Exim 4.94.2 (FreeBSD)) (envelope-from <secret.sender#example.com>) id 1nWIYH-0000QW-8D for my.secret#gmail.com; Mon, 21 Mar 2022 14:58:29 +0100
Received: from other_host_server ([2a00:d70:0:b::2:10] helo=example.com) by host_mail_server with esmtpa (Exim 4.95 (FreeBSD)) (envelope-from <secret.sender#example.com>) id 1nWIYG-00010j-7w for my.secret#gmail.com; Mon, 21 Mar 2022 14:58:29 +0100
X-Authenticated-Sender-Id: secret.sender#example.com
Date: Mon, 21 Mar 2022 13:58:28 +0000
To: my.secret#gmail.com
From: Werbe - Anfrage <secret.sender#example.com>
Subject: Bekanntmachung
Message-ID: <secret#example.com>
X-Mailer: PHPMailer 6.5.0 (https://github.com/PHPMailer/PHPMailer)
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks"
Content-Transfer-Encoding: 8bit
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE html>
<html lang=3D"de" xmlns=3D"http://www.w3.org/1999/xhtml" xmlns:o=3D"urn:sch=
emas-microsoft-com:office:office">
<head>
<meta charset=3D"UTF-8">
<meta name=3D"viewport" content=3D"width=3Ddevice-width,initial-scale=3D1=
">
<meta name=3D"x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<style type=3D"text/css">
table {border-collapse:collapse;border:0;border-spacing:0;margin:0;=
}
div, td {padding:0;}
div {margin:0 !important;}
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style type=3D"text/css">
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
}
/* ANDROID CENTER FIX */
div[style*=3D"margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style=3D"margin: 0 !important; padding: 0; !important; word-spacing: =
normal; background-color: #ffffff;" bgcolor=3D"#ffffff">
<div style=3D"display: none; font-size: 1px; color: #fefefe; line-height: 1=
px; font-family: Open Sans, Helvetica, Arial, sans-serif; max-height: 0px; =
max-width: 0px; opacity: 0; overflow: hidden;">
This is the text of the preheader
</div>
<table role=3D"presentation" border=3D"0" cellpadding=3D"0" cellspacing=3D"=
0" width=3D"100%" bgcolor=3D"#d3d3d3" style=3D"background: #d3d3d3;">
<tr>
<td align=3D"center" valign=3D"top" width=3D"100%" style=3D"padding=
: 0;">
<!--[if (gte mso 9)|(IE)]>
<table role=3D"presentation" align=3D"center" border=3D"0" cell=
spacing=3D"0" cellpadding=3D"0" width=3D"600">
<tr>
<td align=3D"center" valign=3D"top" width=3D"600">
<![endif]-->
<table role=3D"presentation" align=3D"center" border=3D"0" cell=
padding=3D"0" cellspacing=3D"0" width=3D"100%" style=3D"max-width:600px;">
<tr>
<td align=3D"center" valign=3D"top" style=3D"padding: 0; border-left: 1=
px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid=
#000000;">
<img src=3D"https://example.com/mail_visual.png" wi=
dth=3D"600" border=3D"0" alt=3D"" style=3D"display: block; width: 100%; hei=
ght:auto;" class=3D"img-max"/>
</td>
</tr>
<tr>
<td align=3D"left" valign=3D"top" bgcolor=3D"#ffffff" style=3D"backgrou=
nd: #ffffff; padding: 15px 30px 30px 30px; font-family: Open Sans, Helvetic=
a, Arial, sans-serif; border-left: 1px solid #000000; border-right: 1px sol=
id #000000;">
<h4 style=3D"font-family: Open Sans, Helvetica, Arial, sans-serif; =
font-size: 17px; line-height: 23px; color: #000000;">Salutation</h4>
<p style=3D"color: #000000; font-family: Open Sans, Helvetica, Aria=
l, sans-serif; font-size: 16px; line-height: 22px; margin: 0;">Sample Context</p>
</td>
</tr>
<tr>
<td align=3D"center" valign=3D"top" bgcolor=3D"#13aff0" style=3D"backgr=
ound: #13aff0; padding: 10px 30px; font-family: Open Sans, Helvetica, Arial=
, sans-serif; border-left: 1px solid #000000; border-right: 1px solid #0000=
00; border-top: 1px solid #000000;">
<h5 style=3D"font-family: Open Sans, Helvetica, Arial, sans-serif; fo=
nt-size: 16px; line-height: 24px; color: #ffffff; margin:0 0 5px 0;">Domai=
n</h5>
<img src=3D"https://example.com/icons/first.png" width=3D"107" he=
ight=3D"40" border=3D"0" alt=3D"first" style=3D"display: bl=
ock; border: 0px; color: #999999; font-family: sans-serif; font-size: 18px;=
" />
<p style=3D"margin:7px 0 15px 0;"><a href=3D"mailto:secret.sender=
#example.com" target=3D"_blank" style=3D"text-decoration: none; color: #fff=
fff; font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px;=
line-height: 16px;">secret.sender#example.com</a></p>
<p style=3D"margin:0 0 14px 0;"><a href=3D"https://example.com" targe=
t=3D"_blank" style=3D"text-decoration: none; color: #ffffff; font-family: O=
pen Sans, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 16px;=
">www.example.com</a></p>
<!--[if (gte mso 9)|(IE)]>
<table role=3D"presentation" align=3D"center" border=3D"0" cellspacin=
g=3D"0" cellpadding=3D"0" width=3D"157">
<tr>
<td align=3D"center" valign=3D"top" width=3D"157">
<![endif]-->
<table role=3D"presentation" align=3D"center" border=3D"0" cellpaddin=
g=3D"0" cellspacing=3D"0" width=3D"100%" style=3D"max-width:157px;">
<tr>
<td style=3D"padding:0;">
<a href=3D"https://www.instagram.com/companylink/" target=3D"_blank=
" style=3D"text-decoration: none;"><img src=3D"https://example.com/icons/In=
stagram.png" alt=3D"Link for Instagram Channel" width=3D"30" height=
=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 15px;">
<a href=3D"https://www.linkedin.com/company/name" target=3D"=
_blank" style=3D"text-decoration: none;"><img src=3D"https://example.com/ic=
ons/LinkedIn.png" alt=3D"Link for LinkedIn Channel" width=3D"30" he=
ight=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 15px;">
<a href=3D"https://twitter.com/companyname" target=3D"_blank" style=
=3D"text-decoration: none;"><img src=3D"https://example.com/icons/Twitter.p=
ng" alt=3D"Link for Twitter Channel" width=3D"30" height=3D"30" sty=
le=3D"height:auto;display:block;border:0;" /></a>
</td>
<td style=3D"padding:0 0 0 7px;">
<a href=3D"https://www.facebook.com/compnyname" ta=
rget=3D"_blank" style=3D"text-decoration: none;"><img src=3D"https://domai=
n.com/icons/Facebook.png" alt=3D"Link for Facebook Channel" width=
=3D"30" height=3D"30" style=3D"height:auto;display:block;border:0;" /></a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks
Content-Type: application/octet-stream; name=QR_DE.pdf
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=QR_DE.pdf
--b1_ciluFWHutVghcyNH2SHrnSBIhFM0AuGhsYu8JefeYks--
I don't see the problem in this e-mail source extract / the reason why it drops into spam; does anyone of you?
I then checked back with the host about the particular gmail problem, and they recommended me to change my spf record to:
"v=spf1 include:_spf.google.com redirect=shared_host_mail_server"
But I feel that this is wrong / is only necessary if you want to send emails from your domain across gmails server's, or am I wrong?
Anyway, any suggestions on how I can improve the result? I don't use DKIM / DMARC so far, because my host does not support DKIM signing. Is it a good idea to try to implement DKIM via PHPMailer in this case / is it even possible to do so if the host server does not support DKIM natively?
Thanks in advance for any help!
P.S.: I did this test and the result was:
This goes for both mentioned versions of the SPF. However if I check in other tools as mail-tester or email on acid, the SPF is valid. Just FYI
<style >
em.quote{
text-align: center;
justify-content: center;
margin-top: 515px;
margin-left: 550px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
justify-content: center;
text-align: center;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}}
#main{
text-align: center;
border-style: solid;
background-color: #b48eaeff;
}
p.info{
font-family: sans-serif;
}
p.link{
text-align: center;
}
#image{
display: block;
margin: 0 auto;
max-width: 100%
}
</style>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width,initial-scale=1">
<html>
<head>
<div id="main">
<h1 id="title"> Dr.Norman Borlaug</h1>
</div>
<div id="img-div">
<div id="img-caption" alt=" A gallery of images of Norman Borlaug">
<div class="row" class=“img-responsive”>
<div class="column">
<img src="img/normanwithpeople.png" alt="Norman Borlaug having a conversion with colleuges">
<img src="img/norman-borlaug.png" alt="Norman Borlaug in a field smiling" id ="image">
<img src="img/normanholdingnobelpize.png" alt=" Norman Borlaug holding the Nobel Peace Prize">
</div>
<div class="column">
<img src="img/normanatconference.png" alt="Norman Borlaug at a confrence">
<img src="img/normanwithjimmy.png" alt="Norman_Borlaug with former President Jimmy Carter">
<img src="img/normaninmexico.jpg" alt=" A painting of Norman Borlaug in a field in Mexico">
</div>
<div class="column">
<img src="img/norman.png" alt="Norman Borlaug and his wife">
<img src="img/normangetsaward.png" alt="Norman Borlaug receives an award from president George W Bush">
<img src="img/normanatscience.png" alt=" Norman Borlaug at a agricultural science and technology ">
</div>
</div>
<p class="important">
<em class="quote">Fathered a revolution that saved billons of lives</em>
</p>
</head>
<div id="tribute-info">
<p class="info">Norman Ernest Borlaug (March 25, 1914 – September 12, 2009) was an American agronomist who led initiatives worldwide that contributed to the extensive increases in agricultural production termed the Green Revolution. Borlaug was awarded multiple honors for his work, including the Nobel Peace Prize, the Presidential Medal of Freedom and the Congressional Gold Medal.
Borlaug received his B.S. in forestry in 1937 and Ph.D. in plant pathology and genetics from the University of Minnesota in 1942. He took up an agricultural research position with CIMMYT in Mexico, where he developed semi-dwarf, high-yield, disease-resistant wheat varieties. During the mid-20th century, Borlaug led the introduction of these high-yielding varieties combined with modern agricultural production techniques to Mexico, Pakistan, and India. As a result, Mexico became a net exporter of wheat by 1963. Between 1965 and 1970, wheat yields nearly doubled in Pakistan and India, greatly improving the food security in those nations.
Borlaug was often called "the father of the Green Revolution", and is credited with saving over a billion people worldwide from starvation. According to Jan Douglas, executive assistant to the president of the World Food Prize Foundation, the source of this number is Gregg Easterbrook's 1997 article "Forgotten Benefactor of Humanity." The article states that the "form of agriculture that Borlaug preaches may have prevented a billion deaths." He was awarded the Nobel Peace Prize in 1970 in recognition of his contributions to world peace through increasing food supply.</p></div>
</body>
<a href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank" id="tribute-link"> <p class="link"> Learn More About Norman Borlaug<p>
</html>
This the code for the project but how do I display the images so anyone can see currently can see it since i have the images in a folder together but nobody else can I sent as an attached file to a friend it popped up for the most part but the images don't display on mobile or when i forward it to someone else / to the public as well.
Your images have a relative path--they need a full (absolute) path.
So change this: src="img/normanwithpeople.png"
To this: src="https://www.server.com/path/to/img/normanwithpeople.png"
I'm sending a reset password email from my Go RESTFUL web service to our users and I'm using Go SMTP and google Gsuite domain which info#mycompanyname.ca! I've tested it before and it works but when I send it to one of our users he gets Suspicious Link error. He's using the Gmail website. I checked the https and both my website and links are https and When he forwards the email to me I don't see this error anymore! Can anybody help me with this?
This is my code :
mime string = "MIME-version: 1.0;\nContent-Type: text/html;
charset=\"UTF-8\";\n\n"
hostname string = "smtp.gmail.com"
auth := smtp.PlainAuth("", username, password, hostname)
data := map[string]string{"Token": token}
buffer := new(bytes.Buffer)
t, err := template.ParseFiles(htmlFilename)
if err != nil {
return err
}
err = t.Execute(buffer, data)
if err != nil {
return err
}
msg := []byte(subject + mime + buffer.String())
reciever = append(reciever, clientMail)
return smtp.SendMail(hostname+":587", auth, "", reciever, msg)
}
And this is HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1.0, shrink-to-fit=no" name="viewport">
<meta name="author" content="some name">
<meta name="description" content="Entry HTML page for the dashboard">
</head>
<body style="max-width: 50rem; margin: auto; margin-top: 1rem;">
<img src="https://address in google drive" style="margin:auto;
display: block; width: 17rem; height: 4.6rem; position: relative; left: 50%; transform: translateX(-50%);"
alt="logo" title="company logo" />
<div style="margin-top: 0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray; background-color: #f9f9f9">
<h3>Hello!</h3>
<p>You receive this email because this is your first time logging in. To enter your account,
you will need to set a password. Click the button below to set it.</p>
<div style="text-align: center">
<a href="https://websiteAddress/#/changepasswordapi?token={{ .Token }}" target="_blank">
<button style="cursor: pointer; border: none; width: 50%; background-color: #ED5E28;
color: white; font-size: 1rem; height: 2.5rem;
border-radius: 0.35rem"><strong>Set Password</strong></button>
</a>
</div>
<p>If you didn't request this, please ignore this email. The password setup is only valid for the next 24 hours.</p>
<p>Thanks,</p>
<p>compaynName Team</p>
</div>
<div style="text-align: center; font-size: 0.8rem; color: gray">
<p>© 2019 companyName. All rights reserved.</p>
<p>company addr</p>
<P>company city</P>
</div>
</body>
</html>
Alright, I solved this problem. At first, I thought that might be G Suite problem, So I called them and I realized it's not because I could see our email in the inbox and not in the spam folder. So I tried this link and I request a review for our domain. After about 30 hours the problem was gone!
Im creating an newsletter email. It has a footer and the footer has some text altogether with some links to some of products. It works well in most inboxes, however on android 4.0, the links dont't allow more text to be next to them. They create a break-line.
See picture
Can you please help me out what's wrong with the code?
<table id="templateFooter" style="-ms-text-size-adjust: 100%; -webkit- text-size-adjust: 100%; background-color: #333; border-collapse: collapse !important; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td pardot-region="footer_content02" class="footerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #dbdbdb; font-family: Helvetica; font-size: 11px; line-height: 15px; text-align: left; padding: 20px;color:#aaa" align="left" valign="top"><span style="color:#fff;"><strong>ReviewPro</strong></span> is the leading provider of Guest Intelligence solutions to independent hotel brands worldwide. The company’s suite of cloud-based solutions includes <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/reputation-management-for-hotels/">Online Reputation Management (ORM)</a> and the <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/guest-survey-solution/">Guest Survey Solution (GSS)</a>, which enable clients to obtain a deeper understanding of reputation performance as well as operational/service strengths and weaknesses. We provide actionable insight to increase guest satisfaction, rankings on review sites/OTAs and ultimately revenue.<br>
The company offers the industry-standard <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com/products/global-review-index/">Global Review Index™ (GRI)</a>, an online reputation score, which is used by thousands of hotels worldwide as a benchmark for reputation management efforts, based on review data collected from 161 OTAs and review sites in more than 45 languages. More than 19,000 hotel brands worldwide are currently using ReviewPro’s solutions. For more information about ReviewPro, please visit <a style="color: rgb(255, 255, 255);" href="https://www.reviewpro.com">www.reviewpro.com</a>.</td>
</tr>
</tbody>
</table>
Here is the code
Recently I have been working on a contact form for my portfolio website. The form works and I have managed to successfully send HTML mail from the server it's hosted on to my email address. Like most of my emails, these will be primarily read on my iPod Touch so the theme I based the mail template on is engineered for a screen 320px by 480px.
Even though the mail container element is set to width:100% and the same on all inner elements, there is a ~20px gap at the right side of the screen, as if that's the edge of the document:
Here is the script and style-sheet for reference:
PHP (snippet), request_form.php:
...
$email_subject = "Graphic Request - ".clean_string($first_name);
$email_message .= '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/><link rel="stylesheet" href="http://blieque.comli.com/mail-styles.css" type="text/css"></head><body><table id="all" cellspacing="0" cellpadding="0">';
$email_message .= '<tr><td id="head"><h1>New Request</h1></td></tr>';
$email_message .= '<tr><td class="info"><span id="param">Name:</span> '.clean_string($first_name).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Email Address:</span> '.clean_string($email_from).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Service:</span> '.clean_string($service).'</td></tr>';
$email_message .= '<tr><td class="info sub jstfy"><span id="param">Details:</span> '.clean_string($request).'</td></tr>';
$email_message .= '<tr><td id="foot"></td></tr></table></body></html>';
...
CSS, mail-styles.css:
body {
margin: 0 !important;
font-family: Arial, Helvetica, sans-serif;
color: #242424 !important;
text-decoration: none !important;
}
#all {
width: 110%;
}
#head {
background: #1393A1;
color: #61BDC7;
border-bottom: solid 0.5em #61BDC7;
width: 100%;
padding: 1em 0.5em;
height: 20px;
}
td.sub {
border-top: solid 0.25em #1393a1;
}
td.info {
padding: 0.35em 0.5em;
font-size: 12pt;
}
td.jstfy {
text-align: justify;
}
span#param {
color: #1393a1;
font-weight: bold;
}
td[class=info] {
text-transform: capitalize;
}
#foot {
background: #1393a1;
width: 100%;
height: 20px;
color: transparent;
border-top: solid 0.5em #61BDC7;
}
#line {
background: #1393a1;
width: 94%;
height: 0.25em;
margin-left: auto;
margin-right: auto;
}
The email also doesn't work well with online email viewers as they tend to have their own overriding style-sheets for common tags like <h1>. I hope the solution is something obvious.
This worked for me:
html, body {
width: 100%;
padding: 0;
margin: 0;
}
When I used min-width instead of width, the content got too wide. I also have these viewport settings in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You could try adding min-width: 100% to the <body> element to deal with the gap.
And as the others suggested, moving your styles inline should deal with the rest of your problems.
Maybe try
html, body {
margin: 0;
padding: 0;
}
HTML emails don't handle external stylesheets very well so this may be your problem.
You should only use inline styles on HTML emails as a general rule of thumb.
Here's a good guide on HTML emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
This is happening because body has padding by default on most browsers. add:
body{
padding:0px;
}
I've dealt with this issue numerous times. Every time it occurs I always realize that it's happening because I'm using cellpadding incorrectly on one of my tables.
For example, I got caught up for a bit today because near the bottom of one of the emails I was working on there is a table with a press banner that stretches horizontally across the bottom like this:
<center><!-- Press Banner -->
<table border="0" cellpadding="15" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center">
<a role="link" href="#" target="_blank" title="#">
<span class="press">
<img class="desktop" src="#" border="0" style="display:block;">
</span>
</a>
</td>
</tr>
</table>
</center>
That image is 600 pixels wide and is switched for a 320 pixel wide background image for the mobile layout. I needed to add some vertical spacing between that block and the others so I chose to add cellpadding="15" to do so, without realizing that 15 pixels would also stretch out horizontally. But on the iOS device this is extra space only renders on the right side, not the left, so its not obvious what the problem is.
To fix it, I removed the cellpadding and used table spacers instead on the top and bottom.
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td height="4"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td>
</tr>
There are many other reasons that this issue could occur as other people have already mentioned, but just adding this potential cause for anyone else who may be overlooking the same error that I made.
Additionally as a rule of thumb, you should never import CSS in an HTML email, you should inline as much style as possible and use depreciated CSS2 tags and oldschool HTML styling elements whenever possible to achieve the highest level of cross device, client compability. I recently uploaded a project to github(link) which is the html email template I've created while building emails for some time. It's pretty much the most compatible template you'll find anywhere.