FormEmailer 将 CSS 内联删除到 Gmail

如何解决FormEmailer 将 CSS 内联删除到 Gmail

我已经设置了一个 FormEmailer 脚本以在我正在处理的表单/工作表上运行。当前的目标是在表单提交后将电子邮件发送给特定的人，其中包含表格（两列、六行）中的问题和答案。

目前，我在 FormEmailer 中的 HTML 代码如下所示：

<h1>Hello!</h1>
<br>
<p>A new SAP Role request has been submitted to the Google Sheet. Please tend to this when you get a chance.</p>
<p>Thank you!</p>

<style>
table {
  font-family: arial,sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,th {
  border: 4px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<table>
    <thead>
        <tr>
            <th colspan="2">Form Submissions:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><b>Timestamp:</b></td>
            <td>#Timestamp|M/d/yyyy H:mm:ss#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Email Address:</b></td>
            <td>#Email Address#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Name,Department,Supervisor:</b></td>
            <td>#Name,Supervisor#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>User ID:</b></td>
            <td>#User ID#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Department:</b></td>
            <td>#Department#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Job Responsibilities:</b></td>
            <td>#Job Responsibilities#</td>
        </tr>
    </tbody>
     
   
</table> 

                                    

不幸的是，GMail 似乎以某种方式剥离了 CSS 代码，因此需要进行 CSS 内联。我将代码通过 GitHub 上的 Juice CSS Inliner 调整为如下所示：

<h1>Hello!</h1>
<br>
<p>A new SAP Role request has been submitted to the Google Sheet. Please tend to this when you get a chance.</p>
<p>Thank you!</p>


<table class="gmail-table" style="border: solid 2px #DDEEEE;border-collapse: collapse;border-spacing: 0;font: normal 14px Roboto,sans-serif;">>
    <thead>
        <tr>
            <th colspan="2" style="background-color: #DDEFEF;border: solid 1px #DDEEEE;color: #336B6B;padding: 10px;text-align: left;text-shadow: 1px 1px 1px #fff;">Form Submissions:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Timestamp:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Timestamp|M/d/yyyy H:mm:ss#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Email Address:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Email Address#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Name,Supervisor:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Name,Supervisor#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>User ID:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#User ID#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Department:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Department#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Job Responsibilities:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Job Responsibilities#</td>
        </tr>
    </tbody>
     
   
</table>

这会使发送的电子邮件变得更糟，从最终产品中删除多个元素。奇怪的是，如果我要在 Gmail 的电子邮件中放置表情符号，检查元素，然后用 CSS Inliner 代码的 HTML 替换该表情符号的 HTML，那么当我将它发送给自己时，该表格的格式就好了.

那么 FormEmailer 是否会在进入 Gmail 之前剥离 CSS？或者我可以做些什么来格式化 FormEmailer 中的代码，以便它作为 Gmail 响应中的表格出现？