WordPress自定义表单（非CF7与AJAX）跳转感谢页的正确实现方法

问题概述 #

主题内有一个自定义联系表单，提交动作指向主题目录下的data.php。尝试在data.php顶部添加header("refresh:5;url='https://example.com/thank-you/'")实现跳转时，会出现两种问题：保留原有成功提示块时会先显示提示再跳转；删除提示块后页面空白。需要找到符合WordPress原生规范的解决方案。

方案1：加载WordPress环境后使用wp_redirect（直接跳转） #

由于data.php默认未加载WordPress核心，无法直接使用WP原生函数。先引入WP核心文件，再用wp_redirect实现跳转，同时处理表单数据时增加安全验证：

修改data.php代码：

<?php
// 加载WordPress核心（路径根据站点根目录位置调整，确保正确）
require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');

ini_set('display_errors', 0);
ini_set('display_startup_errors', 0);
error_reporting(E_ALL);

// 安全验证：检查必填字段是否存在
if (empty($_POST['nameUser']) || empty($_POST['phoneUser']) || empty($_POST['letter_act'])) {
    wp_redirect(home_url('/form-error/'), 302);
    exit;
}

// 清洗用户输入，避免安全风险
$to = sanitize_email($_POST['letter_act']);
$from = 'noreply@' . $_SERVER['SERVER_NAME'];
$subject = '=?utf-8?B?'.base64_encode('New request:').'?=';

$headers = [];
$headers[] = 'Return-path: <' . $from . '>';
$headers[] = 'From: request <' . $from . '>';
$headers[] = 'Content-type: text/plain; charset=utf-8';
$headers[] = 'Content-Transfer-Encoding: quoted-printable';

$message = "Name: " . sanitize_text_field($_POST['nameUser']) . "\n\nPhone: " . sanitize_text_field($_POST['phoneUser']);
$mail = wp_mail($to, $subject, $message, $headers);

// 根据发送结果跳转
if ($mail) {
    // 跳转至感谢页（用WP函数获取页面链接，更灵活）
    $thank_you_url = get_permalink(get_page_by_path('thank-you'));
    wp_redirect($thank_you_url, 302);
} else {
    wp_redirect(home_url('/form-error/'), 302);
}
exit;
?>

说明：

• 引入wp-load.php后可直接使用WP的wp_redirect、wp_mail等原生函数，更符合WordPress规范
• 添加了字段非空检查和输入清洗，提升安全性
• 直接跳转不会显示中间页面，体验更流畅

方案2：保留提示并实现跳转（适合需要告知用户的场景） #

如果需要短暂显示提交结果再跳转，可完善HTML输出结构，避免空白页面：

修改data.php的成功/错误分支：

