【问题标题】:Concrete5 email not rendering correctlyConcrete5 电子邮件未正确呈现
【发布时间】:2020-08-01 05:51:40
【问题描述】:

不知何故,当我从 cocrete5 cms 发送电子邮件时,它在 gmail 中无法正确呈现。 它删除了一个完整的样式标签,但行为不连续。

这是我的电子邮件模板。我使用 swiftmailer 在 mailchimp、sendgrid、phalcon 框架中尝试了这个 hmtl,并且在所有平台(gmail、safari、outlook.. 等)的任何地方都可以输出。

<?php
$subject = 'New registration';

/*
 * HTML BODY START
 */
ob_start();

?>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="x-apple-disable-message-reformatting">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
    </head>
    <body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">
    <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="position: relative; opacity: 1; top: 0px; left: 0px;">
        <tbody>
        <tr>
            <td align="center" style="background-color: #dbe5ea;padding-left: 8px;padding-right: 8px;padding-top: 32px;">
                <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width: 800px;margin: 0 auto;">
                    <tbody>
                    <tr>
                        <td align="center" style="font-family: Helvetica, Arial, sans-serif;margin-top: 0px;margin-bottom: 0px;font-size: 16px;line-height: 24px;background-color: #ffffff;border-radius: 4px 4px 0px 0px;padding-left: 16px;padding-right: 16px;padding-top: 24px;padding-bottom: 24px;">
                            <p style="margin-top: 0px;margin-bottom: 0px;"><a href="https://grindfit.hu/" style="text-decoration: none;outline: none;color: #126de5;">
                            <img src="https://grindfit.hu/application/themes/grindfit/images/logo_black.png" width="250" alt="grindfit" style="max-width: 250px;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;height: auto;outline: none;text-decoration: none;"></a>
                            </p>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td align="center" style="background-color: #dbe5ea;padding-left: 8px;padding-right: 8px;">
                <table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 800px;margin: 0 auto;">
                    <tr>
                        <td align="center" style="background-color: #ebf5fa;padding-left: 24px;padding-right: 24px;padding-top: 64px;padding-bottom: 64px;">
                            <div style="font-family: Helvetica, Arial, sans-serif;margin-top: 0px;margin-bottom: 0px;font-size: 19px;line-height: 28px;max-width: 584px;color: #82899a;text-align: center;">
                                <table cellspacing="0" cellpadding="0" border="0" style="text-align: center; margin-left: auto; margin-right: auto;">
                                    <tr>
                                        <td align="center" style="font-family: Helvetica, Arial, sans-serif;margin-top: 0px;margin-bottom: 0px;font-size: 16px;line-height: 24px;border: 2px solid #3797dd;border-radius: 96px;padding-left: 16px;padding-right: 16px;padding-top: 16px;padding-bottom: 16px;">
                                            <img src="https://grindfit.hu/application/themes/grindfit/images/email/check.png" width="48" height="48" alt="" style="max-width: 48px;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;height: auto;outline: none;text-decoration: none;" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-size: 24px; line-height: 24px; height: 24px;">
                                            &nbsp;
                                        </td>
                                    </tr>
                                </table>
                                <h2 style="font-family: Helvetica, Arial, sans-serif;font-weight: bold;margin-top: 0px;margin-bottom: 4px;color: #242b3d;font-size: 30px;line-height: 39px;">
                                    Kérdőív feliratkozás
                                </h2>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
        <tbody>
        <tr>
            <td align="center" style="background-color: #dbe5ea;padding-left: 8px;padding-right: 8px;">
                <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width: 800px;margin: 0 auto;">
                    <tbody>
                    <tr>
                        <td align="center" style="background-color: #ffffff;padding-left: 24px;padding-right: 24px;padding-top: 16px;padding-bottom: 16px;">
                            <div style="font-family: Helvetica, Arial, sans-serif;margin-top: 0px;margin-bottom: 0px;font-size: 16px;line-height: 24px;max-width: 584px;color: #424651;text-align: center;">
                                <p style="margin-top: 0px;margin-bottom: 10px;">Az alábbi adatokkal kérdőívet töltöttek ki és feliratkoztak a hírlevélre.</p><br>
                                Név: <?php echo $name; ?> <br>
                                Telefonszám: <?php echo $telephone; ?> <br>
                                Üzenet: <?php echo $message; ?> <br>
                                Email: <?php echo $email; ?> <br>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation">
        <tbody>
        <tr>
            <td align="center" style="background-color: #dbe5ea;padding-left: 8px;padding-right: 8px;padding-bottom: 32px;">
                <table width="100%" cellspacing="0" cellpadding="0" border="0" role="presentation" style="max-width: 800px;margin: 0 auto;">
                    <tbody>
                    <tr>
                        <td align="center" style="background-color: rgb(31, 31, 31); border-radius: 0px 0px 4px 4px; padding: 32px 24px;">
                            <div style="font-family: Helvetica, Arial, sans-serif; margin-top: 0px; margin-bottom: 0px; font-size: 14px; line-height: 21px; max-width: 584px; color: rgb(222, 222, 222);">
                                <p style="margin-top: 0px;margin-bottom: 16px;">
                                    <a href="https://grindfit.hu/" style="text-decoration: none; outline: none; color: rgb(222, 222, 222);">
                                        <img src="https://grindfit.hu/application/themes/grindfit/images/logo_white.png" width="200" height="76" alt="grindfit" style="max-width: 200px;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;height: auto;outline: none;text-decoration: none;">
                                    </a>
                                </p>
                                <p style="margin-top: 0px;margin-bottom: 16px;">
                                    <a href="https://www.facebook.com/grindfithu/" style="text-decoration: none;outline: none;color: #ffffff;">
                                        <img src="https://grindfit.hu/application/themes/grindfit/images/email/facebook.png" width="36" height="36" alt="Facebook" style="max-width: 36px;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;height: auto;outline: none;text-decoration: none;">
                                    </a>
                                </p>
                                <p style="margin-top: 0px;margin-bottom: 16px;">©2020 grindfit.hu</p>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div style="font-size: 64px; line-height: 64px; height: 64px;">&nbsp;</div>
            </td>
        </tr>
        </tbody>
    </table>
    </body>
</html>

<?php
$bodyHTML = ob_get_clean();

当我在 gmail 中查看这封电子邮件时,我上传了我的控制台图片。我还标记了样式标签消失的位置。 还有另一种情况,样式标签存在,但某些属性中存在额外空间,例如 max-width: 1 80 px;

gmail console

感谢您的帮助!

【问题讨论】:

    标签: email html-email concrete5 email-templates


    【解决方案1】:

    concrete5 根本不接触 HTML 模板。

    问题在于 Gmail 删除了大多数样式。我认为您对此无能为力。

    【讨论】:

    • 我不太确定concrete5 不会触及HTML。如果它在其他平台上工作,为什么不是这个?像 WordPress、Concrete5 等 CMS 的情况通常是它们使用 web 编辑器,而不是电子邮件编辑器,并且 Web 编辑器会删除它认为不严格有效的任何内容。 @user1874211 您可以尝试关闭编辑器上的所有验证吗?
    • 很容易检查实际到达您收件箱的内容:只需保存您收到的原始电子邮件并检查其 html 代码
    猜你喜欢
    • 2018-04-18
    • 2011-10-28
    • 1970-01-01
    • 2022-01-24
    • 2017-03-06
    • 2018-12-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多