如何利用Contact Form 7的wpcf7_feedback_response在AJAX响应中输出HTML？

问题描述 #

在Contact Form 7表单提交后，尝试通过wpcf7_feedback_response过滤器在AJAX响应中输出隐藏iframe，但iframe代码仅以字符串形式显示，无法被浏览器渲染。原代码如下：

add_filter('wpcf7_feedback_response', function($response, $result) {
    $iframe_url = "https://software.loks.com/handler239" . "email=" . urlencode($_POST['email']) . "&company=" . urlencode($_POST['company']) . "&phone=" . urlencode($_POST['phone']);

    $iframe_html = '<iframe src="' . $iframe_url . '" width="1" height="1" style="display:none;"></iframe>';
    $response['message'] = $iframe_html;

    return $response;
}, 10, 2);

问题原因 #

Contact Form 7会自动对wpcf7_feedback_response返回的message字段内容进行HTML转义，导致HTML标签被转换为实体字符，无法被浏览器解析渲染。

解决方案 #

方案一：使用wpcf7_mail_sent钩子直接输出iframe #

利用wpcf7_mail_sent动作钩子，在邮件发送完成后直接输出iframe代码，该钩子的输出会被CF7的AJAX回调直接插入页面，不会被转义：

add_action('wpcf7_mail_sent', function ($contact_form) {
    // 获取表单提交数据
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) return;

    $posted_data = $submission->get_posted_data();
    // 提取并编码字段值，避免直接使用$_POST带来的安全风险
    $email = urlencode($posted_data['email'] ?? '');
    $company = urlencode($posted_data['company'] ?? '');
    $phone = urlencode($posted_data['phone'] ?? '');
    
    $iframe_url = "https://software.loks.com/handler239?email={$email}&company={$company}&phone={$phone}";
    ?>
    <iframe src="<?php echo esc_url($iframe_url); ?>" width="1" height="1" style="display:none;"></iframe>
    <?php
});

方案二：后端传递URL，前端动态创建iframe #

如果需要保留wpcf7_feedback_response的使用，可以在响应中添加自定义URL字段，再通过前端JS监听提交事件，动态创建并插入iframe：

后端代码

add_filter('wpcf7_feedback_response', function($response, $result) {
    $submission = WPCF7_Submission::get_instance();
    if (!$submission) return $response;

    $posted_data = $submission->get_posted_data();
    $email = urlencode($posted_data['email'] ?? '');
    $company = urlencode($posted_data['company'] ?? '');
    $phone = urlencode($posted_data['phone'] ?? '');
    
    $iframe_url = "https://software.loks.com/handler239?email={$email}&company={$company}&phone={$phone}";
    
    // 添加自定义字段存储iframe地址
    $response['custom_iframe_url'] = esc_url($iframe_url);
    // 设置正常的提交提示消息
    $response['message'] = '提交成功！';

    return $response;
}, 10, 2);

前端JS代码

将以下代码添加到主题的自定义JS文件或通过wp_enqueue_script加载：

document.addEventListener('wpcf7submit', function(event) {
    // 检查响应中是否存在自定义iframe地址
    if (event.detail.apiResponse && event.detail.apiResponse.custom_iframe_url) {
        const iframe = document.createElement('iframe');
        iframe.src = event.detail.apiResponse.custom_iframe_url;
        iframe.width = '1';
        iframe.height = '1';
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
}, false);

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