为WordPress添加一个邮箱联系表单

效果

联系我们

联系我们

×

联系我们

无论您是需要查找特定资源，还是有任何问题反馈，都可以通过下方表单与我们联系。我们的团队会尽快处理您的请求并给予回复。

我们提供的支持

• 各类软件资源查找
• 使用问题解答
• 功能缺陷反馈
• 新功能建议
• 活动信息咨询
• 业务合作洽谈

我们通常会在24小时内回复您的消息

您的用户名

邮件主题 请选择主题类型 资源查找 问题反馈 活动咨询 业务合作

资源名称

资源类型 请选择资源类型 源码 游戏 影视剧 电子书 小说 视频 软件 教程 图片素材 音频音乐 模板 插件 字体 数据集 文档 其他资源

问题类型 请选择问题类型 功能建议 资源问题 站点BUG 账号问题 登录问题 支付问题 内容举报 界面问题 性能问题 兼容性问题 其他问题

详细描述

发送邮件

如果您有好的建议一经采纳，站长将会给予相应奖励

安装

安装方法小工具复制粘贴即可，切记修改邮箱，功能是通过调起第三方邮箱软件实现的。

源码

<div id="wp-ec-container">
    <!-- 邮箱按钮容器（用于居中） -->
    <div class="wp-ec-button-wrapper">
        <!-- 邮箱按钮 -->
        <button id="wp-ec-button" class="wp-ec-button">
            <i class="fa fa-envelope-o"></i> 联系我们
        </button>
    </div>
   
    <!-- 弹窗表单 -->
    <div id="wp-ec-modal" class="wp-ec-modal-overlay">
        <div class="wp-ec-modal-container">
            <div class="wp-ec-modal-header">
                <h3 class="wp-ec-modal-title">联系我们</h3>
                <button id="wp-ec-close" class="wp-ec-close-button">×</button>
            </div>
            <div class="wp-ec-modal-content">
                <div class="wp-ec-email-container">
                    <div class="wp-ec-email-row">
                        <!-- 左侧说明文字 -->
                        <div class="wp-ec-email-col">
                            <div class="wp-ec-email-info">
                                <!-- 移除框架的logo -->
                                <div class="wp-ec-email-icon">
                                    <img src="https://wpocn.com/img/logo.png" alt="公司logo" class="wp-ec-custom-logo">
                                </div>
                                <h2 class="wp-ec-email-title">联系我们</h2>
                                <p class="wp-ec-email-intro">
                                    无论您是需要查找特定资源，还是有任何问题反馈，都可以通过下方表单与我们联系。我们的团队会尽快处理您的请求并给予回复。
                                </p>
                                
                                <div class="wp-ec-email-service-info">
                                    <h3 class="wp-ec-email-service-title">我们提供的支持</h3>
                                    <ul class="wp-ec-email-service-list">
                                        <li class="wp-ec-email-service-item">
                                            <i class="fa fa-search"></i>
                                            <span>各类软件资源查找</span>
                                        </li>
                                        <li class="wp-ec-email-service-item">
                                            <i class="fa fa-comments"></i>
                                            <span>使用问题解答</span>
                                        </li>
                                        <li class="wp-ec-email-service-item">
                                            <i class="fa fa-bug"></i>
                                            <span>功能缺陷反馈</span>
                                        </li>
                                        <li class="wp-ec-email-service-item">
                                            <i class="fa fa-lightbulb-o"></i>
                                            <span>新功能建议</span>
                                        </li>
                                        <li class="wp-ec-email-service-item">
                                            <i class="fa fa-calendar"></i>
                                            <span>活动信息咨询</span>
                                        </li>
                                        <li class="wp-ec-email-service-item">
                                            <i class="fa fa-handshake-o"></i>
                                            <span>业务合作洽谈</span>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div class="wp-ec-email-response-time">
                                    <i class="fa fa-clock-o"></i>
                                    <span>我们通常会在24小时内回复您的消息</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 右侧邮件框 -->
                        <div class="wp-ec-email-col">
                            <div class="wp-ec-email-form-wrapper">
                                <form id="wp-ec-email-form">
                                    <!-- 隐藏的收件人 -->
                                    <input type="email" id="wp-ec-email-to" value="wpocncom@163.com" style="display: none;" required>
                                    
                                    <!-- 用户名填写框 -->
                                    <div class="wp-ec-email-form-group">
                                        <label for="wp-ec-username">您的用户名</label>
                                        <input type="text" id="wp-ec-username" placeholder="请输入您的用户名" required>
                                    </div>
                                    
                                    <div class="wp-ec-email-form-group">
                                        <label for="wp-ec-email-subject">邮件主题</label>
                                        <select id="wp-ec-email-subject" required>
                                            <option value="">请选择主题类型</option>
                                            <option value="资源查找">资源查找</option>
                                            <option value="问题反馈">问题反馈</option>
                                            <option value="活动咨询">活动咨询</option>
                                            <option value="业务合作">业务合作</option>
                                        </select>
                                    </div>
                                    
                                    <!-- 资源查找专用字段 -->
                                    <div id="wp-ec-resource-fields" class="wp-ec-resource-fields">
                                        <div class="wp-ec-email-form-group">
                                            <label for="wp-ec-resource-name">资源名称</label>
                                            <input type="text" id="wp-ec-resource-name" placeholder="请输入需要查找的资源名称">
                                        </div>
                                        
                                        <div class="wp-ec-email-form-group">
                                            <label for="wp-ec-resource-type">资源类型</label>
                                            <select id="wp-ec-resource-type">
                                                <option value="">请选择资源类型</option>
                                                <option value="源码">源码</option>
                                                <option value="游戏">游戏</option>
                                                <option value="影视剧">影视剧</option>
                                                <option value="电子书">电子书</option>
                                                <option value="小说">小说</option>
                                                <option value="视频">视频</option>
                                                <option value="软件">软件</option>
                                                <option value="教程">教程</option>
                                                <option value="图片素材">图片素材</option>
                                                <option value="音频音乐">音频音乐</option>
                                                <option value="模板">模板</option>
                                                <option value="插件">插件</option>
                                                <option value="字体">字体</option>
                                                <option value="数据集">数据集</option>
                                                <option value="文档">文档</option>
                                                <option value="其他资源">其他资源</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <!-- 问题反馈专用字段 -->
                                    <div id="wp-ec-issue-fields" class="wp-ec-issue-fields">
                                        <div class="wp-ec-email-form-group">
                                            <label for="wp-ec-issue-type">问题类型</label>
                                            <select id="wp-ec-issue-type">
                                                <option value="">请选择问题类型</option>
                                                <option value="功能建议">功能建议</option>
                                                <option value="资源问题">资源问题</option>
                                                <option value="站点BUG">站点BUG</option>
                                                <option value="账号问题">账号问题</option>
                                                <option value="登录问题">登录问题</option>
                                                <option value="支付问题">支付问题</option>
                                                <option value="内容举报">内容举报</option>
                                                <option value="界面问题">界面问题</option>
                                                <option value="性能问题">性能问题</option>
                                                <option value="兼容性问题">兼容性问题</option>
                                                <option value="其他问题">其他问题</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="wp-ec-email-form-group">
                                        <label for="wp-ec-email-body">详细描述</label>
                                        <textarea id="wp-ec-email-body" rows="4" placeholder="请详细描述您的需求或问题..." required></textarea>
                                    </div>
                                    
                                    <button type="submit" class="wp-ec-email-send-btn">
                                        <i class="fa fa-paper-plane-o"></i> 发送邮件
                                    </button>
                                    
                                    <!-- 奖励说明文字 -->
                                    <p class="wp-ec-email-reward-info">
                                        <i class="fa fa-gift"></i> 如果您有好的建议一经采纳，站长将会给予相应奖励
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 通知提示 -->
    <div id="wp-ec-notification" class="wp-ec-email-notification"></div>
