Email gửi từ Contact Form 7 đến quản trị viên mặc định trông rất đơn điệu và không chuyên nghiệp.

Tạo HTML Email template cho Contact form 7 trong đẹp hơn chỉ cần chút tùy chỉnh HTML và CSS là chúng ta sẽ thay đổi được vấn đề. Bổ sung thêm logo, thông điệp và nội dung của form cho người nhận.

Dưới đây là mẫu bạn có thể tham khảo và sử dụng.

<div style="background-color:#f7f7f7;">
    <div style="max-width:650px;margin:0 auto">
        <table cellpadding="0" cellspacing="0" align="center" width="100%">
            <tr>
                <td valign="top">
                    <table cellpadding="0" cellspacing="0" width="100%" align="center" style="background:rgba(0,0,0,0.1);margin:20px 0;">
                        <tr>
                            <td width="10"></td>
                            <td width="99%" style="background-color:#ffffff; padding:15px" valign="top">
                                <table cellpadding="0" cellspacing="0" width="100%">
                                    <tr><td height="110" align="center" valign="top"><a href="[_site_url]"><img src='[điền link logo của bạn]' width="150px"/></a></td></tr>
                                    <tr><td style="background:#9acb51;color:#ffffff; font-size:18px; text-transform:capitalize; font-family:sans-serif; font-weight:bold; padding:10px;"><p style="margin:0">Liên hệ từ Website [_site_title]</p></td></tr>
                                    <tr><td style="color:#999999; font-weight:bold; font-size:16px;"><p style="margin: 15px 0 0;">Xin chào!</p></td></tr>
                                    <tr><td style="color:#999999; font-size:16px;padding:15px 0px;"><p style="margin:0">Bạn có một khách hàng liên hệ từ trang website của bạn!</p></td></tr>
                                    <tr>
                                        <td valign="top" style="background-color:#f8f8f8; padding:5px">
                                            <table cellpadding="0" cellspacing="0" width="100%" style="background-color:#f1f1f1; color:#555555; font-size:14px; font-family:sans-serif;">
                                                <tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px"><p style="margin:0">Họ tên</p></td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;"><p style="margin:0">[your-name]</p></td></tr>
                                                <tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px"><p style="margin:0">Số Điện Thoại (Zalo)</p></td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;"><p style="margin:0">[your-phone]</p></td></tr>
                                                <tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px"><p style="margin:0">Email</p></td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;"><p style="margin:0">[your-email]</p></td></tr>
                                                <tr><td width="40%" style="color:#999999; font-size:14px; font-weight:bold; font-family:sans-serif; border-right:2px solid #f8f8f8; border-bottom:2px solid #f8f8f8; text-transform:capitalize; padding:15px 10px"><p style="margin:0">Tin nhắn</p></td><td style="color:#555555; font-size:14px; font-family:sans-serif; border-bottom:1px solid #f8f8f8; padding:15px 10px;"><p style="margin:0">[your-message]</p></td></tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                                <br><br>
                                <p style="padding-top:15px;border-top:2px solid #f8f8f8;font-size:13px;color:#999999">Email này được gửi đến từ form liên hệ của website [_site_title] ([_site_url]) | Vui lòng không trả lời lại email này.</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>

 

Dán code trên vào Cấu hình email -> Nội dung tin nhắn

Thay đổi link logo và các shortcode cf7 phù hợp với mẫu của bạn.

Tích chọn Sử dụng mã HTML cho phần nội dung của thư.

Test form và vào email xem thành quả. Chúc bạn thành công!