如何发送交互式电子邮件

问题描述：

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

电子邮件由sendmail.php成功发送，但在电子邮件中，html正文未按预期工作。

体电子邮件的应该工作在这个例子： https://codepen.io/freshinbox/pen/worqww

但电子邮件显示为这样：

我试图与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 = "m[email protected]"; 
$ReplyTo = "[email protected]"; 
$ToEmail = "[email protected]"; 
$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!"; 
} 
?>

您不能在电子邮件中嵌入或包含样式表。你需要内联。鉴于你的东西，你无法以这种方式发送任何交互式内容。 –

使用'inline-css'在html中添加样式。发送邮件时不能使用这样的CSS。 –

@PraveenKumar看看[this]（https://www.emailonacid.com/blog/article/email-development/code-tutorial-how-to-build-an-interactive-puzzle-in-email?utm_referrer=freshinbox .com）的例子。他们说我们可以发送互动电子邮件。 –

答

有些浏览器不支持某些的你已经使用了CSS规则，例如：

Gmail和Outlook都不支持~或:nth-child。

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

虽然此图不说 - 我相当肯定的Gmail和Outlook也不支持:checked。

一些浏览器可以让你使用这些规则，但除非你是故意带有一定的电子邮件客户端针对特定用户组，有得到它的权利没有确切方法为了所有人。

哈！我正在寻找这个链接...并且您发布了。 –

@Albzi你能告诉我做这个炒锅还是有任何教程，我可以跟随发送任何电子邮件客户端的交互式电子邮件 –

@chalithageekiyanage不幸的是，如果你看看链接中的图表，你会发现不是每个浏览器都支持CSS中的所有规则。电子邮件一直是一场战斗，不幸的是，您将无法创建适用于每个客户的交互式电子邮件。 – Albzi

如何发送交互式电子邮件

相关推荐