如何在Contact Form 7表单提交成功后显示弹窗

要实现把CF7的提交成功消息改成弹出窗口展示，你可以通过监听CF7的原生JavaScript事件，替换默认的消息展示逻辑，具体步骤如下：

方法1：用原生alert弹窗（快速实现） #

这种方式无需额外HTML/CSS，直接用浏览器原生弹窗替换默认消息：

1. 找到主题的自定义JS区域（通常在WordPress后台「外观」→「自定义」→「额外JS」），或者在主题的functions.php文件中添加以下代码：

document.addEventListener('wpcf7mailsent', function(event) {
    // 隐藏CF7默认的成功消息容器
    const defaultMsg = document.querySelector('.wpcf7-response-output');
    if (defaultMsg) {
        defaultMsg.style.display = 'none';
    }
    // 弹出自定义成功提示
    alert('Thank you for your message. It has been sent.');
}, false);

方法2：自定义模态框（美观可控） #

如果想要更精致的弹窗样式，可以自己实现一个自定义模态框：

步骤1：添加模态框HTML #

将以下代码插入页面模板底部，或通过自定义HTML模块加到页面中：

<!-- CF7成功提示模态框 -->
<div id="cf7-success-modal" class="cf7-modal">
    <div class="cf7-modal-content">
        <span class="cf7-modal-close">&times;</span>
        <p>Thank you for your message. It has been sent.</p>
    </div>
</div>

步骤2：添加模态框样式 #

把以下CSS代码加到主题的自定义CSS区域或style.css文件里：

/* 模态框背景层 */
.cf7-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 模态框内容容器 */
.cf7-modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 2rem;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
}

/* 关闭按钮样式 */
.cf7-modal-close {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

.cf7-modal-close:hover {
    color: #000;
}

步骤3：添加模态框控制JS #

同样在自定义JS区域添加以下代码：

document.addEventListener('wpcf7mailsent', function(event) {
    // 隐藏默认消息
    const defaultMsg = document.querySelector('.wpcf7-response-output');
    if (defaultMsg) {
        defaultMsg.style.display = 'none';
    }
    // 显示自定义模态框
    const modal = document.getElementById('cf7-success-modal');
    modal.style.display = 'block';

    // 点击关闭按钮隐藏模态框
    const closeBtn = document.querySelector('.cf7-modal-close');
    closeBtn.onclick = function() {
        modal.style.display = 'none';
    }

    // 点击模态框外部区域隐藏
    window.onclick = function(e) {
        if (e.target === modal) {
            modal.style.display = 'none';
        }
    }
}, false);

关键说明 #

• wpcf7mailsent是Contact Form 7内置的事件，仅在表单提交且邮件发送成功时触发。
• 若需要处理表单提交失败的场景，可以监听wpcf7mailfailed事件，逻辑和上述代码一致。
• 确保CSS和JS代码能正确加载到页面中，若通过functions.php添加JS，建议用wp_enqueue_script规范加载。

内容的提问来源于stack exchange，提问作者Sumudu Perera