</div>

<style>
/* 所有样式使用独特前缀wp-ec-避免冲突 */
#wp-ec-container {
    display: block !important;
    width: 100% !important;
    clear: both !important;
}

/* 按钮容器 - 用于居中显示 */
.wp-ec-button-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin: 15px 0 !important; /* 减小外边距 */
    padding: 0 !important;
}

/* 邮箱按钮样式 - 透明背景 */
.wp-ec-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: transparent !important;
    color: #2563eb !important;
    border: 1px solid #2563eb !important;
    padding: 10px 16px !important; /* 减小按钮大小 */
    border-radius: 6px !important;
    font-size: 14px !important; /* 减小字体 */
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.wp-ec-button:hover {
    background-color: #2563eb !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3) !important;
}

.wp-ec-button i {
    font-size: 16px !important; /* 减小图标 */
}

/* 弹窗遮罩层 */
.wp-ec-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.wp-ec-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 弹窗容器 - 缩小整体框架 */
.wp-ec-modal-container {
    background-color: white !important;
    border-radius: 10px !important;
    width: 90% !important;
    max-width: 900px !important; /* 减小最大宽度 */
    max-height: 90vh !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(20px) !important;
    transition: transform 0.3s ease !important;
    overflow: hidden !important;
    border: none !important;
}

