WordPress前端带表单页面开发求助：表单提交与结果返回需求

Hey there! 既然你已经用了一段时间WordPress但没碰过开发，那我给你梳理下实现这个表单的核心步骤，都是WordPress原生的方法，不用跳去别的网站～

1. 编写前端表单代码 #

你可以直接在主题的page.php里添加，或者更规范的话，创建一个自定义页面模板（比如template-custom-form.php），把下面的HTML表单代码放进去：

<form method="post" action="<?php echo esc_url( get_permalink() ); ?>">
    <div class="form-group">
        <label for="value1">VALUE1:</label>
        <input type="text" id="value1" name="value1" required>
    </div>
    <div class="form-group">
        <label for="value2">VALUE2:</label>
        <input type="text" id="value2" name="value2" required>
    </div>
    <div class="form-group">
        <label for="value3">VALUE3:</label>
        <input type="text" id="value3" name="value3" required>
    </div>
    <button type="submit" name="submit_custom_form">SUBMIT</button>
</form>

这里用esc_url(get_permalink())保证提交地址的安全性，required属性可以做简单的前端必填验证。

2. 处理表单提交逻辑 #

接下来要写PHP代码处理用户提交的数据，建议放在主题的functions.php里（或者做个简单的自定义插件，更便于迁移）：

function handle_custom_form_submission() {
    // 先确认是表单提交请求
    if ( isset( $_POST['submit_custom_form'] ) ) {
        // 安全过滤数据，避免XSS攻击
        $value1 = sanitize_text_field( $_POST['value1'] );
        $value2 = sanitize_text_field( $_POST['value2'] );
        $value3 = sanitize_text_field( $_POST['value3'] );
        
        // 这里写你的业务处理逻辑，比如计算、存储或者生成返回内容
        $result = "你提交的三个值分别是：{$value1}、{$value2}、{$value3}";
        
        // 用会话存储结果，避免刷新页面重复提交
        session_start();
        $_SESSION['form_result'] = $result;
        
        // 重定向回当前页面，防止重复提交
        wp_redirect( get_permalink() );
        exit;
    }
}
add_action( 'init', 'handle_custom_form_submission' );

3. 显示处理后的结果 #

回到表单所在的页面模板，在表单上方或者下方添加这段代码，用来展示处理结果：

<?php
session_start();
if ( isset( $_SESSION['form_result'] ) ) {
    echo '<div class="form-result">' . esc_html( $_SESSION['form_result'] ) . '</div>';
    // 显示完结果后清除会话，避免刷新重复显示
    unset( $_SESSION['form_result'] );
}
?>

额外小提示 #

• 为了更安全，可以给表单加上CSRF验证：在表单里加一行<?php wp_nonce_field( 'custom_form_action', 'custom_form_nonce' ); ?>，然后在处理逻辑里添加检查：if ( ! wp_verify_nonce( $_POST['custom_form_nonce'], 'custom_form_action' ) ) { exit; }，能有效防止恶意提交
• 样式方面，可以在主题的style.css里写自定义CSS，调整表单、按钮和结果提示的样式，让页面更美观

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