求助：WordPress Contact Form 7提交后在新窗口展示用户提交数据的方案

方法一：通过CF7 JavaScript钩子实现前端快速预览 #

利用Contact Form 7提供的前端JS钩子，在表单提交成功后直接收集数据并在新窗口渲染：

1. 添加自定义JavaScript代码
   在主题的footer.php文件末尾（或通过自定义JS管理插件）插入以下代码：

document.addEventListener( 'wpcf7submit', function( event ) {
    // 替换为你的表单数字ID（可在CF7短代码中找到，比如[id="123"]里的123）
    if ( event.detail.contactFormId !== 123 ) return;

    // 收集并过滤表单数据（排除CF7内部字段）
    const formData = new FormData( event.target );
    const submitData = {};
    formData.forEach( (value, key) => {
        if ( !key.startsWith('_wpcf7') ) {
            submitData[key] = value;
        }
    });

    // 创建新窗口并渲染数据
    const previewWindow = window.open('', '_blank');
    previewWindow.document.write(`
        <html>
            <head>
                <title>提交内容预览</title>
                <style>
                    body{font-family:system-ui, Arial;padding:2rem;max-width:800px;margin:0 auto;}
                    .data-item{margin:1rem 0;padding:.5rem;border-bottom:1px solid #eee;}
                    .data-label{font-weight:600;display:inline-block;min-width:120px;}
                </style>
            </head>
            <body>
                <h2>你的提交内容</h2>
    `);
    // 循环渲染字段，可根据实际字段修改友好名称
    for (const [key, value] of Object.entries(submitData)) {
        const fieldLabel = key === 'your-name' ? '姓名' : 
                          key === 'your-email' ? '邮箱' : 
                          key === 'your-message' ? '留言内容' : 
                          ucFirst(key.replace('-', ' '));
        previewWindow.document.write(`<div class="data-item"><span class="data-label">${fieldLabel}:</span> ${value}</div>`);
    }
    previewWindow.document.write('</body></html>');
    previewWindow.document.close();

    // 辅助函数：首字母大写
    function ucFirst(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
}, false );

2. 测试验证
   提交表单后，会自动弹出新标签页，展示所有用户填写的字段内容。

方法二：自定义感谢页+会话存储传递数据（适合美观化展示） #

如果需要更精致的展示样式，可以创建独立感谢页，通过会话存储传递数据：

1. 创建自定义感谢页面
   在WordPress后台新建页面（比如命名为“提交预览”），用于展示提交数据。

2. 添加PHP钩子存储提交数据
   在主题的functions.php文件中插入以下代码：

add_action( 'wpcf7_mail_sent', 'cf7_save_submission_to_session' );
function cf7_save_submission_to_session( $contact_form ) {
    // 替换为你的表单ID
    if ( $contact_form->id() !== 123 ) return;

    session_start();
    $submission = WPCF7_Submission::get_instance();
    if ( $submission ) {
        $posted_data = $submission->get_posted_data();
        // 过滤CF7内部字段
        $filtered_data = array_filter($posted_data, function($key) {
            return !str_starts_with($key, '_wpcf7');
        }, ARRAY_FILTER_USE_KEY);
        $_SESSION['cf7_submit_data'] = $filtered_data;
    }
}

3. 添加短代码用于展示数据
   继续在functions.php中添加短代码函数：

add_shortcode( 'cf7_submission_display', 'cf7_render_submission_data' );
function cf7_render_submission_data() {
    session_start();
    if ( empty( $_SESSION['cf7_submit_data'] ) ) {
        return '<p>暂无提交数据，请先完成表单提交。</p>';
    }

    $data = $_SESSION['cf7_submit_data'];
    // 清除会话数据，避免重复展示
    unset( $_SESSION['cf7_submit_data'] );

    $html = '<h2>你的提交内容</h2><div class="submit-data-container">';
    foreach ( $data as $key => $value ) {
        $label = match($key) {
            'your-name' => '姓名',
            'your-email' => '邮箱',
            'your-message' => '留言内容',
            default => ucwords(str_replace('-', ' ', $key))
        };
        $html .= "<div class='data-row'><span class='data-label'>{$label}:</span> <span class='data-value'>{$value}</span></div>";
    }
    $html .= '</div>';
    return $html;
}

然后在自定义感谢页面中插入短代码[cf7_submission_display]。

4. 设置CF7并添加打开新窗口的JS

• 在CF7表单的“邮件”设置中，将“感谢页面URL”设为自定义感谢页的链接。
• 添加JS代码实现提交后打开新窗口：

document.addEventListener( 'wpcf7submit', function( event ) {
    if ( event.detail.contactFormId !== 123 ) return;
    // 替换为你的感谢页URL
    window.open('https://你的域名/提交预览/', '_blank');
}, false );

注意事项 #

• 使用缓存插件时，需排除自定义感谢页的缓存，避免数据无法正常展示。
• 敏感数据建议使用会话存储传递，不要通过URL参数暴露。
• 可自行添加CSS样式，优化数据展示的排版和外观。

内容的提问来源于stack exchange，提问作者Muhammad Tayyab