.wp-ec-modal-overlay.active .wp-ec-modal-container {
    transform: translateY(0) !important;
}

/* 弹窗头部 */
.wp-ec-modal-header {
    padding: 12px 20px !important; /* 减小内边距 */
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
}

.wp-ec-modal-title {
    font-size: 16px !important; /* 减小字体 */
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.wp-ec-close-button {
    background: none !important;
    border: none !important;
    font-size: 18px !important; /* 减小按钮 */
    cursor: pointer !important;
    color: #64748b !important;
    transition: color 0.2s ease !important;
    padding: 4px !important;
    line-height: 1 !important;
}

.wp-ec-close-button:hover {
    color: #ef4444 !important;
}

/* 弹窗内容区 */
.wp-ec-modal-content {
    padding: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* 联系表单样式 */
.wp-ec-email-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wp-ec-email-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important; /* 减小间距 */
    align-items: stretch !important;
    max-height: calc(90vh - 50px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wp-ec-email-col {
    flex: 1 !important;
    min-width: 250px !important; /* 减小最小宽度 */
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    margin: 0 !important;
}

.wp-ec-email-info {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding: 20px !important; /* 减小内边距 */
    width: 100% !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 !important;
}

/* 自定义logo样式 - 移除框架 */
.wp-ec-email-icon {
    width: auto !important; /* 自动适应logo大小 */
    height: auto !important;
    background-color: transparent !important; /* 移除背景色 */
    border-radius: 0 !important; /* 移除圆角 */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 左对齐 */
    margin-bottom: 12px !important;
    box-shadow: none !important; /* 移除阴影 */
    padding: 0 !important;
}

.wp-ec-custom-logo {
    max-width: 120px !important; /* 限制最大宽度 */
    max-height: 80px !important; /* 限制最大高度 */
    object-fit: contain !important;
}

/* 右侧表单区域 - 缩小内容 */
.wp-ec-email-form-wrapper {
    background-color: #ffffff !important;
    padding: 20px !important; /* 减小内边距 */
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important; /* 整体缩小字体 */
}

.wp-ec-email-title {
    color: #1e293b !important;
    font-size: 20px !important; /* 减小标题 */
    margin-bottom: 12px !important;
    margin-top: 0 !important;
    position: relative !important;
    padding-bottom: 8px !important;
}

.wp-ec-email-title:after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 40px !important; /* 缩小下划线 */
    height: 2px !important;
    background-color: #2563eb !important;
    border-radius: 3px !important;
}

.wp-ec-email-intro {
    color: #475569 !important;
    font-size: 13px !important; /* 减小字体 */
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

.wp-ec-email-service-title {
    color: #1e293b !important;
    font-size: 15px !important; /* 减小字体 */
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
}

.wp-ec-email-service-title:before {
    content: '' !important;
    width: 3px !important; /* 缩小标记 */
    height: 16px !important;
    background-color: #2563eb !important;
    border-radius: 2px !important;
    margin-right: 8px !important;
}

.wp-ec-email-service-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.wp-ec-email-service-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important; /* 减小间距 */
    color: #475569 !important;
    padding: 4px 0 !important;
    transition: transform 0.2s ease !important;
    font-size: 13px !important; /* 减小字体 */
}

.wp-ec-email-service-item i {
    color: #2563eb !important;
    margin-right: 8px !important;
    width: 16px !important; /* 减小图标 */
    font-size: 14px !important;
}

.wp-ec-email-response-time {
    display: flex !important;
    align-items: center !important;
    color: #64748b !important;
    font-size: 12px !important; /* 减小字体 */
    padding: 12px !important; /* 减小内边距 */
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 6px !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

.wp-ec-email-form-group {
    margin-bottom: 12px !important; /* 减小间距 */
}

.wp-ec-email-form-group label {
    display: block !important;
    margin-bottom: 6px !important; /* 减小间距 */
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 13px !important; /* 减小字体 */
}

.wp-ec-email-form-group input,
.wp-ec-email-form-group select,
.wp-ec-email-form-group textarea {
    width: 100% !important;
    padding: 10px 12px !important; /* 减小输入框 */
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 13px !important; /* 减小字体 */
    transition: all 0.3s ease !important;
}

.wp-ec-email-form-group input:focus,
.wp-ec-email-form-group select:focus,
.wp-ec-email-form-group textarea:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; /* 缩小焦点效果 */
}

/* 资源和问题字段样式 */
.wp-ec-resource-fields, .wp-ec-issue-fields {
    display: none;
    margin: 12px 0 16px 0 !important; /* 减小间距 */
    padding: 12px !important; /* 减小内边距 */
    background-color: #f8fafc !important;
    border-radius: 6px !important;
    border-left: 3px solid #2563eb !important; /* 缩小边框 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    opacity: 0 !important;
    transform: translateY(10px) !important; /* 减小动画距离 */
}

.wp-ec-resource-fields.show, .wp-ec-issue-fields.show {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.wp-ec-email-send-btn {
    background-color: #2563eb !important;
    color: white !important;
    border: none !important;
    padding: 10px 14px !important; /* 减小按钮 */
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important; /* 减小字体 */
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    justify-content: center !important;
}

.wp-ec-email-send-btn:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-2px) !important;
}

.wp-ec-email-reward-info {
    color: #64748b !important;
    font-size: 11px !important; /* 减小字体 */
    text-align: center !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

.wp-ec-email-notification {
    position: fixed !important;
    bottom: 20px !important; /* 调整位置 */
    right: 20px !important;
    padding: 12px 20px !important; /* 减小通知 */
    border-radius: 6px !important;
    color: white !important;
    font-weight: 500 !important;
    font-size: 13px !important; /* 减小字体 */
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.4s ease !important;
    z-index: 99999 !important;
}

.wp-ec-email-notification.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.wp-ec-email-notification.success {
    background-color: #10b981 !important;
}

.wp-ec-email-notification.error {
    background-color: #ef4444 !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .wp-ec-email-row {
        flex-direction: column !important;
        max-height: none !important;
    }
    
    .wp-ec-modal-container {
        max-height: 95vh !important;
    }
}
</style>

<script>
// 使用IIFE隔离作用域，避免与WordPress其他脚本冲突
(function() {
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 检查是否存在Font Awesome，如果不存在则加载
        if (!document.querySelector('link[href*="font-awesome"]')) {
            const faLink = document.createElement('link');
            faLink.rel = 'stylesheet';
            faLink.href = 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css';
            document.head.appendChild(faLink);
        }
        
        // 获取元素（使用独特ID避免冲突）
        const emailButton = document.getElementById('wp-ec-button');
        const emailModal = document.getElementById('wp-ec-modal');
        const closeButton = document.getElementById('wp-ec-close');
        const emailForm = document.getElementById('wp-ec-email-form');
        const subjectSelect = document.getElementById('wp-ec-email-subject');
        const resourceFields = document.getElementById('wp-ec-resource-fields');
        const issueFields = document.getElementById('wp-ec-issue-fields');
        const notification = document.getElementById('wp-ec-notification');
        const usernameInput = document.getElementById('wp-ec-username');
        
        // 防止元素未找到的错误
        if (!emailButton || !emailModal || !closeButton || !emailForm) {
            console.error('联系表单元素未找到');
            return;
        }
        
        // 打开弹窗
        emailButton.addEventListener('click', function(e) {
            e.stopPropagation();
            emailModal.classList.add('active');
            document.body.style.overflow = 'hidden';
        });
        
        // 关闭弹窗
        function closeModal() {
            emailModal.classList.remove('active');
            document.body.style.overflow = '';
        }
        
        closeButton.addEventListener('click', closeModal);
        
        // 点击遮罩层关闭弹窗
        emailModal.addEventListener('click', function(e) {
            if (e.target === emailModal) {
                closeModal();
            }
        });
        
        // 按ESC键关闭弹窗
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && emailModal.classList.contains('active')) {
                closeModal();
            }
        });
        
        // 主题选择变化时显示/隐藏相应字段
        if (subjectSelect && resourceFields && issueFields) {
            // 初始化隐藏
            resourceFields.classList.remove('show');
            issueFields.classList.remove('show');
            
            subjectSelect.addEventListener('change', function() {
                // 先隐藏所有特殊字段
                resourceFields.classList.remove('show');
                issueFields.classList.remove('show');
                
                // 根据选择显示相应字段
                if (this.value === '资源查找') {
                    resourceFields.classList.add('show');
                } else if (this.value === '问题反馈') {
                    issueFields.classList.add('show');
                }
            });
        }
        
        // 处理表单提交
        emailForm.addEventListener('submit', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // 获取表单值
            const toInput = document.getElementById('wp-ec-email-to');
            const bodyInput = document.getElementById('wp-ec-email-body');
            
            if (!toInput || !bodyInput) return;
            
            const to = toInput.value;
            const username = usernameInput ? usernameInput.value : '';
            const subject = subjectSelect ? subjectSelect.value : '';
            let body = bodyInput.value;
            
            // 收集相关信息
            let extraInfo = username ? `用户名：${username}\n` : '';
            
            if (subject === '资源查找') {
                const resourceName = document.getElementById('wp-ec-resource-name');
                const resourceType = document.getElementById('wp-ec-resource-type');
                
                if (resourceName && resourceName.value) extraInfo += `资源名称：${resourceName.value}\n`;
                if (resourceType && resourceType.value) extraInfo += `资源类型：${resourceType.value}\n`;
            } else if (subject === '问题反馈') {
                const issueType = document.getElementById('wp-ec-issue-type');
                if (issueType && issueType.value) extraInfo += `问题类型：${issueType.value}\n`;
            }
            
            if (extraInfo) extraInfo += '\n';
            
            // 验证必要字段
            if (!username) {
                showNotification('请输入您的用户名', 'error');
                return;
            }
            
            if (!body) {
                showNotification('请输入详细描述', 'error');
                return;
            }
            
            // 构建完整的邮件内容
            const fullBody = `${extraInfo}详细描述：\n${body}`;
            
            // 构建mailto链接
            let mailtoLink = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(fullBody)}`;
            
            // 按钮加载状态
            const submitBtn = emailForm.querySelector('.wp-ec-email-send-btn');
            if (submitBtn) {
                const originalText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 发送中...';
                
                // 打开邮件客户端并处理状态
                setTimeout(() => {
                    window.location.href = mailtoLink;
                    
                    // 显示成功通知
                    showNotification('邮件已准备发送', 'success');
                    
                    // 恢复按钮状态
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                    
                    // 2秒后关闭弹窗
                    setTimeout(() => {
                        closeModal();
                        emailForm.reset();
                        resourceFields.classList.remove('show');
                        issueFields.classList.remove('show');
                    }, 2000);
                }, 800);
            }
        });
        
        // 显示通知
        function showNotification(message, type = 'success') {
            if (!notification) return;
            
            const icon = type === 'success' ? 
                '<i class="fa fa-check-circle"></i>' : 
                '<i class="fa fa-exclamation-circle"></i>';
                
            notification.innerHTML = `${icon}${message}`;
            notification.className = `wp-ec-email-notification ${type}`;
            notification.classList.add('show');
            
            // 3秒后隐藏通知
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
    });
})();
</script>