if ($mail) {
    $thank_you_url = 'https://example.com/thank-you/';
    echo '<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="5;url=' . $thank_you_url . '">
<title>提交成功</title>
<style>
body {font-family: Arial, sans-serif;text-align:center;margin:100px auto;color:#0F5F6A;}
.success-box {width:260px;padding:40px 30px;background:#fff;box-shadow:0 10px 15px rgba(0,0,0,.5);}
.btn {display:block;width:100px;margin:40px auto 0;padding:10px 25px;background:#ff530e;border-radius:90px;border-bottom:5px solid #d1450a;color:#fff;text-decoration:none;font-size:80%;}
</style>
</head>
<body>
<div class="success-box">
<p>表单提交成功！感谢您的提交</p>
<p>5秒后自动跳转，或<a href="' . $thank_you_url . '" class="btn">立即前往</a></p>
</div>
</body>
</html>';
} else {
    $error_url = home_url('/');
    echo '<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="5;url=' . $error_url . '">
<title>提交失败</title>
<style>
body {font-family: Arial, sans-serif;text-align:center;margin:100px auto;color:#282828;}
.error-box {width:260px;padding:40px 30px;background:#fff;border:1px solid #c0c0c0;border-radius:10px;box-shadow:0 10px 15px rgba(0,0,0,.5);}
.btn {display:block;width:100px;margin:40px auto 0;padding:10px 25px;background:#00b5a0;border-radius:5px;color:#fff;text-decoration:none;text-shadow:1px 1px 1px #000;}
</style>
</head>
<body>
<div class="error-box">
<p>提交失败，请稍后重试</p>
<p>5秒后自动返回，或<a href="' . $error_url . '" class="btn">立即返回</a></p>
</div>
</body>
</html>';
}

说明：

• 输出完整的HTML结构，避免空白页面
• 使用<meta>标签实现跳转，兼容性更好
• 保留了友好的提示信息和手动跳转入口

方案3：WordPress原生AJAX提交（推荐，无页面刷新） #

这是最符合WordPress开发规范的方案，无需单独的data.php，通过WP AJAX接口处理表单，提交后直接跳转：

步骤1：修改表单代码（移除action属性） #

<form method="post" id="form2">
    <ul class="clearfix">
        <li><input type="text" name="nameUser" class="required" placeholder="Your name"></li>
        <li><input type="tel" name="phoneUser" class="required phone" placeholder="Your phone"></li>
    </ul>
    <div class="btn-container clearfix">
        <div class="wrap-btn-right">
            <input type="hidden" name="letter_act" value="<?php echo get_field('letter_action', 'option'); ?>">
            <button class="btn-gen" type="submit">Submit</button>
        </div>
    </div>
</form>

步骤2：在主题functions.php添加AJAX处理函数 #

// 登录用户和未登录用户都能触发
add_action('wp_ajax_submit_custom_form', 'submit_custom_form_handler');
add_action('wp_ajax_nopriv_submit_custom_form', 'submit_custom_form_handler');

function submit_custom_form_handler() {
    // 验证必填字段
    if (empty($_POST['nameUser']) || empty($_POST['phoneUser']) || empty($_POST['letter_act'])) {
        wp_send_json_error(['message' => '请填写所有必填项']);
    }

    // 清洗输入数据
    $to = sanitize_email($_POST['letter_act']);
    $from = 'noreply@' . $_SERVER['SERVER_NAME'];
    $subject = '=?utf-8?B?'.base64_encode('New request:').'?=';

    $headers = [];
    $headers[] = 'Return-path: <' . $from . '>';
    $headers[] = 'From: request <' . $from . '>';
    $headers[] = 'Content-type: text/plain; charset=utf-8';
    $headers[] = 'Content-Transfer-Encoding: quoted-printable';

    $message = "Name: " . sanitize_text_field($_POST['nameUser']) . "\n\nPhone: " . sanitize_text_field($_POST['phoneUser']);
    $mail = wp_mail($to, $subject, $message, $headers);

    if ($mail) {
        // 获取感谢页链接
        $thank_you_url = get_permalink(get_page_by_path('thank-you'));
        wp_send_json_success(['redirect_url' => $thank_you_url]);
    } else {
        wp_send_json_error(['message' => '提交失败，请稍后重试']);
    }
}

步骤3：添加JS提交逻辑（放在主题JS文件或footer） #

jQuery(document).ready(function($) {
    $('#form2').on('submit', function(e) {
        e.preventDefault();
        var $form = $(this);
        var formData = $form.serialize();

        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: formData + '&action=submit_custom_form',
            beforeSend: function() {
                // 可选：添加加载动画
                $form.find('button').prop('disabled', true).text('提交中...');
            },
            success: function(response) {
                if (response.success) {
                    window.location.href = response.data.redirect_url;
                } else {
                    alert(response.data.message);
                }
            },
            error: function() {
                alert('提交出错，请稍后重试');
            },
            complete: function() {
                // 恢复按钮状态
                $form.find('button').prop('disabled', false).text('Submit');
            }
        });
    });
});

说明：

• 完全遵循WordPress AJAX开发规范，无需维护单独的处理文件
• 无页面刷新，用户体验更好
• 内置安全验证和数据清洗，避免注入风险
• 可灵活添加加载状态、错误提示等交互效果

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