如何发送交互式电子邮件

时间:2017-07-18 08:33:12

标签: php html css email interactive

我正在尝试向客户发送互动电子邮件。在下面的代码content.html页面中包含仅包含html和css的电子邮件正文的内容。 sendmail.php会将电子邮件发送到收件人电子邮件地址。

电子邮件由sendmail.php成功发送,但在电子邮件中,html正文未按预期运行。

电子邮件的正文应该如下例所示: https://codepen.io/freshinbox/pen/worqww

但是电子邮件显示如下: sample image

我尝试使用gmail和hotmail帐户,但结果是一样的。

content.html

<html>
<head>
<style>
.keybox{
 display:inline-block;
border:10px solid black;
}
.keybox label{
width:65px;
height:55px;
display:none;
padding-top:5px;
font-size:40px;
text-align:center;
}  
#key1a:checked ~ .kinetic .box1 label:nth-child(2){
display:block;
}
#key1b:checked ~ .kinetic .box1 label:nth-child(3){
display:block;
}
#key1c:checked ~ .kinetic .box1 label:nth-child(4){
display:block;
}
#key1d:checked ~ .kinetic .box1 label:nth-child(1){
display:block;
}
</style>


</head>
<body>

<input id="key1a" name="key1" type=radio>
<input id="key1b" name="key1" type=radio>
<input id="key1c" name="key1" type=radio>
<input id="key1d" name="key1" type=radio checked><BR>
<div class="kinetic">  
<div class="keybox box1">
    <label for="key1a">X</label>
    <label for="key1b">G</label>
    <label for="key1c">H</label>
    <label for="key1d">A</label>
</div>
</div>    
</body>
</html>

sendmail.php

<?php
if(($Content = file_get_contents("content.html")) === false) {
    $Content = "";
}

$FromName = "Sample";
$FromEmail = "myemail@email.com";
$ReplyTo = "youremail@email.com";
$ToEmail = "youremail@email.com";
$Subject = "Test";

$Headers  = "MIME-Version: 1.0\n";
$Headers .= "Content-type: text/html; charset=iso-8859-1\n";
$Headers .= "From: ".$FromName." <".$FromEmail.">\n";
$Headers .= "Reply-To: ".$ReplyTo."\n";
$Headers .= "X-Sender: <".$FromEmail.">\n";
$Headers .= "X-Mailer: PHP\n"; 
$Headers .= "X-Priority: 1\n"; 
$Headers .= "Return-Path: <".$FromEmail.">\n";  

if(mail($ToEmail, $Subject, $Content, $Headers) == false) {
    echo "ERRRO!";
}
else{
    echo "OK!";
}
?>

1 个答案:

答案 0 :(得分:1)

某些浏览器不支持您使用的某些CSS规则,例如:

Gmail和Outlook均不支持~:nth-child

这里有一个很好的CSS支持指南:https://www.campaignmonitor.com/css/

虽然此图表没有说明 - 我相当确定Gmail和Outlook也不支持:checked

enter image description here

enter image description here

有些浏览器会允许您使用这些规则,但除非您故意针对某个特定电子邮件客户端的特定用户群,否则无法确定是否适合所有人。