博客 / WordPress 教程

Contact Form 7 填写表单后在页面返回下载链接

如何在Wordpress开发中针对使用Contact Form 7 填写表单后在页面返回下载链接,比如下载PDF白皮书等。这里提供三种参考方案:

方法一:使用 Contact Form 7 + Thank You Page Redirect

1、安装插件
安装并激活插件 Contact Form 7 – Redirect & Thank You Page

2、配置重定向

  • 编辑你的 Contact Form 7 表单。
  • 在表单的设置页面中,启用插件提供的重定向选项。
  • 设置一个专门的“感谢页面”(Thank You Page),例如 thank-you-page,在这个页面中提供 PDF 下载链接:
<h2>感谢您的提交!</h2>
<p>点击以下链接下载白皮书:</p>
<a href="/path-to-your-pdf.pdf" target="_blank">下载 PDF 白皮书</a>

方法二:使用 Contact Form 7 的 DOM 修改显示链接

如果你希望用户提交表单后直接在当前页面显示下载链接,可以通过 JavaScript 和 Contact Form 7 的 wpcf7mailsent 事件实现:

1、修改 Contact Form 7 表单 HTML
在页面中,添加一个隐藏的下载链接区域:

<div id="download-link" style="display: none; margin-top: 20px;">
    <p>感谢您的提交!点击以下链接下载白皮书:</p>
    <a href="/path-to-your-pdf.pdf" target="_blank">下载 PDF 白皮书</a>
</div>

2、添加 JavaScript
在主题的 functions.php 中,添加以下代码以加载 JavaScript:

function enqueue_cf7_script() {
    if (is_page('your-contact-form-page')) { // 替换为表单所在页面的 slug 或 ID
        wp_enqueue_script('cf7-custom-js', get_template_directory_uri() . '/js/cf7-custom.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_cf7_script');

3、创建 JavaScript 文件
在主题的 js/ 文件夹中,创建 cf7-custom.js 文件,内容如下:

document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('wpcf7mailsent', function (event) {
        // 显示隐藏的下载链接
        document.getElementById('download-link').style.display = 'block';
    }, false);
});

方法三:直接在表单回调中返回内容

1、安装 Flamingo 插件
如果需要记录用户提交的信息,可以安装 Flamingo 插件来保存提交记录。

2、通过 CF7 的 wpcf7_before_send_mail Hook 处理
你可以使用 WordPress 的 wpcf7_before_send_mail 钩子,在表单处理时自定义响应:

add_action('wpcf7_before_send_mail', 'custom_return_download_link');
function custom_return_download_link($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    if ($submission) {
        $response = [
            'status' => 'mail_sent',
            'message' => '表单提交成功!',
            'download_url' => home_url('/path-to-your-pdf.pdf')
        ];
        echo json_encode($response);
        exit;
    }
}

需要建站的朋友可以与我们取得联系 微信 sheshuiapp

评论留言

您的邮箱地址不会被公开。 必填项已用 * 标注